This is a migrated thread and some comments may be shown as answers.

Customizing date picker - removing previous selected date ighlighting

4 Answers 3211 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 08 Jul 2016, 02:44 PM

datepicker.png

Hi,

I have this small issue when I select a date in the date picker, let's say I select a date of birth in June 1974 and then I delete the value and try to select a new one, the calendar will open in June 1974.

How can I reset that so if the date value is empty the calendar will show the current month?

Thanks

answered on 10 Jul 2016, 01:15 PM

Hi Mohamed you can try this code.

1) When you delete the value in date picker and open the calendar it will display the date of present day.

2) If you select a value and haven't deleted it and opened the calendar the it will display the date corresponding to the value in date picker.

Hope this Helps.

<!DOCTYPE html>

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

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

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>

<input id="datepicker" />
<script>
var DatePicker = $("#datepicker").kendoDatePicker({
open: display
}).data("kendoDatePicker");

function display(){
if(!$("#datepicker").val())
DatePicker.value(new Date());
}

</script>
</body>
</html>