Search code examples
materializepicker

Show date from database on Picker materialize


I have the following code, when I click on the Picker I want to see the date 01/01/2018 selected in the calendar. I need the calendar to select the date that contains the value of the imput.

   $var_date = '01/01/2018';


<input type="text" name="date" name="date" class="datepicker" value="<?php echo $var_date; ?>">
      <label for="first_name">Date</label>

Solution

  • This can be done with the help of instance.setDate(new Date()).

    <input type="text" class="datepicker">
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var elems = document.querySelector('.datepicker');
            var instance = M.Datepicker.init(elems);
            // instance.open(); This will open your datepicker on its own when page is loaded completely
            instance.setDate(new Date(2018, 2, 8));
        });
    </script>
    

    Note- new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

    The argument monthIndex is 0-based. This means that January = 0 and December = 11

    MDN - Date

    Materialize - Pickers