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>

Using custom validity as below...

@(Html.Kendo()
                        .TextBoxFor(m => m.Task)
                        .Value(null)
                        .HtmlAttributes(new
                        {
                            required = "required",
                            oninvalid = "this.setCustomValidity('Enter a task')",
                            oninput = "this.setCustomValidity('')"
                        })
                        )

I've tried to do the same for other controls (numeric textbox, datetime picker, autocomplete) but it doesn't work.

For example, when trying the same thing for numeric textbox, in console I get an error "An invalid form control with name='Advance' is not focusable.

I'm having trouble setting the DateTimePicker to use the European style calendar (where weeks start on Monday) and a 24-hour time picker. Despite my attempts, I haven't been successful in achieving this configuration. I'm seeking guidance or a solution to implement this specific style for the DateTimePicker.

In the latest release, 23.1.4, a Date time picker with the DateInput option set fails to be initialized with a jQuery error "s is not a constructor".

This occurs in my code and when using the example from the demo pages https://demos.telerik.com/aspnet-core/datepicker/basic-usage

TagHelper:

<kendo-datepicker name="monthpicker" date-input="true" format="MMMM yyyy" value="DateTime.Now" start="CalendarView.Year" depth="CalendarView.Year" name="monthpicker" style="width: 100%" title="monthpicker">
        </kendo-datepicker>

HtmlHelper:

@(Html.Kendo().DatePicker()
              .Name("monthpicker")
              .Start(CalendarView.Year)
              .Depth(CalendarView.Year)
              .Format("MMMM yyyy")
              .Value("November 2011")
              .DateInput()
              .HtmlAttributes(new { style = "width: 100%", title = "monthpicker" })
        )
 
Both of the above fail to be initialized with the same error.  JQuery version 3.3.1 is being used in this case.
Gordon

I've got a page which contains a dozen tabs, each of which has their own ViewComponent. Each ViewComponent has many datepicker controls. 

I have a situation where I need to disable almost all of them, except on one tab, based on the user's role. 

What are some ways to do this in one fell swoop, rather than setting .Enable(false) on each individual datepicker in markup?

Bonus: there are some regular old <input type="text">'s on these forms as well. Those are easy enough to disable with JQuery, but JQuery doesn't work on the datepickers, because while the text portion is read-only, the popup button displaying a calendar still works and can change the value of the text box.

Thanks so much for any ideas!

I have a datepicker databound to a model as follows:

  <div class="col-sm-3">
            <label asp-for="ADR.Date" class="form-label"></label>
            <kendo-datepicker for="ADR.Date" class="form-control"></kendo-datepicker>
            <span asp-validation-for="ADR.Date" class="text-danger"></span>
   </div>

The ADR model property does not allow nulls:

[DataType(DataType.Date)]
public DateTime Date { get; set; }

This is for good reason, I want to prevent the user from omitting the date when they fill out the form and for the data validation to fire correctly.

However instead of being empty when the form is first opened, the Datepicker fills the date with 01/01/1901, which is unwanted behavior as the user then doesn't enter a correct date.

How do we ensure the datepicker is empty when first loading the form and the calendar is on todays date when empty?

Hi,

Is there a way to position the buttons so that the clock button comes after the calendar?This is more logical as the ISO date format used in our application.

I have a dialog box that includes a date picker for an expiry date field that is null be default.

If I select an expiry date say a year into the future, close the dialog box and reopen it, the calendar in the datepicker opens to my last selected date instead of today's date.

Is there anyway to force the calendar to always open to today if a date is not set in the datepicker instead of remembering its last position.

It seems to me, I should be able to get the calendar component in the open event  of the datepicker and then set the initial date. Is that possible?

Thanks,

Charlotte