您的位置:首页 > Web前端 > JQuery

使用jquery做datepicker

2014-03-15 22:21 162 查看
1、使用版本1.10.4

2、需要导入的js及css

<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css">
<link rel="stylesheet" href="css/jquery.ui.datepicker.css" type="text/css">
<script src="javascript/jquery.js"></script>
<script src="javascript/jquery.ui.core.js"></script>
<script src="javascript/jquery.ui.widget.js"></script>
<script src="javascript/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="css/demos.css" type="text/css">


这里要特别注意ui.datepicker. css,如果不导入它,那么出现时间选择器的时候将会没有样式。而且其他的样式文件,如ui.core.css,等都要导入进来,他们之间相互有关联。智能说很蛋疼。想单导入这几个文件然后实现,将会没有样式或不全

3、以下是他的一些属性

this.regional[""] = { // Default regional settings
closeText: "Done", // Display text for close link
prevText: "Prev", // Display text for previous month link
nextText: "Next", // Display text for next month link
currentText: "Today", // Display text for current month link
monthNames: ["January","February","March","April","May","June",
"July","August","September","October","November","December"], // Names of months for drop-down and formatting
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // For formatting
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], // For formatting
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], // For formatting
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"], // Column headings for days starting at Sunday
weekHeader: "Wk", // Column header for week of the year
dateFormat: "mm/dd/yy", // See format options on parseDate
firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
isRTL: false, // True if right-to-left language, false if left-to-right
showMonthAfterYear: false, // True if the year select precedes month, false for month then year
yearSuffix: "" // Additional text to append to the year in the month headers
};


以下是我的代码

$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',  //日期格式,自己设置
yearRange: '1990:2008',//年份范围
monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], // For formatting
changeMonth: true,
changeYear: true
});
这里monthNamesShort改为说明的monthNames好像用不了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: