locked
How to Sort time input dropdown RRS feed

  • Question

  • Hi,

    How to sort time input dropdown in the CRM datetime field?  CANNOT use document.getElementById  since it doesnt work in tablets and outlook. 

    Thanks,


    nasayoo

    Tuesday, July 14, 2015 6:02 PM

Answers

  • There's no supported way to do it, but here's an unsupported way that I've done it in the past (works in 2013 and 2015):

    // If you want from 6:30am timeFrom should be exactly "6:30 a.m."
    // If you want to 8:00pm timeTo should be exactly "8:00 p.m."
    // If you don't want to restrict to or from leave the value as null/undefined
    function hackTimePicker (fieldName, timeFrom, timeTo) {
        // Attach onclick event to the field
        $("#" + fieldName).click(function () {
            // Attach onclick event to the dropdown arrow
            $("#" + fieldName + "_iTime img").click(function () {
                // Loop through each available time and remove
                var $times = $("#Dialog_" + fieldName + "_iTimeselectPopup td");
    
                // Other time formats unsupported
                if ($times.length == 0 || $($times[0]).html() != "12:00 a.m.") { return; }
    
                var isValid = timeFrom == null;
                $times.each(function () {
                    var $time = $(this);
    
                    if (timeFrom != null && $time.html() == timeFrom) {
                        isValid = true;
                    }
    
                    if (!isValid) {
                        $time.hide();
                    }
    
                    if (timeTo != null && $time.html() == timeTo) {
                        isValid = false;
                    }
                });
            });
        });
    }


    You can place that function in a global js file so it's manageable if it ever breaks, then just call it in the form onload for each date/time field you want to modify.

    Call it like this to meet your requirement:

    hackTimePicker("new_datetimefield", "7:00 a.m.");

    It will physically remove all the drop down options before 7:00 a.m. but users can still manually type those values in.

    The risk with this is that it's unsupported, and could stop working at any time. If that happens it shouldn't produce any errors, it just won't remove any options from the drop down, so it's fairly low risk. Also note that this only supports english time format, but if your organisation uses a different format then you can modify the 12:00 a.m. check to match your own format etc.

    Hope that helps

    Paul


    If my response helped you find your answer please show your thanks by taking the time to "Mark As Answer" and "Vote As Helpful".

    Twitter LinkedIn Facebook Blog Magnetism



    • Edited by Paul Nieuwelaar Wednesday, July 15, 2015 8:44 PM
    • Proposed as answer by kMAT1 Tuesday, July 21, 2015 2:19 AM
    • Marked as answer by nasayoo Tuesday, July 21, 2015 1:43 PM
    Wednesday, July 15, 2015 8:26 PM

