Options for the Date/Time Picker

Chris_Keander

I would love to see options for the Date/Time picker controls so you can have 5/15/30 minute increments instead of every minute.  Unless you're typing in a time directly, scrolling through all the available time slots can be a lengthy process.

Billy_Wilson

Absolutely! Great suggestion.

[Deleted User]

Agreed, this has been on my hit list as well!  

Geoff_Ross

Me too. And to be able to have just a date, or just a time prompt.

Josh_Crew

Yes, the Date/Time UI is clunky

Suleyman_Ozden

Geoff_Ross said:

Me too. And to be able to have just a date, or just a time prompt.

Agree. They should be seperate. We are considering removing offerings with the current date/time options.

Candice_Yeudall

Suleyman_Ozden said:

Geoff_Ross said:

Me too. And to be able to have just a date, or just a time prompt.

Agree. They should be seperate. We are considering removing offerings with the current date/time options.

Yep need date and time to be their own fields

Tom_Hendricks

Voted up.  Absolutely fantastic suggestion.  Here is a quick fix for your custom.js, however (there seems to be more needed to fix the date pickers in Activities):

$('input[data-control="dateTimePicker"]').kendoDateTimePicker({ interval: 15 });

Also, you can add controls for just dates in your form JSON:

{ DataType: "Date", PropertyDisplayName: "YourLabel", PropertyName: "YourDateProperty" },

Aaron_Smith

Where in the custom.js should $('input[data-control="dateTimePicker"]').kendoDateTimePicker({ interval: 15 }); this be placed?

Tom_Hendricks

Either inside of this:

}$(document).ready(function() {<br>&nbsp;&nbsp;&nbsp; <code>$('input[data-control="dateTimePicker"]').kendoDateTimePicker({ interval: 15 });

or this (substitute ChangeRequest for other form types, if you like):

    });
});app.custom.formTasks.add('ChangeRequest',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{<br>&nbsp;&nbsp;&nbsp; formObj.boundReady(function&nbsp;()&nbsp;{<br><pre><code>        $('input[data-control="dateTimePicker"]').kendoDateTimePicker({ interval: 15 <span>});</span>

Adam_Morris

Is there a way to get this to work within Request Offerings?

Tom_Hendricks

The first example works if it occurs after the form has loaded (can be wrapped in a mutation observer like most of the recent custom code examples on the forum are).

However, it seems I was a bit lazy in copying these lines of code.  There is a better way of writing this:

$('input[data-control="dateTimePicker"]').data('kendoDateTimePicker').options.interval = 15;

Verified to work on the RO form.

Ryan_Kennedy

Is there a way with custom.js to only allow a certain range of times to be selected? For example, only showing times between 9am and 5pm?

Josh_Crew

Take a look at these references:

http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker
http://demos.telerik.com/kendo-ui/datetimepicker/index

Alex_Marsh

Tom_Hendricks said:

The first example works if it occurs after the form has loaded (can be wrapped in a mutation observer like most of the recent custom code examples on the forum are).

However, it seems I was a bit lazy in copying these lines of code.  There is a better way of writing this:

$('input[data-control="dateTimePicker"]').data('kendoDateTimePicker').options.interval = 15;

Verified to work on the RO form.

Can't seem to get this to work, the original option you set seems to work fine

Tom_Hendricks

Which version of the portal are you running?

Alex_Marsh

Tom_Hendricks said:

Which version of the portal are you running?

Latest version (8.1.2.2016)

Alex_Marsh

Also have found an issue where if the datetimepicker is hidden behind an advanced request offering question then it doesn't render when the request offering makes it active. Thankfully have been able to sort this with the following

(function() {
var observer = new MutationObserver(function (mutations) { 
  var targetElement = $('input[data-control="dateTimePicker"]'); 
 
  if(targetElement.length > 0) {   
     targetElement.kendoDateTimePicker({ interval: 15 });
      observer.disconnect(); 
    } 
  })
  
  var observerConfig = { 
    attributes: true, 
    childList: false, 
    characterData: false, 
    subtree: true 
  }; 
  
$(document).ready(function() {
 if(document.URL.indexOf("ServiceCatalog/RequestOffering") > -1){
 var targetNode = document.getElementById('main_wrapper'); 
  observer.observe(targetNode, observerConfig)
}})
})();

or alternatively change $(document).ready to $window.load() (thanks @john_doyle)

Tom_Hendricks

Well, we are running the same version of the portal and getting different results.  So clearly there are more variables at work here.  It is good to get multiple perspectives on this, so thanks for posting your fix!

I just want to point out one thing that I have also done in the past, but have stopped doing:

targetElement.kendoDateTimePicker({ property: value });

This does work sometimes.  If the timing is right, you may never notice the issue with it.  However, this syntax actually creates a new kendo control from the target element, in addition to the one that already exists.  This often works in spite of itself, until it doesn't.  This syntax is what you see most frequently in their docs, because they assume you are authoring the page in your new app.  When you are working with the Cireson portal, Cireson has already created the Kendo control for you, though (but perhaps not before your custom script runs...).  The way to set a property on an existing kendo control is documented at https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker#methods-setOptions:

var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");

datetimepicker.setOptions({
    min: new Date(2010, 5, 6)
});

(The above is copied from their page directly)

This will (correctly) fail if it is not targeting the exact element that was already instantiated as the intended Kendo control.  If I target an input element that is not being used by kendo or is not this type of control, this statement will fail (which is actually good that it does, but a bit frustrating in the moment).  This example uses a method to set the "min" option, which you could swap for "interval."  My example directly sets the value, so it is entirely possible that another function of mine is making this work and my code above is silently failing.  Something for me to look into.

But my main point is to use $('#myElement').data('typeOfKendoControl').doStuff() if you want to target an existing control, which you do in this portal (unless your custom code created it).

Alex_Marsh

@Tom_Hendricks I think that was the issue I was having, the control was overriding what was present and ignoring what was set, presenting a number of other issues. I've now got it working from what I saw posted here and have updated this thread with the js.