31

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
    window.picker = $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 100, // Creates a dropdown of 15 years to control year
        format: 'dd/mm/yyyy'    
    });

<input type="text" id="Date" class="datepicker" />

On Click event of a Button , I am setting the date :-

$("#Date").val('23/01/2015');

When i open the datepicker it shows me today's date.

How to set the date in materialize datepicker?

10 Answers 10

46

Materialize datepicker is a modified pickadate.js picker.

Accodging to their API docs, this is how to set the picker:

  1. Get the picker:

var $input = $('.datepicker').pickadate()

// Use the picker object directly.
var picker = $input.pickadate('picker')

  1. 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' })

2
  • I have defined the datepicker in custom.js file. When i try to set date as per your answer from outside custom.js it shows me error :- Uncaught ReferenceError: picker is not defined
    – Anup
    May 19, 2015 at 12:02
  • 2
    I declared global variable like this :-window.picker = $input.pickadate('picker'); .. Now its working..thanks.
    – Anup
    May 19, 2015 at 12:11
14

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' });
0
11

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.

enter image description here

instance.setDate() will select the date in datepicker when you'll open it.

enter image description here

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

3
  • 1
    setDefaultDate: true does not result in an output with the default date in display. Any workarounds for that?
    – Divneet
    Aug 14, 2018 at 4:35
  • I have two date fields. When I added this script the calendar is showing only for the first field, not for the second field. Any hacks to show calendar for second field too?
    – Madhi
    Jan 26, 2019 at 18:02
  • Figured out!! just change the class for second field and added into the script. It works like a charm!
    – Madhi
    Jan 26, 2019 at 18:05
6

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);
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'});

});
1

You can pass in the options that you want to default to on init. For example the below js code would work with markup:

const elems2 = document.querySelectorAll('.datepicker');
  for (element of elems2) {
    const date = element.dataset.defaultDate
    if (date !== undefined) {
      M.Datepicker.init(element, {defaultDate: new Date(date), yearRange: 15})
    }
    else {
       M.Datepicker.init(element, {})
    }
  }
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
           
           
           
         <input class="validate datepicker valid" required="required" data-default-date="2009-07-11 10:14:47 -0700" name='picker' type="text">
         <label for="picker" class="active">Date Picker 10 years ago</label>

1
  • setDefaultDate sets the default input value, but I dont think this was the question
    – Agustin
    Jul 11, 2019 at 17:26
0

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.

-1

var $input = $('.datepicker').pickadate()

// Use the picker object directly.
var picker = $input.pickadate('picker')

Heading

1
  • 4
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
    – kayess
    Jun 13, 2016 at 7:12
-1
$('#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.

-2

watch out for your css and js version of materialize: if in the <head> you have

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

then stick to it having same JS version so that you can use $('.datepicker').pickadate('picker').set('select','your parsed date',{format:'your format'}).trigger('change')

If version is 1.0.0 then you will have to use $('.datepicker').datepicker();

1
  • also add $('.datepicker').on('mousedown',function(event){ event.preventDefault(); }) if using it in Chrome (known issue: link) Oct 20, 2019 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.