日历(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:;
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:;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin:;
padding:;
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:;
}
#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
});

知问前端——日历UI(一)的更多相关文章

  1. 第一百八十二节,jQuery-UI,知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

  2. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  3. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  4. 第一百七十八节,jQuery-UI,知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  5. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

  6. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  7. 知问前端——按钮UI

    按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...

  8. 知问前端——对话框UI(二)

    dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...

  9. 第一百七十九节,jQuery-UI,知问前端--按钮 UI-图标

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

随机推荐

  1. GreenMail邮件测试服务器

    GreenMail邮件测试服务器 http://blog.csdn.net/jackiehff/article/details/8741988 这个目前没有需求,所以暂不研究

  2. iOS-Debug Symbol(调试符号)

    Debug Symbol(调试符号) 编译警告 从svn下载下来的文件,到处都是编译警告,看着不爽,找下原因,没想到还是一条大鱼 warning: (i386) /UsersLibrary/Devel ...

  3. safari 移动下开启 滚定回弹

    -webkit-overflow-scrolling : touch;

  4. Sumsets 递推

    Sumsets Time Limit : 6000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submi ...

  5. restAssured + TestNG测试接口,以下是一个get 请求。

    package Elaine.Test.G.APITest; import org.testng.Assert;import org.testng.annotations.BeforeTest;imp ...

  6. 树莓派3_win10下使用"远程桌面连接"与树莓派通信(使用VNC实现连接后)

    -----------------------------------------------------------学无止境------------------------------------- ...

  7. kaldi解码及特征提取详解

    目录 1. 注意事项 2. 流程图: 3. 具体流程指令: 1. 注意事项 首先要训练好模型,用到3个文件,分别是: final.mdl(训练模型得到的模型文件) final.mat(用来特征转换) ...

  8. npm安装不成功的原因

    使用npm安装electron不成功的解决方法 使用npm安装electron不成功的解决方法 根据官网提供的electron的npm安装方法,使用下面的命令进行安装,结果不成功 npm instal ...

  9. c# 对List<T> 某字段排序,取TOP条数据

    //排序的对象里的字段数据准备 try { cmr.v4 = Double.Parse(cmr.v3) - Double.Parse(cmr.v2); } catch (Exception e) { ...

  10. SQL 基础笔记(三):约束

    个人笔记不保证正确. 数据类型是限制我们可以在表里存储什么数据的一种方法.不过,对于许多应用来说, 这种限制实在是太粗糙了.比如,一个包含产品价格的字段应该只接受正数. 但是没有哪种标准数据类型只接受 ...