KendoUI系列：DatePicker

　　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