Setting current date and time on control

  • 14 May 2015
  • 8 replies
  • 322 views

Badge +2

Hi,

I'm trying to pre-fill the date & time for a date/time control on my form by using a button on my form. I don't want to use a default column value and I want the user to be able to pre-fill the field on a per-case basis.

What I've done so far is:

  1. Created a button on the form, with the action of 'JavaScript'

    Form Date.png

  2. Given the date/time control a Client ID
    dateTime Control.png
  3. Created the following function within the 'Custom JavaScript' section in Form Settings:

function setDateTime()

{

var fullDate = new Date()

var twoDigitMonth = ("0" + (fullDate.getMonth() + 1)).slice(-2)

var hours = fullDate.getHours();

var minutes = fullDate.getMinutes();

var currentDate = fullDate.getDate() + "/" + twoDigitMonth + "/" + fullDate.getFullYear();

if (hours   < 10) { hours   = "0" + hours;   }

/** Round down to the nearest 5 minutes. This is due to us rounding the minutes but not the hours. For example, 09:58 could be rounded up to 09:60 (invalid). Instead, 09:58 becomes 09:55.

**/

minutes = minutes - 2.5;

minutes = 5 * Math.round( minutes / 5 );

// Set the date field

NWF$('#' + fldDateClosed).val(currentDate);

// Set the time (hours + minutes) fields

NWF$('#' + fldDateClosed + ' + IMG + SELECT').val(hours);

NWF$('#' + fldDateClosed + ' + IMG + SELECT + SELECT').val(minutes);

// Set Incident Status

NWF$('#' + fldStatus).val('Completed');

}


Upon previewing, and clicking the 'Now' button on the form, it fills the input with the following:

Date Time on Form.png

Does anyone have any ideas as to how I can modify the hours and minutes on the form?

Thanks happy.png


8 replies

Userlevel 6
Badge +16

It 's a jquery challenge...

Here is a sample to set time to 10 AM : 45

NWF$('#' + fldDate + " + IMG + SELECT").val('10 AM');

NWF$('#' + fldDate + " + IMG + SELECT + SELECT").val('45');

Badge +2

Cheers, I've managed to get this working with the following script:

function setDateTime()

{

var fullDate = new Date()

var twoDigitMonth = ("0" + (fullDate.getMonth() + 1)).slice(-2)

var hours = fullDate.getHours();

var minutes = fullDate.getMinutes();

var currentDate = fullDate.getDate() + "/" + twoDigitMonth + "/" + fullDate.getFullYear();

if (hours   < 10) { hours   = "0" + hours;   }

/** Round down to the nearest 5 minutes. This is due to us rounding the minutes but not the hours. For example, 09:58 could be rounded up to 09:60 (invalid). Instead, 09:58 becomes 09:55.

**/

minutes = minutes - 2.5;

minutes = 5 * Math.round( minutes / 5 );

// Set the date field

NWF$('#' + fldDateClosed).val(currentDate);

// Set the time (hours + minutes) fields

NWF$('#' + fldDateClosed + ' + IMG + SELECT').val(hours);

NWF$('#' + fldDateClosed + ' + IMG + SELECT + SELECT').val(minutes);

// Set Incident Status

NWF$('#' + fldStatus).val('Completed');

}

Badge +7

That looks good. I came up with a slightly different version:

// Client ID JavaScript variable name: varTimeStamp
NWF$(document).ready(function(){
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); 
});

BTW: How do you make your code appear with line numbers and so on in here?

Regards

Leif

Badge +6

What if I want the default to be empty? My date control for my start and end date/time columns are configured to "none" in SharePoint, but show up on the form as "todays" date when I create a new item on my calendar list.

Badge

Not sure if it's too late to ask - how do I make the date control read only? I tried using the Enabled field to "No" but then the button doesn't update the value in the date picker.

 

Thanks!

Badge +6

I would use an expression and set permissions on the control. I do this all the time.

197895_pastedImage_2.png

Badge +7

I realize this is a very old thread, and Leif Frederiksen‌, you've probably already figured out the answer to your question about applying line numbers to code on here, but in case anyone else comes across this, I thought I'd share the answer for others.

In the ribbon of formatting options, click the More dropdown and select Syntax Highlighter.

215217_pastedImage_1.png 

That will open up a window where you can paste your code and select the language:

215222_pastedImage_3.png

Badge +3

I feel my question is related, but due to the lack of experience with JavaScript, I will ask this again:

I've got a date field (let's call it "Date Signed") that needs to be set to today's date when the client hits the OK (Save and Submit) button ONLY IF:

- he picked Decision=0 (i.e., Approved)

- he is the var_User (i.e., Current User = var_User).

Otherwise, if the client picked Decision=1 (i.e., Rejected), Date Signed must remain null and be saved as null when the client hits the OK  button.

I am planning to hide the date, but I need to capture the date of the approval from the form (can't do it from workflow). I know how to hide the date based on who the current user is, but I don't know how to input the date both based on who the user is and user value on the form, and then save it when you hit OK. 

Please explain in pictures and very detailed wording, because I don't know coding.

216980_pastedImage_1.png

Reply