jQuery UI DatePicker用法和中文设置

//学习笔记

首先要去把相对应的jquery-ui.min.css和jquery-ui.min.js和images下载下来

(完整包如下:http://download.jqueryui.com/download)

然后引入到你的项目中

在使用的时候只需要

<script> 
$(document).ready(function() { 
$("#demoInput").datepicker(); 
}); 
</script> 

  然后点击这个ID为demoInput的元素时,就会弹出来datepicker选择器,选择后值会添加到这个元素的val中

想要下拉选择年份和月份?

$( "#demoInput" ).datepicker({changeYear:true,changeMonth:true});

  想要显示为中文?

$.datepicker.regional["zh-CN"] = { closeText: "关闭", prevText: "<上月", nextText: "下月>", currentText: "今天", monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"], weekHeader: "周", dateFormat: "yy-mm-dd", firstDay: 1, isRTL: !1, showMonthAfterYear: !0, yearSuffix: "年" }

$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);

$( "#demoInput" ).datepicker({ showOtherMonths: true,selectOtherMonths: true});

  想要更改日期显示的格式?

$( "#demoInput" ).datepicker({dateFormat: 'yy-mm-dd'});

  以上,这些只是最简陋的但能实现功能的脚本,获取更多功能和设置,可以参考(http://www.runoob.com/jqueryui/example-datepicker.html)或者官方说明文档~~

posted @ 2016-04-28 09:41  红岸  阅读(636)  评论(0编辑  收藏  举报