Home Service Manager Portal Feature Requests
We appreciate you taking the time to vote and add your suggestions to make our products awesome! Your request will be submitted to the community for review and inclusion into the backlog.

We recommend reviewing what is submitted before posting, in case your idea has already been submitted by another community member. If it has been submitted, vote for that existing feature request (by clicking the up arrow) to increase its opportunity of being added to Cireson solutions.

For more information around feature requests in the Cireson Community click here.

Options for the Date/Time Picker

Chris_KeanderChris_Keander Customer Advanced IT Monkey ✭✭✭
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.
43 votes

Submitted · Last Updated

Comments

  • Billy_WilsonBilly_Wilson Member Ninja IT Monkey ✭✭✭✭
    Absolutely! Great suggestion.
  • [Deleted User][Deleted User] Ninja IT Monkey ✭✭✭✭
    Agreed, this has been on my hit list as well!  


  • Geoff_RossGeoff_Ross Cireson Consultant O.G.
    Me too. And to be able to have just a date, or just a time prompt.
  • Josh_CrewJosh_Crew Customer IT Monkey ✭
    Yes, the Date/Time UI is clunky
  • Suleyman_OzdenSuleyman_Ozden Customer Advanced IT Monkey ✭✭✭

    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_YeudallCandice_Yeudall Customer Advanced IT Monkey ✭✭✭

    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_SmithAaron_Smith Customer IT Monkey ✭
    Where in the custom.js should $('input[data-control="dateTimePicker"]').kendoDateTimePicker({ interval: 15 }); this be placed?
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_MorrisAdam_Morris Customer IT Monkey ✭
    Is there a way to get this to work within Request Offerings?
  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_KennedyRyan_Kennedy Customer IT Monkey ✭
    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?
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Which version of the portal are you running?
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    Which version of the portal are you running?
    Latest version (8.1.2.2016)
  • Alex_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    edited October 2017
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    edited October 2017
    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_MarshAlex_Marsh Premier Partner Advanced IT Monkey ✭✭✭
    @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.
Sign In or Register to comment.