Setting datepicker with JavaScript

Topic: Setting datepicker with JavaScript

Kiril free asked 5 years ago

How can I set the date of a datepicker with JavaScript so when we open the datepicker it shows the date I set. Presently when I set the date picker with $('#idOfTheDatePicker').val('01-01-2020'), the date is showed correctly, but if I click in the field, the calendar pops up with the today's date instead of the one I set with JavaScript.

lemons free commented 5 years ago

Add the data-value attribute to the html datepicker element. data-value="[2020,0,1]" (note months begin to count with 0 instead of 1). You can also set the attribute via jquery before initialization.

Kiril free commented 5 years ago

I tried that, but I have to set the date after initialization.

Add comment

Mateusz Łubianka staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

@Kiril,

If you want to set value after the initialization you should use:

$('#').pickadate('picker').set(thing, value);

The thing can be: clear, select, highlight, view, min, max, disable, enable, interval. In this case you have to use 'select'.

$('#').pickadate('picker').set('select', [2015, 3, 20]); 
$('#').pickadate('picker').set('select', new Date(2015, 3, 30));
$('#').pickadate('picker').set('select', '2016-04-20', { format: 'yyyy-mm-dd' });
$('#').pickadate('picker').set('clear');

You can see good example in lemons snippet. @lemons, I think it's very good idea to add this to MDB docs, I'll create a task for our team. Thank you for your opinion.

Best

Add comment

lemons free answered 5 years ago

0 0 Best answer

Here you go:https://mdbootstrap.com/snippets/jquery/lhock/1608686

You have to use the "picker" directly to call the set method after initialization. I do load the date before initalization most of the time, as it keeps my logic more clean.

@MDB team: you could add this to your docs

Add comment

Mateusz Łubianka staff answered 5 years ago

0 0 Best answer