CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Code Rider
Code Rider

Reputation: 2063

How to display only date in KendoDateTime picker

I've placed a kendo DateTime Picker on a web page.

According to the requirement initially it should display only date and if user needs then he/she can select the time as well.

Below is the code which initially fill the kendo datetime picker:

 <input id="txtDate" type="text" maxlength="10" style="width: 250px;" value="" />

  <script type="text/javascript">
      $('#txtDate').kendoDateTimePicker({ value: new Date() });
</script>

The above code fill date and time. But i want to fill only current date.

I tried with the following code to check if it can fill only date. But it adds the 12:00 AM with date.

 $('#txtDate').kendoDateTimePicker({ value: new Date('04/30/2017') });

kendo datetime picker image

Is there any way to fill only date in Kendo DateTime picker?

Upvotes: 0

Views: 6120

Answers (5)

ibrahim &#252;nal
ibrahim &#252;nal

Reputation: 109

Instead of using Kendo.DateTimePickerFor you can use DatePickerFor. This way you can get rid of hour part.

 @(Html.Kendo().DatePickerFor(model => model.StartDate).HtmlAttributes(new { @class = "form-control" , required="required"}))

enter image description here

Upvotes: 0

RoastBeast
RoastBeast

Reputation: 1115

Via jQuery:

$('#txtDate').datetimepicker({
        format: 'L'
});

Upvotes: 0

John Lord
John Lord

Reputation: 2175

You can build on the answers given above and detect when a time is selected then reapply a display format in javascript.

Upvotes: 0

Giovanni Romio
Giovanni Romio

Reputation: 1056

If you never need to display the time one possible option might be to store the datetime value as an attribute of the current widget and on the submit event of the form manually ovverride the values:

<script>
    $(document).ready(function () {

        $("#datetimepicker").kendoDateTimePicker({
            format: "yyyy/MM/dd",
            change: function(data){
                data.sender.element.attr("value", data.sender.value());
            }
        });

    });

    $("form").on("submit", function(){
        $("input").each(function(){
            var inputValue = $(this).attr("value");

            if(inputValue){
                $(this).val(inputValue);
            }
        });

    })

</script>

If you want to display the time after the user pick a time you can change the format of the widget subscribing a function to the open event:

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    format: "yyyy/MM/dd",
    value: new Date(),
    open: function(e){
        if(e.view == "time"){
        this.setOptions({format: "yyyy/MM/dd HH:mm"})
      }

      if(e.view == "date"){
        this.setOptions({format: "yyyy/MM/dd"})
      }
    }
});

Upvotes: 0

Mantas Čekanauskas
Mantas Čekanauskas

Reputation: 2228

What you are looking is kendoDatePicker, which will allows user to select only date.

$(document).ready(function() 
     $("#txtDate").kendoDatePicker();
});

Edit: or add formatting property to kendoDateTimePicker, which will effect how value is displayed for user.

$('#txtDate').kendoDateTimePicker({ 
    value: new Date(),
    format: 'MM/dd/yyyy'
});

Upvotes: 2

Related Questions