How to set the date in materialize datepicker

问题

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?

回答1:

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

回答2:

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

回答3:

You can use methods of datepicker which are present in V1.0.0-rc.2.

<script>
    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>

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

回答4:

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

回答5:

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>

回答6:

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.

回答7:

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

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

Heading

回答8:

$('#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.

回答9:

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();

来源：https://stackoverflow.com/questions/30324552/how-to-set-the-date-in-materialize-datepicker

标签

javascript

jquery

datepicker

material-design