hotwheelzffx
Design Dabbler

Service Calendar Scheduler - Limit Date Picker based on Choice

Jump to solution

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. 

0 Kudos
Reply
5 Replies
hotwheelzffx
Design Dabbler

Re: Service Calendar Scheduler - Limit Date Picker based on Choice

Jump to solution

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;
 
         }
    });

View solution in original post

0 Kudos
Reply
Unkindled_One
Canvas Initiate

Re: Service Calendar Scheduler - Limit Date Picker based on Choice

Jump to solution

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?

0 Kudos
Reply
hotwheelzffx
Design Dabbler

Re: Service Calendar Scheduler - Limit Date Picker based on Choice

Jump to solution

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.

0 Kudos
Reply
Unkindled_One
Canvas Initiate

Re: Service Calendar Scheduler - Limit Date Picker based on Choice

Jump to solution

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

0 Kudos
Reply
hotwheelzffx
Design Dabbler

Re: Service Calendar Scheduler - Limit Date Picker based on Choice

Jump to solution

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()

 

 

0 Kudos
Reply