Skip to main content
Nintex Community Menu Bar

Pick Monday only from Calendar control

  • April 4, 2018
  • 11 replies
  • 64 views

Forum|alt.badge.img+2

I am creating a Timesheet form and in that I have a calendar control called Week Commencing. I want users only to be able to select Mondays (start of the week) from the control. Its a SharePoint 2013 form.

Is that possible, please?

11 replies

Forum|alt.badge.img+11
  • Nintex Partner
  • April 4, 2018

You could add the following CSS at the end of the Nintex Form's Custom CSS setting:

.ui-datepicker-week-end {display:none !important;}
table.ui-datepicker-calendar > thead > tr > th:nth-of-type(3) {display:none !important;}
table.ui-datepicker-calendar > tbody > tr > td:nth-of-type(3) {display:none !important;}
table.ui-datepicker-calendar > thead > tr > th:nth-of-type(4) {display:none !important;}
table.ui-datepicker-calendar > tbody > tr > td:nth-of-type(4) {display:none !important;}
table.ui-datepicker-calendar > thead > tr > th:nth-of-type(5) {display:none !important;}
table.ui-datepicker-calendar > tbody > tr > td:nth-of-type(5) {display:none !important;}
table.ui-datepicker-calendar > thead > tr > th:nth-of-type(6) {display:none !important;}
table.ui-datepicker-calendar > tbody > tr > td:nth-of-type(6) {display:none !important;}

The first line removes the weekend days, whereas the other twins remove the Tuesday-Friday header and day value. Somehow I could not center the day values so it looked a bit nicer. Maybe you can tinker a bit more and share the outcome if successful.


Forum|alt.badge.img+14
  • Scholar
  • April 4, 2018

Forum|alt.badge.img+2
  • Author
  • April 5, 2018

Where do i add this code, please?


Forum|alt.badge.img+2
  • Author
  • April 5, 2018

That's great! However, I am not a programmer so I have no idea how to centre the day values happy.png


Forum|alt.badge.img+14
  • Scholar
  • April 5, 2018

form settings >> custom javascript


Forum|alt.badge.img+11
  • Nintex Partner
  • April 5, 2018

Centering the days would be a nice to have. But if I have some spare time, I'll look into it and let you know.


Forum|alt.badge.img+2
  • Author
  • April 5, 2018

I'm sorry for being a total novice on code, so can you please tell me what modification do i need to make in this code to display the Mondays only in the date picker. I have no other requirement like minimum or maximum dates.

I'll be grateful.


Forum|alt.badge.img+2
  • Author
  • April 5, 2018

Thanks


Forum|alt.badge.img+11
  • Nintex Partner
  • April 5, 2018

Hi Nabil,

See if the following works for you:

NWF.FormFiller.Events.RegisterAfterReady(function (){
     NWF$('#' + dateCtrl).datepicker('option',{
            beforeShowDay: function(currDate){
                   if(currDate.getDay() == 2 )
                         return [true,""];
                   return [false,""];
            }
    })
})

In the second line "dateCtrl" is the name that you specify in the date picker Control Settings under "Advanced/Client ID JavaScript variable name" (set Advanced/Store Client ID in JavaScript variable to Yes). If you use a different name, then you need to replace "dateCtrl" with the name you specified. As selecting the week day, this is specified in 4th line. 1=Sunday, 2=Monday......6=Friday, 7=Saturday.

This code goes into the form's Settings/Custom JavaScript.


Forum|alt.badge.img
  • June 27, 2019

is there a way to modify this control to have it show every other monday?


Forum|alt.badge.img+1
  • March 6, 2020

Thanks for this code jpmhuls.  It worked great for me.  One thing I did notice though the numbers seemed to differ for me as far as what day you were selecting.  0 = Sunday, 1 = Monday, 2 = Tuesday, etc...

 

Not sure if this is due to a system setting having Sunday as the first day or maybe even a date field setting.  Just something to consider.