Time Picker: Can I Limit the Time Range?

[furstlars]

Does anyone know if it's possible to limit the time range to, say 7am- 7pm, in a date/time picker?

[jpmhuls]

See if one of the following links is helpful:

• https://community.nintex.com/message/70950-how-to-limit-date-picker-range
• https://community.nintex.com/message/77803-re-year-range-issue-with-date-picker-control-on-nintex-fo...
• https://community.nintex.com/message/78570-re-pick-monday-only-from-calendar-control?commentID=78570...

[chaddavis · Accepted solution]

Update:

I figured out what I was missing in my regex to exclude the '11 AM' option. By including a '^' before the first grouping, it says the group must start at the beginning of the string. Ergo, if it matches '1 AM', there cannot be anything before it, which means '11 AM' is no longer a match.

I've updated the code blocks below to reflect the new code and have stricken out the portions of text that are no longer valid.

---

Since you're looking to limit the times instead of the days, you could try the following JavaScript code that I've used in the past.

7 AM - 5 PM:

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

Disclaimer: It's not pretty....but regex rarely is.

**And if anyone is better at regex so the 11 AM doesn't have to be called out separately, please let me know.

This one specifically removes everything outside of the 7 AM - 5 PM window, but the regex can be changed to allow different time frames. 

Here's a link to RegEx Tester for the string above. You should be able to use it to test changes for different times.

This RegEx Tester code does not include the newly added '^' before the first grouping. RegEx Tester doesn't treat separate lines as new strings.

7 AM - 7 PM:

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

I just change the ^(([1-6]|12) AM)|(([6-9]|1[0-1]) PM) to ^(([1-6]|12) AM)|(([8-9]|1[0-1]) PM) and it works for your 7 AM - 7 PM window.

Explanation of Code:

• The first line is checking for all <select> elements on the form with a name that ends with 'Hours' and grabs each of its <option> elements.
• The second line is an if statement that tests the value (.val()) of each <option> element for two things:
  • The first test is a regex match (.match(/^(([1-6]|12) AM)|(([8-9]|1[0-1]) PM)/g)) for:
    • {Start of String}((any number between 1-6 OR equal to 12) AND is followed by ' AM')
    • OR (any number between 8-11 (in the updated example above) AND followed by ' PM')
      • This one is a bit confusing, but with regex you can't just say 'match numbers 8 through 11'.
      • You have to say 'match numbers 8 through 9 OR 1 followed by 0 through 1' (i.e. 10 or 11), which equates to 8 through 11.
  • The second test is to confirm the value is not equal to '11 AM' (.val()!='11 AM').
    • I had to add this because the regex was catching the '1 AM' portion of '11 AM' and excluding it.
      • **If you know how to fix this in the regex, please let me know.**
• And lastly, the third line removes the <option> element from the hour <select> dropdown if the previous two tests are true.

[emha]

this might help as wel - https://community.nintex.com/message/75989-re-set-minutes-in-date-picker?commentID=75989#comment-759... 

it's an example for minutes, but for hours it'd be very similar.

[bimi82]

Hello Dave

I am trying to implement the hour format to limit only from 10 until 14 as 24hrs time format!

However, when adding your code, it then breaks the datepicker and does not work.

Can you advise please?

NWF.FormFiller.Events.RegisterAfterReady(function (){
   NWF$('#' + dateCtrl).datepicker('option',{
  minDate: 0,  
  maxDate: '(currDate.getDay() + 35)',  
  beforeShowDay: NWF$.datepicker.noWeekends,  
  onSelect: function(datestr){  
  startdate =  NWF$(this).datepicker('getDate');  
 }});  
});
 
 
NWF$("select[name$='Hours'] option").each(function(){
   if(NWF$(this).val().match(/^(([10-14])/g) ) {
     NWF$(this).remove();
   }
 });

am I missing sme kind of }) or something?