How to set the date in materialize datepicker

Question

I am using materializecss.com Datepicker. When i try to set date with jquery, the date doesn\'t get set. Here is my Code :-

// Materialize Date Picker
    wi         


        

Answer 1

Alle answers with pickadate() don't work anymore in newer versions of Materialize. The method is now named datepicker(). Here's my code snippet:

var element = document.querySelector('.datepicker');
M.Datepicker.getInstance(element).setDate(new Date(2018,8,7), true);

Answer 2

As per the docs materializecss.com Check the Date format options.

// date picker
$(document).ready(function(){

  $('.datepicker').datepicker( {"format":'dd-mm-yyyy'} ).datepicker("setDate", new Date());

});

You can remove and change the code to below if you do not need current date as highlighted in calendar,

// date picker
$(document).ready(function(){

  $('.datepicker').datepicker( {"format":'dd-mm-yyyy'});

});

Answer 3

If you are using angular, or something similar, in order to manage your web application and you are not able to instance the Datepicker object, according to the materialize documentation, using jQuery you can refer to these methods of the object:

$('.datepicker').datepicker('setDate', new Date());

In the first parameter, in this case setDate, you may specify the method name that you are about to use. In the second parameter, in this case new Date(), you will pass the value to the function (if any).

In the example, that line will update the date of all datepickers with the class .datepicker to today.

Answer 4

$('#elementID').pickadate('picker').set('select', '21/05/2017', { format: 'dd/mm/yyyy' }).trigger("change");

This should suit your needs in one line. Trigger change you may need or maybe not, depends your situation, like me i need it for validation to trigger. Also include with format date just in case some people need it.