Is it possble to remove the time from the date picker?

Adam_Morris

In Microsoft's portal, for Date prompts in Request Offerings, only the date is available for selection. I'd like to mimic this in the Cireson portal. Is it possible to remove the ability to select a time?

Eric_Krasner

Good question

merlenette_jones

Adam_Morris said:

In Microsoft's portal, for Date prompts in Request Offerings, only the date is available for selection. I'd like to mimic this in the Cireson portal. Is it possible to remove the ability to select a time?

Hello,

Would you be able to provide a screen shot of the area in question?

Eric_Krasner

I believe Adam is referring to tg the time portion of the date picker

Adam_Morris

That is correct Eric.

I'd like to either change it to display 30 minute increments or remove the time completely and then use a simple list to have the user select a time.

Tom_Hendricks

In your custom.js:

var datePickers = $('input[data-control="dateTimePicker"]').data('kendoDateTimePicker');
if (datePickers.length > 0) {
	datePickers.options.interval = 30;
}

Eric_Krasner

What would be the code to just remove the time portion altogether. 

Tom_Hendricks

That is even easier.  Just change the type of field in your form JSON (if you have a custom form already.  Otherwise, copy one, such as ChangeRequest.js from /Scripts/Templates/Forms into your customspace).

Example:

{ DataType: "DateTime", PropertyDisplayName: "ScheduledStartDate", PropertyName: "ScheduledStartDate", Required: true }

Becomes

{ DataType: "Date", PropertyDisplayName: "ScheduledStartDate", PropertyName: "ScheduledStartDate", Required: true }

Remember that your fields are still holding a time of 00:00 (midnight) in the database unless you change the property in your ticket class, however.

Adam_Morris

I'm sorry Tom but I'm not quite following you. This solution looks like it would work for an Incident or Service Request form, but how would I go about removing the time for date pickers on a Request Offering?

Tom_Hendricks

I have a habit of commenting between meetings, when I do not have time to give all the details or read a bit too quickly...

It is possible to configure the control not to display the time, but it will save a time equivalent to 00:00 if one is not specified.  This means midnight, in the time zone you are in, which will convert to a different time for different time zones.

This is because the MP property is datetime.  You would have to modify your ticket class (or class extension, if it is a custom property) to change the property accordingly.  It cannot be done in the portal.

If you are OK with sending over 00:00 as the time but not showing it to the user:

var datePickers = $('input[data-control="dateTimePicker"]').data('kendoDateTimePicker');
if (datePickers.length > 0) {
	datePickers.options.format = 'm/d/yyyy';
}

Ryan_Kennedy

Tom_Hendricks said:

I have a habit of commenting between meetings, when I do not have time to give all the details or read a bit too quickly...

It is possible to configure the control not to display the time, but it will save a time equivalent to 00:00 if one is not specified.  This means midnight, in the time zone you are in, which will convert to a different time for different time zones.

This is because the MP property is datetime.  You would have to modify your ticket class (or class extension, if it is a custom property) to change the property accordingly.  It cannot be done in the portal.

If you are OK with sending over 00:00 as the time but not showing it to the user:

var datePickers = $('input[data-control="dateTimePicker"]').data('kendoDateTimePicker');
if (datePickers.length > 0) {
	datePickers.options.format = 'm/d/yyyy';
}

Hey @Tom_Hendricks - this doesn't seem to be working in version 7.4 or 8.2 of the portal.
datePickers.length comes back as undefined ..
But datePickers does pickup the dateTimePicker as an object and I can do other stuff within the object such as: datePickers.timeView.options.interval = 30;
and that works but : datePickers.options.format = 'm/d/yyyy';
does not make the datetime display only the date, it doesn't seem to do anything.

Any help would be great.

Thanks

john_doyle

This code in the custom.js file will cause the time pickers to display 15 minute intervals. It should affect them all.

$(document).ready(function() {<br>&nbsp;&nbsp;&nbsp; $('body').on("click",".k-i-clock",function(){$(this).closest(".k-picker-wrap").find("input[data-control='dateTimePicker']").data('kendoDateTimePicker').setOptions({"interval":15});});<br>});

If end users really need to specify a more accurate time, they can always type the precise time into the control.

Ryan_Kennedy

Thanks John. That's not the issue I am having though. I am wanting to remove the Time from the datetime picker. So instead of it showing 01/12/2017 12:00 AM it just shows 01/12/2017

I was saying that Toms example above of :

var datePickers = $('input[data-control="dateTimePicker"]').data('kendoDateTimePicker');
if (datePickers.length > 0) {
	datePickers.options.format = 'm/d/yyyy';
}

is not working. But using datePickers = $('input[data-control="dateTimePicker"]').data('kendoDateTimePicker'); I am able to do other customisation of the datetimepicker like the time interval, but am unable to hide the time all together.

Tom_Hendricks

The above code did work for me to mask the time from users, on portal 8.1 (have not looked at it again recently on 8.2), so clearly there is something different about our environments.  That would not be at all surprising, if true.

However, remember that the datetimepicker includes time.  You may be able to mask the time from the form, as the user sees it, but the underlying value will still contain a time of "00:00" which will likely display as "12:00 AM".

It is likely that the property you are mapping to, in SCSM, is a datetime property, which means if you send it "12/1/2017" it will store as "12/1/2017 00:00" and display as such when retrieved (but probably also adjusted by your UTC offset).  For example, see the type column for the various date properties of Work Item:

PS C:\> $class = Get-ScsmClass -ComputerName $mgtServer -Name System.WorkItem$<br>PS C:\> $class.GetProperties()<br><br>Name                       Key   Required AutoIncrement Type     DisplayName<br>----                       ---   -------- ------------- ----     -----------<br>Id                         True  False    True          string   ID<br>Title                      False False    False         string   Title<br>Description                False False    False         string   Description<br>ContactMethod              False False    False         string   Alternate contact method<br>CreatedDate                False False    False         datetime Created date<br>ScheduledStartDate         False False    False         datetime Scheduled start date<br>ScheduledEndDate           False False    False         datetime Scheduled end date<br>ActualStartDate            False False    False         datetime Actual start date<br>ActualEndDate              False False    False         datetime Actual end date<br>IsDowntime                 False False    False         bool     Is Downtime<br>IsParent                   False False    False         bool     Is parent<br>ScheduledDowntimeStartDate False False    False         datetime Scheduled Downtime Start Date<br>ScheduledDowntimeEndDate   False False    False         datetime Scheduled Downtime End Date<br>ActualDowntimeStartDate    False False    False         datetime Actual Downtime Start Date<br>ActualDowntimeEndDate      False False    False         datetime Actual Downtime End Date<br>RequiredBy                 False False    False         datetime Required By<br>PlannedCost                False False    False         double   Planned Cost<br>ActualCost                 False False    False         double   Actual Cost<br>PlannedWork                False False    False         double   Planned Work Hours<br>ActualWork                 False False    False         double   Actual Work Hours<br>UserInput                  False False    False         string   User Input<br>FirstAssignedDate          False False    False         datetime First assigned date<br>FirstResponseDate          False False    False         datetime First response date

john_doyle

Hi @Adam_Morris

I have added a new tag to the Request Offering toolbox which allows you more control over the Date and Time pickers on Request Offering forms.