Search code examples
datepickermaterialize

How to set default date in Materialize Date Picker?


I need to set default date to now in a Materialize Date Picker.

<input id="since" type="text" class="datepicker">

<script>
    $("#since").datepicker({
        format: 'yyyy/mm/dd 00:00:00',
        defaultDate: 'now', // It doesn't work.
     // defaultDate: '2021/09/09 00:00:00', // It neither work.
        setDefaultDate: true
    
    });
<script>

Solution

  • <input type="text" class="datepicker">
    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const now = new Date();
        const nextDate = new Date(now);
        nextDate.setDate(now.getDate() + 1)
        
        var elems = document.querySelectorAll('.datepicker');
        var instances = M.Datepicker.init(elems, {
          defaultDate: nextDate,
          setDefaultDate: true,
        });
      });
    </script>
    

    The document says that in order to change the default date value then use 2 properties - defaultDate and setDefaultDate. I used the options in vanilla js but the same options can work with jQuery also.

    Working Codepen