[Resolved] Datepicket onClose function not working

[Author]

Posts

[christopherH-7]

Hi,

I am using post forms with date field and used date picker onClose function to add only month and year not date in the input field, It was working fine but now it stopped working. I have created an HTML form and checked it's working fine. Only facing issue once using post forms, Here is a test page: hidden link
Please let me know if you need any other details.

[Christopher Amirian]

Hi there,

Please kindly use the method below to force the Datepicker to show the Month and Year only:

https://toolset.com/forums/topic/calendar-with-only-month-and-year/

Thank you.

[christopherH-7]

Hi,

I already did this and it's showing the Month and year only, but issue is that it's not adding the value after closing as I mentioned above, please check.

[Christopher Amirian]

Hi there,

The revised code is this :

Javascript

jQuery(document).ready(function($) {
    var from = jQuery('input.form-control.hasDatepicker').attr('id');
    $("#"+from).datepicker( "destroy" );
    $("#"+from).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            console.log('closed');
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});

CSS:

.ui-datepicker-calendar {
    display: none;
 }

Thanks.

[christopherH-7]

Hi,

I have checked this code and still not working, please let me know if you need site access or something else to replicate the issue.

[Christopher Amirian]

Hi there,

Yes please, you can set the next reply as private and give the login information.

Also, tell us which form we should check for the code.

Thanks.

[christopherH-7]

hidden link

[christopherH-7]

My details are showing there so I have removed the access, can you please set private message again?

[Christopher Amirian]

Hi there,

I set the next reply to have the checkbox. Please click the private checkbox before sending the info.

Thanks.

[Christopher Amirian]

Hi there,

Thank you for providing the login information. There was two problems on your case that I addressed:

1. As you hide the datepickers initially the code should have been added when the page load is compelete and not on the DOm ready event.

2. You had more than one DatePicker.

Here is the revised code that works on your installation:

jQuery(window).load(function($) {
  	jQuery('input.form-control.hasDatepicker').each(function() {
      jQuery(this).datepicker( "destroy" );
      jQuery(this).datepicker({
          changeMonth: true,
          changeYear: true,
          showButtonPanel: true,
          dateFormat: 'MM yy',
          onClose: function(dateText, inst) { 
              var month = jQuery("#ui-datepicker-div .ui-datepicker-month :selected").val();
              var year = jQuery("#ui-datepicker-div .ui-datepicker-year :selected").val();
              jQuery(this).datepicker('setDate', new Date(year, month, 1));
          }
      });         
    });
});

Thank you 🙂

[christopherH-7]

My issue is resolved now. Thank you!