[cosyxu]

Good morning,


In my form there are two fields: "Daytime" and "Textbox", I would like to validation if booking time > current time +48 hours.

For example, if today is 27/10/17 8am, and an user select 28/10/17 8am which is within 48 hours, then it will return false and stop user to select this date and time.

I know the datetime field can also select time but many of my users think it's better to have a separate textbox to enter time.

Any ideas or example to achieve this validation?

I'm using web-entry form, so only js may work.


Thanks in advance, please see my attached screen shot.

Yuan

Capture.PNG (5.19 KiB) Viewed 4147 times

[cosyxu]

Or instead of validation, is it possible to disable the date and time in the datetime picker which are set to after 48 hours ?

Just like to use trigger to set min and max date for a datetime picker in a trigger before dynaform, however I am using web-entry form, and I was wondering how to disable the date before current date plus 48 hours in javascript. (just make the calendar can't be selected ).

And is it possible to disable weekends?

Many thanks,
Yuan

[cosyxu]

After I have check this link,
http://eonasdan.github.io/bootstrap-dat ... om-formats

the solution I'm using is to use the custom html code to replace a label in dynaform, but I was wondering how to apply this js code to my datetime control "startDate". I have tried but it didn't work.

Code: Select all

var label_1 = '<div class="container">'
              + '<div class="col-sm-6" style="height:130px;">'
              + '<div class="form-group">'
              + '<div class="input-group date" id="label_1">'   
              + '<input type="text" class="form-control" />'     
              + '<span class="input-group-addon">'
              + '<span class="glyphicon glyphicon-calendar">'
              + '</span></span>'
              + '</div></div></div>';

$("#label_1").replaceWith(label_1);

$(document).ready(function() {

    var today = new Date();
    if ( (today.getDay() == 5) || (today.getDay() == 4) ){
        today.setHours(today.getHours() + 96);
    } 

    else{
        today.setHours(today.getHours() + 48);
    }
   
   moment(today).format("dddd, DD MMM YYYY, h:mm A");
   $('#label_1').datetimepicker({
                daysOfWeekDisabled: [0, 6],
                minDate: moment(today).format("dddd, DD MMM YYYY, h:mm A")
            });
    


});

Any ideas?

Many thanks,
Yuan

[amosbatto]

You can set the minimum date with a trigger, which is explained on the wiki, but if you are doing this with web entry so only JavaScript is available, then I don't know how to dynamically set the properties of the date picker.

However, you can use form.setOnSubmit() to validate the selected date and time. First create a DynaForm like this one:

SelectDueDateInDesigner.png (27.62 KiB) Viewed 4096 times

Add this JavaScript to the form to validate the selected date and time:

Code: Select all

var formId = $("form").prop("id");
getFormById(formId).setOnSubmit( function() { 
  var dueDate = $("#dueDate").getValue()
  var dueTime = $("#dueTime").getValue()
  
  if (dueDate == '') {
    alert("Please select a Due Date.")
    return false;
  }
  if (dueTime == '') {
    alert("Please select a Due Time.")
    return false;
  }
  
  //strip time from dueDate:
  dueDate = dueDate.replace(/ \d\d:\d\d:\d\d/, '') +' '+ dueTime;
  var oDueDate = moment(dueDate);
  var oTwoDays = moment().add(2, 'days');
  
  if (oDueDate.isBefore(oTwoDays)) {
    alert("Due Date "+dueDate+" must be at least two days later from now");
    return false;
  }
  
  if (oDueDate.day() == 0 || oDueDate.day() == 6 || oDueDate.day() == 7) {
    alert("Due Date "+dueDate+" cannot be on a weekend.");
    return false;
  }
});

When values are entered in the form:

SelectDueDateValuesInForm.png (10.83 KiB) Viewed 4096 times

And the form is submitted, it will display an alert if less than 48 hours from now:

SelectDueDateTooSoonAlert.png (34.91 KiB) Viewed 4096 times

And it will also display a alert if the Due Date and Time occurs on a weekend:

SelectDueDateOnWeekendAlert.png (24.59 KiB) Viewed 4096 times

Here is a sample DynaForm showing how to use this code:

Select Due Date.json

(3.51 KiB) Downloaded 285 times

[cosyxu]

Hi amosbatto,

Thank you for your reply.

Regards,
Yuan