Setting time portion of date time control

  • 3 March 2015
  • 9 replies
  • 40 views

Badge +3

We're trying to set the default hour and minute values for some date/time controls on a Nintex form. We don't want to set the date portion of the control or we'd just use the SharePoint column default value option or the JavaScript variable option in the Nintex form settings.

54966_pastedImage_0.png

 

Temporary Workaround
Use the correct ID sets for the mode the form is in. The IDs can be different for the same field when the form is in New/Edit/Display. Thanks to Chit and this post for the idea about testing form mode: How can I get the form mode (New, Edit, Display) using jquery (NFW$)?

 

var isNewMode = document.location.pathname.indexOf("/NewForm.aspx") > -1; var isEditMode = document.location.pathname.indexOf("/EditForm.aspx") > -1;  if (isNewMode) {   /*set time values*/ var PreTrialHour = 1 + " " + "PM"; var PreTrialMinute ="30";  /*populate the time fields*/                        document.getElementById('ctl00_ctl43_g_55233958_e3e3_4fc0_8fd8_8cf8652d8648_ctl00_ListForm2_formFiller_FormView_ctl86_DateHours').value=PreTrialHour;   document.getElementById('ctl00_ctl43_g_55233958_e3e3_4fc0_8fd8_8cf8652d8648_ctl00_ListForm2_formFiller_FormView_ctl86_DateMinutes').value=PreTrialMinute;    }  if (isEditMode) {   /*set time values*/ var PreTrialHour = 1 + " " + "PM"; var PreTrialMinute ="30";  /*populate the time fields*/                        document.getElementById('ctl00_ctl43_g_4c336315_ff71_484c_844e_96f33d3e5580_ctl00_ListForm2_formFiller_FormView_ctl86_DateHours').value=PreTrialHour;   document.getElementById('ctl00_ctl43_g_4c336315_ff71_484c_844e_96f33d3e5580_ctl00_ListForm2_formFiller_FormView_ctl86_DateMinutes').value=PreTrialMinute;   }

 

 

Anyone have a better way to set the hour and minute fields that doesn't rely on the ID value of the individual fields which can change over time?


9 replies

Badge +6

Steven,

In the form date/time control settings, you should be able to Store the ClientID in a javascript variable and use that variable to manipulate via your code rather than using the Element ID's.

Cheers,

Mark

Badge +3

Hi Mark,

Thanks for the suggestion. We know about the JavaScript variable option. We would use it for any other control, but we're unsure how we could use it to set only the hour and minute fields of the date/time control using the variable for the entire control. We want to leave the date portion blank for the user to choose.

See the updated post above which shows a temporary workaround. We'd still like to find something more permanent than using the IDs for the fields though, since they'll change over time if the form is modified.

Badge +6

Steve,

Another, less glamorous option would be to have the date fields on the form present as date only fields and add two separate fields for hour and time. you could have these set for a drop-down choice list with pre-populated values (I assume there would not be a huge call for individual minute granularity).

Once the form is submitted you could use a workflow Calculate Date control to combine the original Date and the the two hour/minutes field values.

However, you would first need to extract these hour/minute values out of the Formdata Item property xml and populate into variables (and convert to relevant numbers).

Like I said - less glamorous, but should work!

Regards,

Mark

Badge +3

Thanks Mark for the reply. Looks like Jeremy offered the most elegant solution wink.png

He knew how to access the fields within the date/time control - something I wasn't familiar with.

Thanks everyone!

Badge +3

Thanks so much Jeremy! Just what we were trying to do.

Badge +7

Hi Jeremy,

I have a problem with your suggested solution: It only works every 5 minutes. If the current time is for example 10:07 PM, the "07" is not a legal value according to the minute dropdown's possible values.

How to get around this?

Regards

Leif

Badge +2

Hi Leif,

You'd need to round to the nearest 5 minutes, I documented this on a question I posted a while ago​. It's not perfect but for the most part it works ok for me. Hopefully it's of use to you.

Cheers,

Ben

Badge +1

My start date field should start at the current day at 8:30 PM. The end date should end the following day at 8 AM.

The predetermined times are working perfectly, but I'm not sure about how I would have the end time set for the current day + 1.

Badge +7

Hi,

Maybe this code snippet is useful - I use it to set the date and time to "now":

// Client ID JavaScript variable name: varTimeStamp

NWF$(document).ready(function(){

    if ({Common:IsNewMode}) {

        var fldTimeStamp = NWF$("#" + varTimeStamp);

        var hourElement = fldTimeStamp.parent().find("select[id*='DateHours']");

        var minuteElement = fldTimeStamp.parent().find("select[id*='DateMinutes']");

        var date = new Date();

        var hours = date.getHours();

        // AMPM format?

        var firstOption = hourElement[0].options[0].innerHTML;

        if (firstOption == "12 AM") {

            var suffix = (hours < 12) ? 'AM' : 'PM';

            hours = (hours % 12 || 12) + " "+ suffix;

        }

        var minutes = date.getMinutes();

        var roundedMinutes = 5*(Math.floor(Math.abs(minutes/5)));

        hours =  ("00" + hours).substr(-2,2);

        roundedMinutes = ("00" + roundedMinutes).substr(-2,2);

        hourElement.val(hours);

        minuteElement.val(roundedMinutes);

    }

});

Regards

Leif

Reply