Question

文本框应为空，当我点击日历图标时，数据选择器会从我的自定义数据加载，例如我将设置为2020年12月1日

Answer 1

我认为这就是你要找的东西。

<!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>

您需要为此做以下事情。

在DatePicker Open上将日期选择器的值设置为您需要的值
在DatePicker更改时，将所选值保存到变量。
在DatePicker关闭时，将DatePicker值设置为已保存的变量。

我认为这对你有用。

Answer 2

这应该有效：

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

在此示例中，我显示的最短日期是距当前日期100年，最长日期是距当前日期6年。所以你只需要在减法方法中设置所需的年份，该方法需要在datepicker中显示。

Answer 3

我使用以下代码在特定日期打开kendo datepicker小部件：

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
});

说明：

我从日期选择器的空值开始，因为它没有如果日期选择器已经具有值，则可以定位它默认情况下，小部件将转到其value数据）。
在打开事件中，使用value(targetDate)方法指定所需的日期。这会将日历定位在目标日期/月份/年份。
清除小部件值与value(null)一起使用，因为否则该小部件将不会触发如果用户选择此日期，则发生更改事件（我在更改时遇到了麻烦因此无法触发）。

kendo datepicker默认按自定义年份和月份加载

3 个答案:

这应该有效：