[Resolved] Calendar with only month and year

[Author]

Posts

[christopherH-7]

I want to show month and year only in calendar field. I have checked this URL

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

But Its not working for me. Here is the Js code:

jQuery(document).ready(function($){
from = jQuery('input[name="wpcf-reporting_month[display-only]"').attr('id');
$("#"+from).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
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));
}
});
});

Here is input HTML code

<input type="text" id="cred_form_305_3-textfield-3-1514025161-57" name="wpcf-reporting_month[display-only]" value="" class="js-wpt-date form-control wpt-form-textfield form-textfield textfield textfield hasDatepicker" style="" readonly="readonly" title="Select date" placeholder="" data-wpt-type="textfield" data-wpt-id="cred_form_305_3_cred_form_305_3-textfield-3-1514025161" data-wpt-name="wpcf-reporting_month[display-only]">

Can you please look into this. There is no error in console as well.

[christopherH-7]

I am able to hide the date section by css.
.ui-datepicker-calendar { display: none; }

But when I click on calendar and select month and year, they are not updating in input box, Input box always remain empty.

[Christian Cox]

Hi, I can help troubleshoot if you can provide a link where I can see this in the browser. Please also include your debug information as described here:
https://toolset.com/faq/provide-debug-information-faster-support/

If this isn't available online for me to review, I could try to work on a clone of your development site. You can install the Duplicator plugin to create the clone: https://toolset.com/faq/provide-supporters-copy-site/

Let me know how you would like to proceed.

[christopherH-7]

Hi Christian,

Here is the link where you can check the issue: hidden link

Please make this private so I can send you admin details as well. As DatePicker not working for admin user.

- login details removed by admin -

[Mohammed]

Hi,

I'm posting here to notify you that Christian is off today. he will get back tomorrow and handle your request.

Thanks.

[Christian Cox]

Thanks for the link. The issue here has to do with timing and datepicker initialization. The document "ready" event isn't reliable for CRED forms, because some internal CRED initialization code is triggered after the ready event. When manipulating the DOM in a CRED form, like initializing jQuery UI datepicker elements, it's best to bind your callback to the window "load" event:

jQuery(window).bind("load", function() {
  from = jQuery('input[name="wpcf-reporting_month[display-only]"').attr('id');
  // your code continues...
});

Inside this callback, you will not have direct access to jQuery in the "$" object - you must access jQuery at 'jQuery':

jQuery("#"+from).datepicker( {

Replace all instances of "$(..." with "jQuery(..." in your callback.

[christopherH-7]

Hi,

I have updated the code as you mentioned but its still not working for me. Here is the updated code:

jQuery(window).bind("load", function() {
from = jQuery('input[name="wpcf-reporting_month[display-only]"').attr('id');
jQuery("#"+from).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));
}
});
});

[Christian Cox]

I'm having trouble testing this on your site. I'm constantly redirected to another page:
hidden link

I cannot log in or test the datepicker. Can you check?

[christopherH-7]

Hi,

You can check now, I have disabled the redirect.

[Christian Cox]

Sorry, the login credentials you provided do not work for me. I see "Error: Invalid Username". Can you confirm the username and password in the private reply fields here?

[Christian Cox]

Thank you, I was able to log in and test this out. It seems that something is going on with the CRED form initialization script. I have made a change in your JavaScript code that listens for a different event:

jQuery(document).on('cred_form_ready', function(){

The previous code was binding initialization to the window "load" event, but that seems to be causing problems on your site. Please clear your browser cache, test again, and let me know if you continue to experience issues.

[christopherH-7]

Still date picker is not working properly. When I am updating the form its showing blank field. Might be value is not updating in hidden field. Please check attached screenshot. You can check submitted data from here : hidden link

[Christian Cox]

As it turns out, I am unable to make this code sample work with a date formatted as "MM yy". The only way I can get the datepicker to work correctly is to use a full date format, like mm/dd/yy. I have made that change, and tested a few times on your site. The dates are being saved correctly now. Can you confirm?

[christopherH-7]

Thank you for all the helps Christian but still need some help. As date is showing in backend but its showing previous year for year field. Like if I select 2020 on frontend then it shows Dec 31 2019 in backend. Can we make it Jan 1 2020?

[Christian Cox]

It's probably a timezone issue related to this timestamp manipulation code. Add some error logs and let me know the $time variable in both these conditions:

                if($_POST['wpcf-reporting-period'] == 'Year'){
			$time = $_POST['wpcf-reporting_year']['display-only']."-01-01";
                        error_log('time1: ' . $time);
			update_post_meta( $wp_fleet_id, 'wpcf-reporting_year', strtotime($time));
		}else if($_POST['wpcf-reporting-period'] == 'Other'){
			$time = $_POST['wpcf-reporting_month']['display-only']."-01";
                        error_log('time2: ' . $time);
			update_post_meta( $wp_fleet_id, 'wpcf-reporting_month', strtotime($time));
		}

If you're not familiar with server logs, I can show you how to activate them. Go in your wp-config.php file and look for define(‘WP_DEBUG’, false);. Change it to:

define('WP_DEBUG', true);

Then add these lines, just before it says 'stop editing here':

ini_set('log_errors',TRUE);
ini_set('error_reporting', E_ALL);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');

Submit the form a couple of times so we can test it with Year and Month or just Year. You will find an error_log.txt file in your site's root directory. Please send me its contents. Once that is done, you can revert the changes you made to wp-config.php.