All replies

  • Hi,

    What is it you want to do? As a general rule don't use document.getElementById since it's not supported.

    Regards


    Rickard Norström Developer CRM-Konsulterna
    http://www.crmkonsulterna.se
    Swedish Dynamics CRM Forum: http://www.crmforum.se
    My Blog: http://rickardnorstrom.blogspot.se

    Wednesday, July 15, 2015 7:09 AM
  • How are you wanting to sort it? In any case, the only way to do it is with DOM manipulation, which should work in outlook and on tablets if you really need it.

    If my response helped you find your answer please show your thanks by taking the time to "Mark As Answer" and "Vote As Helpful".

    Twitter LinkedIn Facebook Blog Magnetism

    Wednesday, July 15, 2015 7:24 AM
  • I want to sort it from particular time e.g. 7 am and so on. Not from starting from 12 am. which reduces user friendliness. 

    Yes, we need to avoid using getElementByID.  Any other ways supported?

    Thanks. 


    nasayoo

    Wednesday, July 15, 2015 1:55 PM
  • There's no supported way to do it, but here's an unsupported way that I've done it in the past (works in 2013 and 2015):

    // If you want from 6:30am timeFrom should be exactly "6:30 a.m."
    // If you want to 8:00pm timeTo should be exactly "8:00 p.m."
    // If you don't want to restrict to or from leave the value as null/undefined
    function hackTimePicker (fieldName, timeFrom, timeTo) {
        // Attach onclick event to the field
        $("#" + fieldName).click(function () {
            // Attach onclick event to the dropdown arrow
            $("#" + fieldName + "_iTime img").click(function () {
                // Loop through each available time and remove
                var $times = $("#Dialog_" + fieldName + "_iTimeselectPopup td");
    
                // Other time formats unsupported
                if ($times.length == 0 || $($times[0]).html() != "12:00 a.m.") { return; }
    
                var isValid = timeFrom == null;
                $times.each(function () {
                    var $time = $(this);
    
                    if (timeFrom != null && $time.html() == timeFrom) {
                        isValid = true;
                    }
    
                    if (!isValid) {
                        $time.hide();
                    }
    
                    if (timeTo != null && $time.html() == timeTo) {
                        isValid = false;
                    }
                });
            });
        });
    }


    You can place that function in a global js file so it's manageable if it ever breaks, then just call it in the form onload for each date/time field you want to modify.

    Call it like this to meet your requirement:

    hackTimePicker("new_datetimefield", "7:00 a.m.");

    It will physically remove all the drop down options before 7:00 a.m. but users can still manually type those values in.

    The risk with this is that it's unsupported, and could stop working at any time. If that happens it shouldn't produce any errors, it just won't remove any options from the drop down, so it's fairly low risk. Also note that this only supports english time format, but if your organisation uses a different format then you can modify the 12:00 a.m. check to match your own format etc.

    Hope that helps

    Paul


    If my response helped you find your answer please show your thanks by taking the time to "Mark As Answer" and "Vote As Helpful".

    Twitter LinkedIn Facebook Blog Magnetism



    • Edited by Paul Nieuwelaar Wednesday, July 15, 2015 8:44 PM
    • Proposed as answer by kMAT1 Tuesday, July 21, 2015 2:19 AM
    • Marked as answer by nasayoo Tuesday, July 21, 2015 1:43 PM
    Wednesday, July 15, 2015 8:26 PM
  • Thanks Paul. Will it work on Tablets and outlook?

    nasayoo

    Thursday, July 16, 2015 2:24 PM
  • I haven't tested it on tablets, but no reason why it shouldn't work in outlook and tablets. Outlook uses IE to render the forms anyway, and as long as the tablet supports JavaScript it should work too.

    If my response helped you find your answer please show your thanks by taking the time to "Mark As Answer" and "Vote As Helpful".

    Twitter LinkedIn Facebook Blog Magnetism

    Thursday, July 16, 2015 8:17 PM
  • Thanks, the solution works fine in IE. But when Appointment entity - start time is customized, it shows up inside the Outlook application form which doesn't render jQuery/Javascript. Any solution for this?

    nasayoo

    Monday, July 20, 2015 8:56 PM
  • Not sure I understand. CRM forms definitely support jquery inside outlook. Outlook is simply rendering the CRM forms using IE anyway, so it's really not much different to just opening the form in IE. I tested this in Outlook and on my phone (on a CRM phone call) and it works.

    What do you mean by when start time is customized?


    If my response helped you find your answer please show your thanks by taking the time to "Mark As Answer" and "Vote As Helpful".

    Twitter LinkedIn Facebook Blog Magnetism

    Monday, July 20, 2015 9:22 PM
  • Activity type entity forms(eg- appointment form) are opened within Outlook like an inbuilt form whereas other entity forms(eg- account, lead) are opened as a new browser window, in which case, jQuery will work. 

    I am calling the jQuery function for the scheduledstart datetime field in appointment entity which appears inside Outlook.

    Thanks,


    nasayoo

    Monday, July 20, 2015 11:38 PM
  • Outlook already defaults the time picker to the current-selected time on appointments, so you shouldn't need to change anything.

    However you can set outlook to open CRM forms for activities, instead of the native outlook forms in your personal CRM options (File -> CRM -> Options):


    If my response helped you find your answer please show your thanks by taking the time to "Mark As Answer" and "Vote As Helpful".

    Twitter LinkedIn Facebook Blog Magnetism

    Tuesday, July 21, 2015 2:40 AM