CODEWITHSUNDEEP
kendo-ui
Limey
Limey

Reputation: 2772

set default Time on empty datetime picker

So pretty new to Kendo (Know enough to be truly dangerous) and I'm trying to figure out how to set the default time to not be 12 AM.

I know I can pass in a datetime value, and it will go off of that, but what I'm trying to do it leave the field empty, but then have the first time available be 8 AM.

Is this possible to do?

Thanks

Upvotes: 1

Views: 772

Answers (2)

Shai
Shai

Reputation: 3872

See if the code below suits your needs. I made a simple demo with global variables to give you a feel for the solution.

What I do in the demo is check whether the change to the value is the first change and whether it's done from the date view. If both are true, the time is set to 8:00.

You can use a similar method to set a default date if the time value is the first one selected.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="datetimepicker" />
<script>
    let mode;
    let firstChange = true;

    $("#datetimepicker").kendoDateTimePicker({
        open: function(e) {
            mode = e.view;
        },
        change: function(e) {
            if (mode === "date" && firstChange) {
                let currentDate = e.sender.value();

                e.sender.value(new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 8, 0, 0));

                firstChange = false;
            } else {
              firstChange = false;
            }
        }
    });
</script>
</body>
</html>

Upvotes: 2

AGH
AGH

Reputation: 353

I am not sure about your requirement but you can set default date time according to your requirement. 

$("#dtpXYZ).data('kendoDatePicker').value(kendo.toString(new Date($.now()), 'dd/MM/yyyy  HH:mm'));

Upvotes: 0

Related Questions