Filtering and Limiting Date Pickers on Nintex Forms

Had a project to create a service scheduling list. Certain services are only available during specific hours and specific days. The trick was to filter the date picker in relation to the service selected via Nintex javascript.

All of the code below goes into the Custom Javascript section of your form.

This first bit of code filters the available hours from the time part of the date picker.

NWF$("select[name$='Hours'] option").each(function(){
     if(NWF$(this).val().match(/^(([1-9]|12) AM)|(([5-9]|1[0-1]) PM)/g)) {
          NWF$(this).remove();
     }
});

The rest of the code filters the date picker days based on the service selected.

NWF.FormFiller.Events.RegisterAfterReady(function () {  
    NWF$('#' + Service).change(function(evt){
        switch(evt.target.value){
            case 'Oil Change' :
            NWF$('#' + dateCtrl).datepicker('option',{
            beforeShowDay: function(currDate){
                   if(currDate.getDay() == 1 )
                         return [true,""];
                   return [false,""];
     }
     })
                break;
 
         }
    });
    NWF$('#' + Service).change(function(evt){
        switch(evt.target.value){
            case 'Brake Repair' :
            NWF$('#' + dateCtrl).datepicker('option',{
            beforeShowDay: function(currDate){
                   if(currDate.getDay() == 5 )
                         return [true,""];
                   return [false,""];
     }
     })
                break;
 
         }
    });
 
    NWF$('#' + Service).change(function(evt){
        switch(evt.target.value){
            case 'Tire Repair' :
            NWF$('#' + dateCtrl).datepicker('option',{
            beforeShowDay: function(currDate){
                   if(currDate.getDay() == 2 || currDate.getDay() == 3 || currDate.getDay() == 4 )
                         return [true,""];
                   return [false,""];
     }
     })
                break;
 
         }
    });
});

Enforce Unique Values was also enabled on the Appointment Time to restrict duplicate appointments.