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、参考资料