Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:14

Top GitHub Comments

2reactions

vitorvsvcommented, Apr 8, 2019

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

2reactions

renandheincommented, Sep 24, 2018

I have the exact same issue as well.