How to set the date in materialize datepicker
just add the format you want your date looks like in the attributes of your element.
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year
format: 'dd-mm-yyyy' });
You can use methods of datepicker which are present in V1.0.0-rc.2
.
document.addEventListener('DOMContentLoaded', function() {
var options = {
defaultDate: new Date(2018, 1, 3),
setDefaultDate: true
};
var elems = document.querySelector('.datepicker');
var instance = M.Datepicker.init(elems, options);
// instance.open();
instance.setDate(new Date(2018, 2, 8));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<input type="text" class="datepicker">
defaultDate
will set a default Date that will be shown in input-field of datepicker without even opening the picker.
instance.setDate()
will select the date in datepicker when you'll open it.
Note- new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
The argument monthIndex
is 0-based. This means that January = 0
and December = 11
Picker - Materialize
MDN - Date
Materialize datepicker is a modified pickadate.js picker.
Accodging to their API docs, this is how to set the picker:
- Get the picker:
var $input = $('.datepicker').pickadate()
// Use the picker object directly.
var picker = $input.pickadate('picker')
- Set the date:
// Using arrays formatted as [YEAR, MONTH, DATE].
picker.set('select', [2015, 3, 20])
// Using JavaScript Date objects.
picker.set('select', new Date(2015, 3, 30))
// Using positive integers as UNIX timestamps.
picker.set('select', 1429970887654)
// Using a string along with the parsing format (defaults to `format` option).
picker.set('select', '2016-04-20', { format: 'yyyy-mm-dd' })
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);