1

enter image description here

Text box should be empty and when i click on calendar icon then data picker load from my custom data, For example i will set 1 December 2020

V J I
  • 79
  • 3
  • 7
  • What is the requirement? Is it a date picker with empty value and on selection the date picker should load with a custom date say 1 December 2020? – Nitheesh Nov 05 '16 at 06:41
  • yes date picker. Normally on selection by default today date right,so instead of that today date i want as per my date,month and year but am not meant exactly 1 December 2020 :) – V J I Nov 05 '16 at 06:56

3 Answers3

2

I used the following code to open kendo datepicker widget on a specific date:

var targetDate = new Date(2020,11,1);
$('#myDatePicker').kendoDatePicker({
    open: function () {
        var calendar = this.dateView.calendar;
        // Position the calendar on specific date
        calendar.value(targetDate);
        // Clear the value so that the change event triggers again
        calendar.value(null);
    },
    change: function () {
        // this will not be triggered if you forget to reset the widget value
    },
    value: null
});

Explanation:

  • I start with empty value for the datepicker, because it makes no sense to position the datepicker if it already has a value (by default the widget goes to its value data).
  • On open event specify the desired date using the value(targetDate) method. This positions the calendar on the target date/month/year.
  • Clear the widget value with value(null), because otherwise the widget will not trigger change event if user selects this date (I had troubles with change not triggering because of this).
antanta
  • 618
  • 8
  • 16
1

I think this is what you are looking for.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

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

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

<body>

    <input id="datepicker" />
    <script>
        var selectedValue = "";
        $("#datepicker").kendoDatePicker();

        var datepicker = $("#datepicker").data("kendoDatePicker");

        datepicker.bind("change", function (e) {
            selectedValue = this.value();
        });

        datepicker.bind("open", function (e) {
            this.value(new Date("1 December 2020"));
        });

        datepicker.bind("close", function (e) {
            this.value(selectedValue);
        });
    </script>
</body>

</html>

You need to do the following things for that.

  1. On DatePicker Open set the value of the date picker to the value you requires

  2. On DatePicker Change, save the selected value to a variable.

  3. On DatePicker Close, set the DatePicker Value to the saved variable.

I think this will work for you.

Nitheesh
  • 19,238
  • 3
  • 22
  • 49
  • @(Html.Kendo().DatePickerFor(m => m.dtSTARTDATE) .Value(Model.dtSTARTDATE) .Events(e=>e.Open("ChangeDateToSessionDate"))) ---- function ChangeDateToSessionDate() { debugger; var x = this.value(); if (x == null) { var date = $('#datepick').data('kendoDatePicker').value(); this.value(date); this.value(null); } } – V J I Nov 05 '16 at 09:45
  • It's bit better :) – V J I Nov 05 '16 at 09:51
  • Does my answer meets your requirement? – Nitheesh Nov 05 '16 at 10:06
0

This should work:

 $("#datepicker").kendoDatePicker({
            max: moment(new Date()).subtract(6, 'years').toDate(),
            min: moment(new Date()).subtract(100, 'years').toDate()
        });

In this example, I am showing the minimum date is 100 years from the current date and maximum date is 6 years from the current date. So you just need to set the required year in the subtract method that needs to be showed in the datepicker.

Harsh
  • 89
  • 1
  • 7