Service Calendar Scheduler - Limit Date Picker based on Choice

  • 25 March 2019
  • 5 replies
  • 2 views

Badge +1

I am trying to create a Service Request Scheduler. I would like to Limit the Date Picker based on Service Drop-Down. 

 

For example; If I only do Oil Changes on Monday. When the user selects Oil Change from the Service type field, I only want Mondays to be selectable in the Date Picker. If a user selects Brake Repair, I only want Tuesday - Thursday selectable. Additionally, I need to limit the hours selectable to between 10am and 4pm, in 1 hour increments. 


5 replies

Badge +1

More or less figured it out. Here's the form script based on other work found in the forums.

The first part limits the hours in the time picker and the other functions limit the dates selectable in 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();
     }
});
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;
 
         }
    });
Badge +2

Hey @hotwheelzffx , I got a form very similar to what you have.  I can't get your code to work.  I'm using Nintex Forms 2013 Version 2.11.9.0.  Is that you complete code or is it messing additional code?

Badge +1

You might just be missing an extra '}):'

at the end of the code.

Make sure your form fields have JavaScript Client IDs filled out and matching your code.

Badge +2

Yup, I noticed that and added the missing });, but no luck.

Badge +1

I re-created this app from scratch. The only differences between what I originally posted was the missing }); and maybe killing the space after "function" NWF.FormFiller.Events.RegisterAfterReady(function()

 

 

Reply