日历（datepicker）UI，可以让用户更加直观的、更加方便的输入日期，并且还考虑不同国家的语言限制，包括汉语。
调用datepicker()方法
$(‘#date‘).datepicker();
修改datepicker()样式
日历UI的header背景和对话框UI的背景采用的是同一个class，所以在此之前已经被修改，所以，这里无须再修改了。
/* 日历UI的今天单元格样式 */
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
/* 日历UI的选定单元格样式 */
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}
datepicker()方法的属性
日历方法有两种形式：
1.datepicker(options)，options是以对象键值对的形式传参，每个键值对表示一个选项；
2.datepicker(‘action‘, param)，action是操作对话框方法的字符串，param则是options的某个选项。
datepicker国际化选项
| 属性 | 默认值/类型 | 说明 |
| dateFormat | mm/dd/yy/时间 | 指定日历返回的日期格式 |
| dayNames | 英文日期/数组 | 以数组形式指定星期中的天的长格式。比如：Sunday、Monday 等。中文：星期日 |
| dayNamesShort | 英文日期/数组 | 以数组形式指定星期中的天的短格式。比如：Sun、Mon等 |
| dayNamesMin | 英文日期/数组 | 以数组形式指定星期中的天的最小格式。比如：Su、Mo等 |
| monthNames | 英文月份/数组 | 以数组形式指定月份的长格式名称（January、February等）。数组必须从January开始 |
| monthNamesShort | 英文月份/数组 | 以数组形式指定月份的短格式名称（Jan、Feb等）。数组必须从January开始 |
| altField | 无/字符串 | 为日期选择器指定一个<input>域 |
| altFormat | 无/字符串 | 添加到<input>域的可选日期格式 |
| appendText | 无/字符串 | 在日期选择器的<input>域后面附加文本 |
| showWeek | false/布尔值 | 显示周 |
| weekHeader | ‘Wk‘/字符串 | 显示周的标题 |
| firstDay | 0/数值 | 指定日历中的星期从星期几开始。0表示星期日 |
注意：默认情况下，日历显示为英文。如果你想使用中文日历，直接引入中文语言包即可，或者把中文语言包的几行代码整合到某个js文件里即可。
日期格式代码
| 代码 | 说明 |
| d | 月份中的天，从1到31 |
| dd | 月份中的天，从01到31 |
| o | 年份中的天，从1到366 |
| oo | 年份中的天，从001到366 |
| D | 星期中的天的缩写名称（Mon、Tue等） |
| DD | 星期中的天的全写名称（Monday、Tuesday等） |
| m | 月份，从1到12 |
| mm | 月份，从01到12 |
| M | 月份的缩写名称（Jan、February等） |
| MM | 月份的全写名称（January、February等） |
| y | 两位数字的年份（14表示2014） |
| yy | 四位数字的年份（2014） |
| @ | 从01/01/1997至今的毫秒数 |
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知问前端</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<button id="search_button">查询</button>
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
</div>
</div>
</div>
<div id="reg" title="会员注册">
<p>
<label for="user">账号：</label>
<input type="text" name="user" class="text" id="user" title="请输入账号，不少于2位！"></input>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！"></input>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！"></input>
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date"></input>
</p>
</div>
</body>
</html>
style.css：
body {
margin: 40px 0 0 0;
padding: 0;
font-size: 12px;
font-family: 宋体;
background: #fff;
}
/* 更改jQuery UI主题的对话框header的背景 */
.ui-widget-header {
background: url(img/ui_header_bg.png);
}
/* 按钮正常状态的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background:url(img/ui_header_bg.png);
}
/* 按钮点击状态的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url(img/ui_white.png);
}
/* 工具提示的文本颜色 */
.ui-tooltip {
color: #666;
}
/* 邮箱自动补全的悬停背景色 */
.ui-menu .ui-state-focus {
background:url(img/ui_header_bg.png);
}
.ui-menu {
color: #666;
}
/* 日历UI的今天单元格样式 */
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
/* 日历UI的选定单元格样式 */
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}
#header {
width: 100%;
height: 40px;
background: url(img/header_bg.png);
position: absolute;
top:0;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin: 0;
padding: 0;
color: #666;
line-height: 40px;
float: left;
padding: 0 10px;
}
#header .header_search {
padding: 6px 0 0 0;
float: left;
}
#header .header_search .search {
width: 300px;
height: 24px;
border: 1px solid #ccc;
background: #fff;
color: #666;
font-size: 14px;
text-indent: 5px;
}
#header .header_button {
padding: 5px;
float: left;
}
#header .header_member {
float: right;
line-height: 40px;
color: #555;
font-size: 14px;
}
#header .header_member a {
text-decoration: none;
font-size: 14px;
color: #555;
}
#reg {
padding: 15px 0 0 15px;
}
#reg p {
margin: 10px 0;
padding: 0;
}
#reg p label {
font-size: 14px;
color: #666;
}
#reg .star {
font-size: 14px;
color: red;
}
#reg .text {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
width: 200px;
height: 25px;
line-height: 25px;
text-indent: 5px;
font-size: 13px;
color: #666;
}
jQuery代码：
$("#date").datepicker({
dateFormat:"yy-mm-dd",
//dayNames:[‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘], //无效
//dayNamesShort:[‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘], //无效
dayNamesMin:[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘], //有效
monthNames:[‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘], //有效
//monthNamesShort:[‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘], //无效
});
在index.html中加入：
<input type="text" id="abc"></input>
jQuery代码：
$("#date").datepicker({
altField:"#abc",
altFormat:"dd/mm/yy",
appendText:"日历",
showWeek:true,
weekHeader:"周",
firstDay:1
});
时间： 2024-09-28 20:41:26