jQuery是一款不可多得的非常优秀的javascript脚本开发库，而基于其上的很多插件也是非常规范和卓越的，如果错过这番美景真是太可惜了，比如datepicker这个插件。
一般MIS系统的前端，尤其是用户注册页面，都会有诸如“出身年月”的日期输入框，最简单的做法就是使用一个<input type="text"/>标签，这样做的弊端有很多：首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题，如果深入下去还有非常多的地方值得推敲。当前比较流行的做法是使用下拉菜单<select><option></option></select>来构造，但是这样做无论交互性、复杂度和可移植性都不尽如人意，因为至少需要构建3个联动的下拉菜单，需要自己编写大量的脚本处理日期合法性。
datepicker带来了美好的春天，先看看使用默认样式时它的样子：
完全GUI般的用户体验，炫目的动态展现效果，精确的日期控制和高度的灵活的参数配置，这一切使得datepicker受到众多开发者的青睐，其中包括大名鼎鼎的google，在其google calendar项目中就使用了这个脚本，有兴趣可以去看看。顺便啰嗦一句，上图的默认效果，在javascript中，用户只需写一句话就可以实现了，怎么样，心动了吧，follow me：
1.下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后下载datepicker（内含jQuery1.
2.6_min），您也可以到下载：marcgrabanski/pages/code/jquery-ui-datepicker。
2.在HTML中引用下载下来的两个js：
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>
3.在HTML中引入默认样式表文件，这个文件也在刚刚的压缩包中，如果在下载，首页就有这个CSS文件下载，也可选择其他皮肤的CSS：
<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
4.在HTML中插入文本域，最好设置成只读，不接受用户的手动输入，防止格式混乱，以id标记好。
<input id="dateinput" type="text" readonly="readonly"/>
5.编写js代码，实现最终效果。
<script language="javascript">
$(document).ready(function() {
$('#dateinput').datepicker();
});
</script>
这样就基本完成一个日期输入文本域了，但是是英文的，根据不同的MIS系统，有的目标人是上了年级的用户，建议将界面改成中文，可以如此操作，稍微改动一下刚刚的函数，like this：
<script language="javascript">
$(document).ready(function() {
$('#dateinput').datepicker({
dateFormat: 'yy-mm-dd', //日期格式，自己设置
buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
buttonImageOnly: true, //Show an image trigger without any button.
showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效yearRange: '1990:2008',//年份范围
clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
closeText:'关闭',
prevText:'前一月',
nextText:'后一月',
currentText:' ',
monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] });
});
</script>
----------------------------------------------------------------------------------------------------------------------
altField: ''
从datepicker 中获取的值，赋值予该控件
altFormat: ''
赋予altField值的日期格式
ps. 日期格式参考：docs.jquery/UI/Datepicker/formatDate
appendText: ''
日期格式提示信息
buttonImage: ''
使用图标打开日历，值为图标路径
buttonImageOnly: false
当图标加载失败使显示按钮
buttonText: '...'
按钮文件
changeMonth: fasle
月份可选模式（下拉框显示）
changeYear: fasle
年份可选模式（下拉框显示）
closeText: 'Done'
关闭日历按钮
constrainInput: true
手动输入的日期格式不符，默认当前时间
currentText: 'Today'
‘今日’按钮的文字
linux窗口大小调整
dateFormat: 'mm/dd/yy'
返回日期格式
ps. 日期格式参考：docs.jquery/UI/Datepicker/formatDate
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
defaultDate: null
初始高亮日期
eg.
Date：new Date('yyyy', 'mm - 1', 'dd')
Number：+3 当前日期的后3 天
怎样还原数据库String：'-1w +3d' 当前日期的前1 周后3 天
NULL：当前日期
-------------------------------------------------------------------------------------------------------------------------------duration: 'normal'
日历展开动画时长，单位毫秒
firstDay: 0
一周的第一天，默认‘周日’
gotoCurrent: false
hideIfNoPrevNext: false
如果没下一页，隐藏翻页按钮
isRTL: false
书写方式，自右向左
maxDate: null
可选最大日期，格式同defaultDate
minDate: null
可选最大日期，格式同defaultDate
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
navigationAsDateFormat: false
当设为TRUE 时，属性nextText 的值可显示日历相关信息
eg. nextText: 'm' 下月月份
nextText: 'Next'
翻页按钮图标提示，配合navigationAsDateFormat 可显示日历信息
按钮button的属性numberOfMonths: 1
显示多个月份
eg. [2,3] 显示2行3列6个月份的日历
prevText: 'Prev'
翻页按钮图标提示，配合navigationAsDateFormat 可显示日历信息
shortYearCutoff: '+10'
showAnim: 'show'
日历出现方式，'slideDown', 'fadeIn'
ps. 参考：www.jqueryui/demos/show/
showButtonPanel: false
显示按钮面板
showCurrentAtPos: 0
showMonthAfterYear: false
月份显示于年份之后
stepMonths: 1
点击上/下月时，切换月份的数量
yearRange: '-10:+10'
当changeYear为true 时，下拉框中显示的年份跨度
eg.
‘-10:+10’ 跨度为过去10 年至将来10 年
‘2000：2010’ 跨度为2000 年至2010 年
---------------------------------------------------------------------------------------------------------------------- <!DOCTYP
E html PUBLIC "-//W3C//DTD XHTML    1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/1999/xhtml" dir="ltr" lang="en">
<head>
<title>jQuery UI Example Page</title>
<link type="text/css" href="./development-bundle/themes/base/blue4.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$.ional['zh-CN'] =
{抽象类和接口的相同点
jquery下载的文件怎么使用
clearText: '清除', clearStatus: '清除已选日期',
closeText: '关闭', closeStatus: '不改变当前选择',
prevText: '<；上月', prevStatus: '显示上月',
execution读法nextText: '下月>', nextStatus: '显示下月',
currentText: '今天', currentStatus: '显示本月',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthStatus: '选择月份', yearStatus: '选择年份',
weekHeader: '周', weekStatus: '年内周次',
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dayStatus: '设置DD 为一周起始', dateStatus: '选择m月d日, DD',
dateFormat: 'yy-mm-dd', firstDay: 1,
initStatus: '请选择日期', isRTL: false
};
$.datepicker.setDefaults($.ional['zh-CN']);
$("#dateinput").datepicker({
changeMonth: true,
changeYear: true,
/
/showOn:'button',
// buttonText:'选择日期',
buttonImage:'./images/calendar.gif',
buttonImageOnly: true,
showOn: 'both'
// showButtonPanel: true
});
});
</script>
</head>
<body>
<input id="dateinput" type="text" readonly="readonly"/> </body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。