Saltar navegación

[Resuelto] Datepicket onClose function not working

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 4 years, 3 months ago. 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.

Este tema contiene 10 respuestas, tiene 2 mensajes.

Última actualización por christopherH-7 4 years, 3 months ago.

Asistido por: Christopher Amirian.

Autor
Mensajes
#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: enlace oculto
Please let me know if you need any other details.

#2279267

Christopher Amirian
Colaborador

Idiomas: Inglés (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
Colaborador

Idiomas: Inglés (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
Colaborador

Idiomas: Inglés (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

enlace oculto

#2280701

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

#2280703

Christopher Amirian
Colaborador

Idiomas: Inglés (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
Colaborador

Idiomas: Inglés (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!