Search code examples
bulma

How to center bulma-calendar horizontally with bulma


I am using bulma-calendar and want to have the calendar horizontally centered. I think I almost tried every combination of .has-text-centered, .is-centered, empty columns on the side... Somehow I can't make this work. I'd appreciate a hint. Thanks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- import bulma -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <!-- import bulma-calendar -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/css/bulma-calendar.min.css">
</head>

<body>
    <!-- import bulma-calendar -->
    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/js/bulma-calendar.min.js"></script>   

    <div class="columns has-text-centered">
        <div class="column">
            asd
            <input type="date">
        </div>
    </div>

    <script>
        var options = {
            type: "date",
            color: "danger",
            dateFormat: "DD-MM-YYYY",
            startDate: this.startDate,
            displayMode: "inline",
        };

        // Initialize all input of type date
        var calendars = bulmaCalendar.attach('[type="date"]', options);

        // Loop on each calendar initialized
        for (var i = 0; i < calendars.length; i++) {
            // Add listener to date:selected event
            calendars[i].on('select', date => {
                console.log(date);
            });
        }

        // To access to bulmaCalendar instance of an element
        var element = document.querySelector('#my-element');
        if (element) {
            // bulmaCalendar instance is available as element.bulmaCalendar
            element.bulmaCalendar.on('select', function (datepicker) {
                console.log(datepicker.data.value());
            });
        }
    </script>
</body>


Solution

  • Made it work with wrapper

    <div class="is-inline-block">
      <input type="date">
    </div>