Materialize: Datepicker selecting wrong date at openning when input value and format options are setted

Created on 8 Jun 2018 · 14Comments · Source: Dogfalo/materialize

Context

Hi guys!
I'm trying to use datepicker with 'format: dd/mm/yyyy' in options dict (code below), according to Materialize documentation, but i'm having some issues when I set HTML 'value' attribute for the datepicker input.
I guess I'm using the latest Materialize release (at least following the latest documentation on the official website, 1.0.0-rc.1).

Current Behavior

When I code,
<input type="text" class="datepicker" value="09/06/2019">
the year is respected, but day and month are switched on first datepicker openning (and so on, if I don't change the input value with datepicker menu).
If I open datepicker with the wrong date and change it to 9 of june manually, the HTML input value doesn't change, and the datepicker begin to open correctly. (if I close and open it again without reload the page, of course)

Expected Behavior

I guess the expected behavior is (in my reproducible case) openning with "9th of June, 2019" date selected, following the setted options, but instead, the first oppening (and so on if I don't change the values manually) coming with "6th of Sep, 2019".

How to Reproduce

Simple code to reproduce,

<html>
    <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <input type="text" class="datepicker" value="09/06/2019">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                const options = {
                    format: 'dd/mm/yyyy',
                };
                var elems = document.querySelectorAll('.datepicker');
                var instances = M.Datepicker.init(elems, options);
            })
        </script>
    </body>
</html>

Environment

Following the "current latest" (2018-06-08) Materialize website documentation.
Version: 1.0.0-rc.1
Browser: I tested on Chrome (desktop and mobile) and Firefox (desktop)
SO: Tested on Linux, Windows and Android

Source

ghost

All 14 comments

I also have the same problem.

idamedic on 25 Jul 2018

👍1

I have the exact same issue as well.

renandhein on 24 Sep 2018

👍1

Same here..
Any solution?

joaorsfonseca on 3 Oct 2018

👍1

dd/mm/yyyy is not a supported format to create a date from. The code just relies on Date.parse and ignores format. The specific line can be seen here:

https://github.com/Dogfalo/materialize/blob/v1-dev/js/datepicker.js#L144

As a workaround, you can probably split the date and call setDate to fix initial position, something like this:

for(el of elems){
  var picker = M.Datepicker.getInstance(el);
  var splitDate = el.value.split("/");
  picker.setDate(splitDate[1] + "/" + splitDate[0] + "/" + splitDate[2], true);
}

if #6106 ever gets merged, it would be nicer to set the starting date with a custom formatter.

leomoty on 12 Oct 2018

Hi, have the same problem would be nice to have a fix for this.

pythdasch on 7 Nov 2018

@pythdasch does this workaround, @leomoty mentioned, not work for you?

Mikefox2k on 9 Nov 2018

@Mikefox2k no, didn't work for me as it didn't get the instance. but I did a workaround as this, which work :

$('.datepicker').datepicker({ minDate: result, format: "dd/mm/yyyy", defaultDate: result, autoClose: true, // Close upon selecting a date, onSelect: function(date) { var splitDate = date.split("/"), newdate = splitDate[1] + "/" + splitDate[0] + "/" + splitDate[2]; this.value = newdate; } });

pythdasch on 21 Nov 2018

Hi, same issue. here how I solved it, similar to @leomoty solution:

const options = {
  format: 'dd/mm/yyyy',
};

var elems = document.querySelectorAll('.datepicker');
var picker = M.Datepicker.init(elems[0], options);

var d = elems[0].value.split(/[^0-9]/);
var newDate = new Date(d[2], d[1]-1, d[0]);
picker.setDate(newDate);

See working fiddle

Cheers

arcaweb-ch on 13 Dec 2018

Hello, I used the code below to resolve this

$(function () {
    //Get the datepicker instance
    let instance = M.Datepicker.getInstance($('#initial_date'));

    //Separated the date in array of parts
    let initial_date = $('#initial_date').val().split('/');

    //Using the instance, set the default date
    instance.setDate(new Date(parseInt(initial_date[2]), parseInt(initial_date[1]) - 1, parseInt(initial_date[0])));
});

vitorvsv on 8 Apr 2019

👍1

for jquery

    jQuery('.datepicker').datepicker(options);

    jQuery('.datepicker').each(function () {
        var d = $(this).val().split(/[^0-9]/);
        var newDate = new Date(d[2], d[1] - 1, d[0]);

        $(this).datepicker('setDate', newDate);
    });

cempehlivan on 11 Jul 2019

You need to intialize the datepicker with the following code:

$('.datepicker').datepicker({'setDefaultDate':true});

pnkaj619 on 18 Sep 2019

Hey @pnkaj619, that won't fix this specific issue, we are using "dd/mm/yyyy" format, so 18/09/2019 becomes an invalid date, since this relies on Date built in support.

leomoty on 18 Sep 2019

here my working solution for specific date format 'format: dd/mm/yyyy'

$('.datepicker').datepicker({
format: "dd/mm/yyyy",
onOpen: function () {
var splitDate = jQuery(this.el).val().split("/");
if (splitDate.length === 3) {
var newDate = new Date(parseInt(splitDate[2]), (parseInt(splitDate[1]) - 1), parseInt(splitDate[0]));
var instance = M.Datepicker.getInstance(this.el);
instance.setDate(newDate);
}
}
});

since month starting from 0 to 11 i need to substract -1 from the current value to generate new date and then set to current instance

jadeja-rajdeep on 7 Nov 2019

My solution

let date_pickers = document.querySelectorAll('.datepicker');

$.each(date_pickers, function(){
    let d = this.value.split(/[^0-9]/);
    this.value = ""; 
    let options = {format: 'dd/mm/yyyy',i18n: i18n_config}
    if(d.length > 1){
        options.setDefaultDate = true,
        options.defaultDate = new Date(d[2], d[1] - 1, d[0])
    }
    M.Datepicker.init(this, options);
});