Date picker on Service Portal - sideBySide

[Alex Macdonel]

On the Service Portal the date time picker is very nice but our users have told us that when they use the arrows to increase the hours they sometimes don't notice that the date changed and this causes problems.

The Options - Bootstrap 3 Datepicker   tell me we can show both date and times side by side but now the question is, how can I enable this behavior in the Portal?

[Shahed Shah1]

Doh! I should read the question properly. Looks like you got the looks, but expect a certain behaviour of the picker. Am I right?

Can you expand on the actual issue? Is it just that when they change the hours and hit midnight that the date changes? What behaviour do you want to happen?

Thanks

EDIT: Posing additional questions to make sense of the desired behaviour.

[Alex Macdonel]

Hi Shahid,

What is currently happening is that when users interact with the default widget they only see the date OR the time, when modifying the time if they go from 23:00 to 00:00 the date jumps to the next day. Users are not noticing the date change and submit their request. I can't train my users on how to use this tool so I've thought of two ways to deal with it:

1) If time goes from 23 to 00 don't change the date

2) Display the side by side widget so that when the date changes, it is a bit more evident that the date changed.

I opened a ticket with SN Support to determine if the default behaviour of their widgets could be changed and the answer was no.

What you provide here is a mixture of what I want, in your widget I see both time and date (side by side) and when changing the time from 23 to 00 the date doesn't change. The question now is, how can I use your widget to control the date/time picker on a regular catalog item?

Cheers!

[Shahed Shah1]

To be honest, I would've expected that answer from Support, because the widgets offered are locked down. But there's nothing to stop you from cloning that widget and putting together your own (or modifying the existing) sc-cat-item page. The trick is to iterate through the DOM or use IDs to identify the Date/Time variables and then placing similar code at the bottom of that widget.

[Community Alums]

Hi Shahid,

This matches my requirement thank you!

but where did you place this widget? did you use it as variable or embedded in 'FORM' widget?

Thanks,

Kirti

[Shahed Shah1]

Hi Kirti

This just a normal Service Portal widget, which I then place on a page that I created as a playground for any widget that I develop.

If you're just changing the picker behaviour of an existing widget, then it may just be the case of adding that statement at the bottom of the widget's HTML Template. Keep in mind that you would need to update the DOM reference, so $('#datetimepicker1') would need to be changed to the identified reference(s).

I don't think you can modify the FORM widget as that is another locked down one. Then there's the case of understanding how the fields are brought back and rendered. If only there was an option to put into the schema to change the behaviour of the datetimepicker. I sense an enhancement request here .

Regards

Shahid