You are viewing limited content. For full access, please sign in.

Question

Question

New 10.2 Date with Time variable

Forms
Updated January 3, 2019
asked on March 24, 2017

I'm using the new date variable in 10.2 and my previous implementation to set a min date as described in https://answers.laserfiche.com/questions/82158/How-do-I-set-the-calendar-to-not-allow-dates-before-todays-date#83983 is not working. Well, the calendar picker does display the min date, but with the time now included, only between 0900pm and 1200am on any day after the mindate seem to validate. I get the message "Value must be between (mindate) and 11:59:59 PM..

Also, any suggestions on comparing this new date w/ time field using java. I used simple <> operators in 10.1 when the date was just a date field but they do not appear to work with the new date&time field.

 

Thanks!

1 0

Answer

SELECTED ANSWER
replied on March 28, 2017 • Show version history

Hi Ken, you could convert the date time into a Date object to compare the datetime. A possible solution:

var startdate = new Date($('.startdate .cf-date-field-date input').val() + ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val())
var enddate = new Date($('.enddate .cf-date-field-date input').val() + ' ' +$('.enddate .cf-date-field-time input').val() + ' ' + $('.enddate .cf-date-field-time select').val())
if (startdate >enddate) {
  window.alert("The event END date cannot be before the START date.");
}

p.s. if your date format does not contain AM/PM, remove the " + ' ' + $('.startdate .cf-date-field-time select').val()"

0 0

Replies

replied on April 1, 2017

Thanks Rui!

 

That worked! Strangely the AM/PM is not checked in .change for this field. So I had to manually include a check for it.

I really appreciate your help and quick responses~

 

Ken

1 0
replied on March 26, 2017

Hi Ken,

It's because the date and time input elements share the same css name "calendarDate". You can change $('.calendarDate input').attr('min',minDate); to $('.calendarDate .cf-date-field-date input').attr('min',minDate); to avoid the issue.

For the other issue, can you give more details on your code so we could see why it does not work now? Generally comparing date should still work but if you want to compare time together you need some extra work.

0 0
View 8 previous replies
replied on March 27, 2017

Hi Rui,

 

Thanks for the reply! adding the .cf-date-field-date is now working for the minimum date.

For the date comparison, I was using the > operator in 10.1, which is called when certain date fields are changed as seen I my sample code below, but now would also like to implement the time along with the date since it is now available in 10.2

 

Any help would be appreciated.

 
$(document).ready(function() {
    
  $('.setupdate input').change(function(){DateChange($('.setupdate input').val(),'1');});
  $('.startdate input').change(function(){DateChange($('.startdate input').val(),'2');});
  $('.enddate input').change(function(){DateChange($('.enddate input').val(),'3');});
     
});

function DateChange(processdate,datenumber){
  if(datenumber =='1')
  {
    $('.startdate input').attr('min',minDate2);
  }
  if(datenumber=='2')
  {
  	$('.enddate input').attr('min',minDate2);
  }
  if(datenumber=='3')
  {
    $('.breakdowndate input').attr('min',minDate2);
  }
   
   if($('.startdate input').val()!="" && ($('.setupdate input').val() > $('.startdate input').val()))    
  {window.alert("The event START date cannot be before the SETUP date.");
  $('.startdate input').val("");
  }
  
  if($('.enddate input').val()!="" && ($('.startdate input').val() > $('.enddate input').val()))    
  {window.alert("The event END date cannot be before the START date.");
  $('.enddate input').val("");
  }
  
    if($('.breakdowndate input').val()!="" && ($('.enddate input').val() > $('.breakdowndate input').val()))    
  {window.alert("The event BREAK DOWN date cannot be before the END date.");
  $('.breakdowndate input').val("");
  }
   
  
}

 

1 0
SELECTED ANSWER
replied on March 28, 2017 • Show version history

Hi Ken, you could convert the date time into a Date object to compare the datetime. A possible solution:

var startdate = new Date($('.startdate .cf-date-field-date input').val() + ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val())
var enddate = new Date($('.enddate .cf-date-field-date input').val() + ' ' +$('.enddate .cf-date-field-time input').val() + ' ' + $('.enddate .cf-date-field-time select').val())
if (startdate >enddate) {
  window.alert("The event END date cannot be before the START date.");
}

p.s. if your date format does not contain AM/PM, remove the " + ' ' + $('.startdate .cf-date-field-time select').val()"

0 0
replied on May 24, 2017

Hi Rui. This solution works, but I am using the AM/PM in the date format because our users prefer to not use military time, and the default is always AM because there is no blank option. The problem is that from one field to the next, the date comparison is made when the date and time combo is updated, but this is before the user had the chance to update the AM/PM.  I could check on the change after the update to Date+Time+AM/PM, but there is no guarantee that the user will change from AM to PM.  I hope this makes sense!

Any suggestions you can provide will be appreciated.

Ken

1 0
replied on May 24, 2017

Do you think if it's acceptable to mark field as invalid and block submission, instead of cleaning invalid value when field is not valid? Marking field as invalid would still give user a chance to fix it by updating AM/PM.

The script could be like this:

