1

在此处输入图像描述

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

4

3 回答 3

2

我使用以下代码在特定日期打开 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
});

解释：

  • 我从 datepicker 的空值开始，因为如果 datepicker 已经有一个值（默认情况下小部件转到其value数据），则定位 datepicker 是没有意义的。
  • value(targetDate)在公开事件中，使用该方法指定所需的日期。这会将日历定位在目标日期/月/年。
  • 用 清除小部件值value(null)，否则如果用户选择此日期，小部件将不会触发更改事件（因此，我遇到了更改未触发的麻烦）。
于 2019-09-11T10:01:28.927 回答
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>

为此，您需要执行以下操作。

  1. 在 DatePicker Open 上，将日期选择器的值设置为您需要的值

  2. 在 DatePicker Change 上，将所选值保存到变量中。

  3. 在 DatePicker Close 上，将 DatePicker 值设置为保存的变量。

我认为这对你有用。

于 2016-11-05T07:12:58.763 回答
0

这应该有效：

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

在此示例中，我显示的最小日期为距当前日期 100 年，最大日期为距当前日期 6 年。所以你只需要在需要在日期选择器中显示的减法方法中设置所需的年份。

于 2018-01-22T05:59:54.390 回答