Fast(er) data entry with a DateTimePicker (DateTimePickerFor) control

[Erik]

I'm trying to enable rapid entry using mostly just the keyboard using a DateTimePicker field.  The behavior is seeking to minimize the number of keystrokes to enter a date and time "close" to today. With a full date and time, they would need to type 14 keystrokes minimum based on the formats below.

The users would like to do this:

1. Alt-down to open date picker on today (1 keystroke)
2. Use arrow keys to find the right date (1-4 keystrokes avg)
3. Hit enter to close the date picker -- (this is where the problem starts) (1 keystroke)
4. Type in 4 numbers to represent time. (4 keystrokes)
5. Hit enter - done (would go to the next field ideally - could hit tab as alternative)

Generally 9 keystrokes (sometimes less) instead of 14 every time.

The code below is what I've been trying to get to work.  It can run in the REPL playground - and I'm happy to use any of the events to achieve the desired behavior.  I haven't been able to get the above set of keystrokes to work with any combination of code / etc that I've tried so far.

Any chance you could help?  I think the "time" characters need to be highlighted and the time picker needs to be closed for the "4 number keys and tab/enter" to be accepted as time entry.  If the time picker is open and the user types 1345 (for example) and then tab or enter it just goes back to 00:00.

Any help / guidance is appreciated.  I had this working with an older version of kendo using the logic below (thanks for your help on that too!) but the new version of ASP.NET Core controls is giving me some trouble achieving it.

Thanks in advance. (i've tried other things than just the below - couldn't get anything to work the way I wanted)

@using Kendo.Mvc.UI

    @(Html.Kendo().DateTimePicker()
            .Name("DateTimeSampled")
            .Format("MM/dd/yyyy HH:mm")
            .ParseFormats(new[] { "MM/dd/yyyy HH mm", "MM/dd/yyyy HH:mm", "MM/dd/yyyy HHmm"})
            .TimeFormat("HH:mm")
            .Events(e =>
            {
                  e.Change("change").Open("open").Close("close");
            })
    )

<script>
    function open(e) {
        console.log("Open :: " + e.view + "-view");
    }

    function close(e) {
        console.log("Close :: " + e.view + "-view");
    }

    function change(e) {
        console.log("Change :: " + kendo.toString(this.value(), 'g'));
        if (e.view == "date") {
           //var picker = e.sender.data("kendoDateTimePicker");
           var picker = $("#DateTimeSampled").data("kendoDateTimePicker");
           console.log(picker);
           //picker.close();
           //e.sender.close();
           var info = kendo.caret(e.sender.element);
           kendo.caret(e.sender.element, info[0] - 5, info[1]); 
        }
    }
</script>

[Mihaela]

Hello Erik,

To update the time when the four digits are entered,  I would suggest the following approach:

• Update the Format() and TimeFormat() options with the desired time format ("HHmm").
• Handle the Close event of the DateTimePicker to select/highlight the time portion when the date is selected.

@(Html.Kendo().DateTimePicker()
    .Name("DateTimeSampled")
    .Format("MM/dd/yyyy HHmm")
    .ParseFormats(new[] { "MM/dd/yyyy HH mm", "MM/dd/yyyy HH:mm", "MM/dd/yyyy HHmm"})
    .TimeFormat("HHmm")
    .Interval(15)
    .Value(DateTime.Now)
    .Events(e =>
    {
            e.Close("close");
    })
)

• Within the Close event handler, select the hour value manually.

<script>
    function close(e) {
        if (e.view === "date") {
            var info = kendo.caret(e.sender.element);
            kendo.caret(e.sender.element, info[0] - 4, info[1]);
        }
    }
</script>

• Handle the "keydown" event of the input element and update the DateTimePicker value when "Enter" is pressed.

<script>
$(document).ready(function() {
    $("input[data-role='datetimepicker']").on("keydown", function(e) {
        if (e.keyCode === 13) { // Enter key
            var picker = $("#DateTimeSampled").data("kendoDateTimePicker");
            var dateInput = $(this).val();
            var parsedDate = kendo.parseDate(dateInput, "MM/dd/yyyy HHmm"); //parse the input value
            if (parsedDate) {
                picker.value(parsedDate); // Update the value
                picker.trigger("change");
            }
        }
    });
});
</script>

Here is a REPL sample for your reference:

https://netcorerepl.telerik.com/woEFEdPl44Z7WjUw01

I hope this example will help you to achieve the desired result.

 

Regards,
Mihaela
Progress Telerik