Passer la navigation

[Résolu] Datepicket onClose function not working

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:

I want to show Month and Year only on the date picker and on close save only month and year.

Solution:

Please add the Javascript code below in JS EDITOR section of your form:

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));
          }
      });         
    });
});
This support ticket is created Il y a 4 years, 3 months. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Ce sujet contient 10 réponses, a 2 voix.

Dernière mise à jour par christopherH-7 Il y a 4 years, 3 months.

Assisté par: Christopher Amirian.

Auteur
Publications
#2278925

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: lien caché
Please let me know if you need any other details.

#2279267

Christopher Amirian
Supporter

Les langues: Anglais (English )

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.

#2279673

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.

#2280609

Christopher Amirian
Supporter

Les langues: Anglais (English )

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.

#2280665

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.

#2280689

Christopher Amirian
Supporter

Les langues: Anglais (English )

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.

#2280697

lien caché

#2280701

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

#2280703

Christopher Amirian
Supporter

Les langues: Anglais (English )

Hi there,

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

Thanks.

#2285081

Christopher Amirian
Supporter

Les langues: Anglais (English )

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 🙂

#2288517

My issue is resolved now. Thank you!