KendoUI系列：DatePicker

weixin_34292959發表於2014-06-08
UI

　　1、基本使用

<link href="@Url.Content("~/C　　ontent/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<input id="datePicker" />
<script type="text/javascript">
    $(function () {
        $("#datePicker").kendoDatePicker();
    });
</script>

　　效果預覽：

　　2、設定日期格式

<script type="text/javascript">
    $(function () {
        $("#datePicker").kendoDatePicker({
            format: "yyyy-MM-dd"
        });
    });
</script>

　　3、初始化當前日期

<script type="text/javascript">
    $(function () {
        $("#datePicker").kendoDatePicker({
            format: "yyyy-MM-dd",
            value: new Date()
        });
    });
</script>

　　4、設定本地化

<script src="@Url.Content("~/Scripts/kendo/2014.1.318/cultures/kendo.culture.zh-CN.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        kendo.culture("zh-CN");
        $("#datePicker").kendoDatePicker({
            format: "yyyy-MM-dd",
            value: new Date()
        });
    });
</script>

　　效果預覽：

　　5、設定日期選擇範圍

Start Date:<input id="start" />
End Date:<input id="end" />
<script type="text/javascript">
    $(function () {
        function startChange() {
            var startDate = start.value(),
            endDate = end.value();

            if (startDate) {
                startDate = new Date(startDate);
                startDate.setDate(startDate.getDate());
                end.min(startDate);
            } else if (endDate) {
                start.max(new Date(endDate));
            } else {
                endDate = new Date();
                start.max(endDate);
                end.min(endDate);
            }
        }

        function endChange() {
            var endDate = end.value(),
            startDate = start.value();

            if (endDate) {
                endDate = new Date(endDate);
                endDate.setDate(endDate.getDate());
                start.max(endDate);
            } else if (startDate) {
                end.min(new Date(startDate));
            } else {
                endDate = new Date();
                start.max(endDate);
                end.min(endDate);
            }
        }

        var start = $("#start").kendoDatePicker({
            format: "yyyy-MM-dd",
            change: startChange
        }).data("kendoDatePicker");

        var end = $("#end").kendoDatePicker({
            format: "yyyy-MM-dd",
            change: endChange
        }).data("kendoDatePicker");

        start.max(end.value());
        end.min(start.value());
    });
</script>

　　效果預覽：

　　6、參考資料

　　http://demos.telerik.com/kendo-ui/datepicker/index

相關文章