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

【问题标题】：kendo datepicker default load by custom year and monthkendo datepicker 默认加载按自定义年份和月份
【发布时间】：2016-11-05 06:25:04
【问题描述】：

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

【问题讨论】：

有什么要求？它是一个空值的日期选择器，并且在选择时，日期选择器应该加载一个自定义日期，比如 2020 年 12 月 1 日？
是的日期选择器。通常在默认情况下选择今天日期正确，所以我想要根据我的日期、月份和年份而不是今天的日期，但并不完全是 2020 年 12 月 1 日:)

标签： kendo-ui kendo-asp.net-mvc kendo-datepicker

【解决方案1】：

我使用以下代码在特定日期打开 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)，否则小部件不会触发如果用户选择此日期，则更改事件（我在更改时遇到了麻烦因此没有触发）。

【讨论】：

【解决方案2】：

我想这就是你要找的。p>

<!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 Change 时，将所选值保存到变量中。
在 DatePicker 关闭时，将 DatePicker 值设置为保存的变量。

我认为这对你有用。

【讨论】：

@(Html.Kendo().DatePickerFor(m => m.dtSTARTDATE) .Value(Model.dtSTARTDATE) .Events(e=>e.Open("ChangeDateToSessionDate"))) -- -- 函数 ChangeDateToSessionDate() { 调试器； var x = this.value(); if (x == null) { var date = $('#datepick').data('kendoDatePicker').value(); this.value(日期); this.value(null); } }
更好一点:)
我的回答符合你的要求吗？

【解决方案3】：

这应该可行：

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

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

【讨论】：