Pick Monday only from Calendar control


Badge +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

Userlevel 2
Badge +11

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.

Userlevel 5
Badge +14

or you may want to look on this

https://community.nintex.com/message/77011-re-adding-options-in-choice-fields-dynamically-in-nintex-forms-2013?commentID… 

Badge +2

Where do i add this code, please?

Badge +2

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

Userlevel 5
Badge +14

form settings >> custom javascript

Userlevel 2
Badge +11

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.

Badge +2

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.

Badge +2

Thanks

Userlevel 2
Badge +11

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.

Badge

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

Badge +1

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.

Reply