[Résolu] Datepicker displaying random dates

[Auteur]

Publications

[Mukesh]

I am trying to:
I've written a JQuery script that allows user to select values like 3 Months, 6 Months, 12 Months etc from a dropdown field called Follow Up and selecting it should populate a Datepicker field called Follow Up Date with the correct date based on the selection. That is working and the JQuery code is below. However once a user select one of those, then chooses to use the Datepicker to select another date, the Datepicker field is return random dates.

Link to a page where the issue can be seen:
lien caché

You can select a value from the Follow Up dropdown and it should populate the correct date, which is working. But then try to set another date using the Datepicker and it is returning random dates.
I expected to see:
Even after selecting different date with the datepicker it should set that date correctly.

Instead, I got: I get random dates (past and future)

Here is the JQuery I have set in the Post Form Javascript editor. I leveraged code that I found on a Post on ToolSet Support Forums:

jQuery(window).bind('load', function(){
  // put your code inside here
  jQuery(".js-cred-follow-up").change(function(event) {
    
    //Only change if Custom Date is not selected.
    if (jQuery(".js-cred-follow-up").val() != 9999) {
      	//console.log("Changed Detected");
      	var targetDate = new Date();
      	var to = jQuery('input[name="wpcf-follow-up-date[display-only]"').attr('id');
      	var to1 = jQuery('input[name="wpcf-follow-up-date[datepicker]"').attr('id');

      	//console.log("days " + jQuery(".js-cred-follow-up").val());
      	targetDate.setDate(targetDate.getDate() + parseInt(jQuery(".js-cred-follow-up").val(),10));
      	//console.log("new date "+ targetDate.getDate());
      	jQuery( "#"+to).val(targetDate);
      	//console.log("display only " + jQuery( "#"+to).val());
      	jQuery(".js-cred-follow-up-date").datepicker("option","dateFormat","MM dd, yy");
      	jQuery(".js-cred-follow-up-date").datepicker("setDate", targetDate);
      	//jQuery(".js-cred-follow-up-date").datepicker("option","altFormat","@");
      	jQuery(".js-cred-follow-up-date").datepicker( "option", "altField","#"+to1);
      	
      	//console.log(jQuery(".js-cred-follow-up-date").datepicker("option","altField"));
    } // if followup is 9999
    else {
      	jQuery(".js-cred-follow-up-date").datepicker("setDate",null);
		jQuery( "#"+to).val(null);
      	jQuery( "#"+to1).val(null);
      	jQuery(".js-cred-follow-up-date").datepicker( "option", "altField",null);
      	console.log(jQuery(".js-cred-follow-up-date").datepicker("getDate"));
      	console.log("display only " + jQuery( "#"+to).val());
      	jQuery(".js-cred-follow-up-date").datepicker( "refresh" );
    }
    
   });
});

[Luo Yang]

Hello,

Thanks for the details, I can see the problem in your website.

The hidden field "wpcf-follow-up-date[datepicker]" should stores timestamp format value, but your custom JS codes setup a date format value into it, see screenshot: datepicker.JPG

You will need to change your custom JS codes to turn the date format to timestamp format, for example this thread:
https://stackoverflow.com/questions/30209451/convert-my-date-to-timestamp-in-javascript

[Mukesh]

Hello Luo,
Thanks for that direction. I have fixed it and it now shows timestamp value, however I still am not able to pick a date with datepicker correctly. It still shows random date. I have cleaned up the JQuery code a little bit as below. Please let me know what other options there might be? It just seems like .datepicker(... lines are not correct but I couldn't find any other examples.

jQuery(window).bind('load', function(){
  function formatDate(date) {
     var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
	const longmonth = d.toLocaleString('en-us', { month: 'long' });
    return longmonth + ' ' + day +', '+ year;
  }
  // put your code inside here
  jQuery(".js-cred-follow-up").change(function(event) {

    //Only change if Custom Date is not selected.
    if (jQuery(".js-cred-follow-up").val() != 9999) {
      	//console.log("Changed Detected");
      	var todayDate = new Date();
      	var displayonly = jQuery('input[name="wpcf-follow-up-date[display-only]"').attr('id');
      	var datepicker = jQuery('input[name="wpcf-follow-up-date[datepicker]"').attr('id');		
      	//console.log("days " + jQuery(".js-cred-follow-up").val());
      	var targetDate = new Date(todayDate.getFullYear(),todayDate.getMonth(),todayDate.getDate() + (parseInt(jQuery(".js-cred-follow-up").val(),10)));
      	var formattedDate = formatDate(targetDate);
      	console.log("new date " + formattedDate);
      	var timeStamp = targetDate.getTime()/1000;
      	jQuery( "#"+datepicker).val(timeStamp);
      	jQuery( "#"+displayonly).val(formattedDate);
      	//console.log("display only " + jQuery( "#"+to).val());
      	jQuery(".js-cred-follow-up-date").datepicker("option","dateFormat","MM dd, yy");
      	jQuery(".js-cred-follow-up-date").datepicker("setDate", formattedDate);
      	jQuery(".js-cred-follow-up-date").datepicker("option","altFormat","@");
      	jQuery(".js-cred-follow-up-date").datepicker( "option", "altField","#"+displayonly);   	
    } // if followup is 9999
    else {
  
    }
    
   });
});

[Mukesh]

My issue is resolved now. Thank you!
For anyone else running into similar issues or need here is the code that works for me. Please use/modify as you see fit.

jQuery(window).bind('load', function(){
  function formatDate(date) {
     var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
	const longmonth = d.toLocaleString('en-us', { month: 'long' });
    return longmonth + ' ' + day +', '+ year;
  }
  // put your code inside here
  jQuery(".js-cred-follow-up").change(function(event) {

    //Only change if Custom Date is not selected.
    if (jQuery(".js-cred-follow-up").val() != 9999) {
      	//console.log("Changed Detected");
      	var todayDate = new Date();
      	var displayonly = jQuery('input[name="wpcf-follow-up-date[display-only]"').attr('id');
      	var datepickerfield = jQuery('input[name="wpcf-follow-up-date[datepicker]"').attr('id');		
      	//console.log("days " + jQuery(".js-cred-follow-up").val());
      	var targetDate = new Date(todayDate.getFullYear(),todayDate.getMonth(),todayDate.getDate() + (parseInt(jQuery('.js-cred-follow-up').val(),10)));
      	var formattedDate = formatDate(targetDate);
      	console.log("new date " + formattedDate);
      	var timeStamp = targetDate.getTime()/1000;
      	jQuery( '#'+datepickerfield).val(timeStamp);
      	jQuery( '#'+displayonly).val(formattedDate);
      	//console.log("display only " + jQuery( "#"+to).val());
      	jQuery(".js-cred-follow-up-date").datepicker({
          	altField: "#"+datepickerfield,
			altFormat: "@",
       		dateFormat: "MM dd, yy",
            setDate: formattedDate,
		});
    } // if followup is 9999
    else {
  
    }
    
   });
});

[Luo Yang]

Thanks for sharing the codes, it will help other users.