3

I am using pickadate.js library with the editable mode of the input set true.By default the picker is not updating automatically the calendar when date is changed by keyboard(manually from input).So I want to create a functionality in order to update the calendar when it is reopened after a manually change of date.

So, on the callback method onOpen I set calendar's date with the one on the input.This works if the format is DD/MM/YYY.When the format is MM/YYYY whenever I click the input after a manually change, it sets the input with today date.

var $input = $('#pickadate').pickadate({
    onOpen: function() 
    {
    var picker = $('#pickadate').pickadate('picker');
    var dateinput = $('#pickadate').val();

    if(moment(dateinput, 'MM/YYYY', true).isValid())
    {
        picker.set('select', dateinput, { format: 'mm/yyyy' });
    }           
    },
    onClose: function() 
    {
        $('#pickadate').focus();
    },
        editable: true,
        format: 'mm/yyyy',
        formatSubmit: 'mm/yyyy'

    });

https://jsfiddle.net/cg29dned/

Note that the fiddle is not working exactly like in my project(for instance the month cannot be changed),but is working enough to see the problem.Also , onClose method and Jquery onclick on the input are used because of a known bug when editable is true.

Steps:

  1. Click on the input,select a date.
  2. Change the date manually in the input.
  3. Reopen calendar

In the first example it sets today date and in the second one it really updates the calendar(I suggest you to change manually the month to see the update as the css for the selected day is not working)

0 Answers0