$(document).ready(function(){
  $('.startdate input,.startdate select').change(function(){DateChange($('.setupdate input').val(),'1');});
  $('.enddate input,.enddate select').change(function(){DateChange($('.startdate input').val(),'2');});
  window.Parsley.addValidator('datetime', {
    validateString: function(value) {
      var startdate = new Date($('.startdate .cf-date-field-date input').val() + ($('.startdate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val()));
      var enddate = new Date($('.enddate .cf-date-field-date input').val() + ($('.enddate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.enddate .cf-date-field-time input').val() + ' ' + $('.enddate .cf-date-field-time select').val()));
      return startdate <= enddate;
    },
    messages: {
      en: 'Not valid date/time.'
    }
  });
  $('.enddate .cf-date-field-date input').attr('data-parsley-datetime','');
});
function DateChange(processdate,datenumber){
  //Trigger validation on all fields
  $('form').parsley().validate();
}

 

0 0
replied on May 25, 2017 • Show version history

Hi Rui,

You are right. It's better mark the fields as invalid than to clear it out for wrong submission.

So I tweaked the script you gave (thanks!) and I have two small problems:

1. When the AM/PM is changed, the time is validated and the date is not. Since sometimes the problem is the time is wrong between the two dates, just changing the AM/PM could fix  the problem, but the date still shows as invalid.

2.When choosing the date for day2, that is checking to make sure it is not > than day1, date 2 shows invalid until the day2 time is entered if the time of day1 is after 12am.

 

Any suggestions on resolving these would be appreciated.

 

Thanks,

 

Ken

 
$(document).ready(function() {
  
  //check for changes to setup, start, breakdown and end dates to make sure each does not occur before the other
  $('.setupdate input, .setupdate select').change(function(){DateChange($('.setupdate input').val(),'1');});
  $('.startdate input, .startdate select').change(function(){DateChange($('.startdate input').val(),'2');});
  $('.enddate input, .enddate select').change(function(){DateChange($('.enddate input').val(),'3');});
  $('.breakdowndate input, .breakdowndate select').change(function(){DateChange($('.breakdowndate input').val(),'4');});
    

  	$(".action-btn.Submit").on('click', function() 
    {  		
     
      $('.startdate').parsley().validate()
      $('.setupdate').parsley().validate()
      $('.enddate').parsley().validate()
      $('.breakdowndate').parsley().validate()
    });

});

  
 function DateChange(processdate,datenumber){
  
   var formDate = new Date(); // Gets today's date 
  formDate = new Date(processdate);
  year = formDate.getFullYear(); 						// YYYY
  month = ("0" + (formDate.getMonth() + 1)).slice(-2);	// MM
  day = ("0" + formDate.getDate()).slice(-2);			// DD
  minDate2 = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date // YYYY
   
 
     if(datenumber =='2')//if START day changed, set variables to compare with setup date and set min dates for start, end and breakdown dates
  {
   
      	window.Parsley.addValidator('datetime2', {
    	validateString: function(value) {
      	var startdate = new Date($('.setupdate .cf-date-field-date input').val() + ($('.setupdate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.setupdate .cf-date-field-time input').val() + ' ' + $('.setupdate .cf-date-field-time select').val()));
      	var enddate = new Date($('.startdate .cf-date-field-date input').val() + ($('.startdate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val()));
      	return startdate <= enddate;
    	},
    	messages: {
      	en: 'Event START date and time cannot be before the SETUP date and time.'
    	}   
  		});
  		
      $('.startdate input').attr('data-parsley-datetime2','');
   	  $('.startdate').parsley().validate();  
    
    $('.enddate .cf-date-field-date input').attr('min',minDate2);
    $('.breakdowndate .cf-date-field-date input').attr('min',minDate2);
    
    var enddate2 = new Date($('.setupdate .cf-date-field-date input').val() + ' ' +$('.setupdate .cf-date-field-time input').val() + ' ' + $('.setupdate .cf-date-field-time select').val())
  }
   
     
   if(datenumber=='3')//if END day changed, set variables to compare with start date and set min date for breakdown dates
  {
    window.Parsley.addValidator('datetime3', {
    	validateString: function(value) {
      	var startdate = new Date($('.startdate .cf-date-field-date input').val() + ($('.startdate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val()));
      	var enddate = new Date($('.enddate .cf-date-field-date input').val() + ($('.enddate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.enddate .cf-date-field-time input').val() + ' ' + $('.enddate .cf-date-field-time select').val()));
      	return startdate <= enddate;
    	},
    	messages: {
      	en: 'Event END date and time cannot be before the STARTDATE date and time.'
    	}   
  		});
  		
      $('.enddate input').attr('data-parsley-datetime3','');
   	  $('.enddate').parsley().validate();  
      $('.breakdowndate .cf-date-field-date input').attr('min',minDate2);
  }
   
   if(datenumber=='4')//if BREAKDOWN date day changed, set variables to compare with end date
  {
    
    window.Parsley.addValidator('datetime4', {
    	validateString: function(value) {
      	var startdate = new Date($('.enddate .cf-date-field-date input').val() + ($('.enddate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.enddate .cf-date-field-time input').val() + ' ' + $('.enddate .cf-date-field-time select').val()));
        var enddate = new Date($('.breakdowndate .cf-date-field-date input').val() + ($('.breakdowndate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.breakdowndate .cf-date-field-time input').val() + ' ' + $('.breakdowndate .cf-date-field-time select').val()));
      	return startdate <= enddate;
    	},
    	messages: {
      	en: 'Event BREAKDOWN date and time cannot be before the END date and time.'
    	}   
  		});
  		
      $('.breakdowndate input').attr('data-parsley-datetime4','');
      $('.breakdowndate').parsley().validate();
        
  }

 

1 0
replied on May 25, 2017

1. You used $('.startdate').parsley().validate() which is not correct: either validate on whole form like I did, or validate on individual field one by one (date then time);

2. To resolve this issue, you can set end date default time 11:59:59 PM when validating like this:

var enddate = new Date($('.enddate .cf-date-field-date input').val() + ($('.enddate .cf-date-field-time input').val() == '' ? ' 11:59:59 PM' : ' ' +$('.enddate .cf-date-field-time input').val() + ' ' + $('.enddate .cf-date-field-time select').val()));
 

0 0
replied on May 26, 2017

Hi,

Thanks for your response.

For #1, I can't use the form validation because the form is still being filled out and fields that  the user may have not even gotten get validated to early. I made what I think are the changes to validate the date then time fields separately, first just separating the adding of the attribute then validating separately. That did not work, so I then created a separate validator for the date and another for the time, and once again I am still having the original problem. See code snip it.

Any help you can provide is appreciated.

 

     if(datenumber =='2')//if START day changed, set variables to compare with setup date and set min dates for start, end and breakdown dates
  {
   
      	window.Parsley.addValidator('datetime2', {
    	validateString: function(value) {
      	var startdate = new Date($('.setupdate .cf-date-field-date input').val() + ($('.setupdate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.setupdate .cf-date-field-time input').val() + ' ' + $('.setupdate .cf-date-field-time select').val()));
      	var enddate = new Date($('.startdate .cf-date-field-date input').val() + ($('.startdate .cf-date-field-time input').val() == '' ? '11:59:59 PM' : ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val()));
      	return startdate <= enddate;
    	},
    	messages: {
      	en: 'Event START date and time cannot be before the SETUP date and time.'
    	}   
  		});
  		
      $('.startdate .cf-date-field-date input').attr('data-parsley-datetime2','');
      $('.startdate .cf-date-field-date').parsley().validate();
    
      //$('.startdate .cf-date-field-time input').attr('data-parsley-datetime2','');
      //$('.startdate .cf-date-field-time').parsley().validate();  
    
    window.Parsley.addValidator('datetime8', {
    	validateString: function(value) {
      	var startdate = new Date($('.setupdate .cf-date-field-date input').val() + ($('.setupdate .cf-date-field-time input').val() == '' ? '' : ' ' +$('.setupdate .cf-date-field-time input').val() + ' ' + $('.setupdate .cf-date-field-time select').val()));
      	var enddate = new Date($('.startdate .cf-date-field-date input').val() + ($('.startdate .cf-date-field-time input').val() == '' ? '11:59:59 PM' : ' ' +$('.startdate .cf-date-field-time input').val() + ' ' + $('.startdate .cf-date-field-time select').val()));
      	return startdate <= enddate;
    	},
    	messages: {
      	en: 'Event START date and time cannot be before the SETUP date and time.'
    	}   
  		});
  		
      $('.startdate .cf-date-field-time input').attr('data-parsley-datetime8','');
      $('.startdate .cf-date-field-time').parsley().validate();
       
    
    $('.enddate .cf-date-field-date input').attr('min',minDate2);
    $('.breakdowndate .cf-date-field-date input').attr('min',minDate2);
  }

 

Ken

For #2, I set the default time, but the problem still exist

 

1 0
replied on June 1, 2017

Hi Rui!

 

Just checking to see if you saw my last reply on May 26th?

 

Any help is greatly appreciated.

 

Thanks!

1 0
replied on June 4, 2017

Hi Ken,

For #1, you don't need to separate adding validator on date and time, just validate them one by one. So change $('.startdate').parsley().validate() to:

  $('.startdate .cf-date-field-date input').parsley().validate();
  $('.startdate .cf-date-field-time input').parsley().validate();

For #2, you missed a blank space in the default value. It's ' 11:59:59 PM' not '11:59:59 PM'; the blank space is used for formatting.

Sorry for the late response.

0 0
replied on June 5, 2017

Hi Rui!

 

Thanks. Both problems have been resolved with the suggestions you made! I really do appreciate it.

Ken

1 0
replied on January 3, 2019

Hi Rui!

 

Long time no chat..

Hope all is well.

Along the lines of this post you helped me with a while back, I'm trying to restrict the time range in the date-time field and it looks like the event handler to switch the time when you toggle between AM and PM is missing. See the post https://answers.laserfiche.com/questions/153529/Restrict-Time-Range-in-Date-Picker

Any suggestions for working around this using Java Script?

 

Thanks

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...