Estimation & Payment Forms - Date validation

[scotbaston]

Hi,

I have 2 dates on the Cost Estimation & Payment Form plugin, arrival date & departure date

Can you let me know how to validate that the end date is not before the start date?

I’ll add link details below

Thanks you

[lely]

Hi Scot,

The validation is done using CUSTOM JS
When you install the plugin, there are sample forms. Hotel Room reservations. Under General Tab > Custom JS, you can see sample validation of the date. Please use it as guide.

jQuery(document).ready(function(){
  setTimeout(function(){
    var day = moment.utc(jQuery('[data-itemid="220"]').datetimepicker('getDate')).format('YYYY-MM-DD');
    var newDay = moment(day).add(1, 'day');
      	jQuery('[data-itemid="220"]').datetimepicker('setDate',newDay.toDate());
   	 jQuery('[data-itemid="222"]').val(1).trigger('focusout');
  },250);
	jQuery('[data-itemid="219"]').on('changeDay', function (ev) {
      var day = moment.utc(ev.date).format('YYYY-MM-DD');
      var day2 = moment.utc(jQuery('[data-itemid="220"]').datetimepicker('getDate')).format('YYYY-MM-DD');
      if(day2 <= day){
        var newDay = moment(day).add(1, 'day');
      	jQuery('[data-itemid="220"]').datetimepicker('setDate',newDay.toDate());
      }
    });
  jQuery('[data-itemid="220"]').on('changeDay', function (ev) {
      var day2 = moment.utc(ev.date).format('YYYY-MM-DD');
      var day = moment.utc(jQuery('[data-itemid="219"]').datetimepicker('getDate')).format('YYYY-MM-DD');
      if(day2 <= day){
        var newDay = moment(day2).subtract(1, 'day');
        var now = moment.utc(new Date());
        if(newDay.format('YYYY-MM-DD') >= now.format('YYYY-MM-DD')){
      	jQuery('[data-itemid="219"]').datetimepicker('setDate',newDay.toDate());
        } else {
      	jQuery('[data-itemid="219"]').datetimepicker('setDate',now.toDate());
          newDay = moment(now).add(1, 'day');
  setTimeout(function(){
      	jQuery('[data-itemid="220"]').datetimepicker('setDate',newDay.toDate());
  },200);
        }
      }
    });
});

You just need to change the variables.

[scotbaston]

I have changed the IDs and removed the below ( my form doesn’t have a ‘how many days’ entry)

@Lely

jQuery(’[data-itemid=“222”]’).val(1).trigger(‘focusout’);

It seems to work!

Thank you

[ruenel]

You’re welcome!
We’re glad @Lely’s solution works out for you.