知问前端——日历UI(三)
datepicker日期选择选项
| 属性 | 默认值/类型 | 说明 |
| minDate | 无/对象、字符串或数值 | 日历中可以选择的最小日期 |
| maxDate | 无/对象、字符串或数值 | 日历中可以选择的最大日期 |
| defaultDate | 当天/日期 | 预设默认选定日期。没有指定，则是当天 |
| yearRange | 无/日期 | 设置下拉菜单年份的区间。比如：1950:2020 |
| hideIfNoPrevNext | false/字符串 | 设置为true，如果上一月和下一月不存在，则隐藏按钮 |
| gotoCurrent | false/布尔值 | 如果为true，点击今日且回车后选择的是当前选定的日期，而不是今日 |
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;
}
.a {
font-size: 30px;
}
#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({
showButtonPanel:true,
closeText:"关闭",
currentText:"今天",
//日期的限制优先级，min和max最高
maxDate:0, //限制为只能选择今天(today)
//minDate:-8000, //限制为可以选择今天之前的8000天(约莫20年的样子)，但是年份有另外一个属性进行了限制
hideIfNoPrevNext:true,
//而maxDate和minDate只是限制日期，而年份的限制的优先级没有另外一个高
yearRange:"1950:2020",
//defaultDate:-1, //回车，今天之前的一天被选中
gotoCurrent:false,
});
选择日期的字符串表示方法
| 属性 | 说明 |
| x | 当前日期之后的x天（其中x范围从1到n）比如：1，2 |
| -x | 当前日期之前的x天（其中x范围从1到n）比如：-1，-2 |
| xm | 当前日期之后的x个月（其中x范围从1到n）比如：1m，2m |
| -xm | 当前日期之前的x个月（其中x范围从1到n）比如：-1m，-2m |
| xw | 当前日期之后的x周（其中x范围从1到n）比如：1w，2w |
| -xw | 当前日期之前的x周（其中x范围从1到n）比如：-1w，2w |
datepicker视觉效果
| 属性 | 默认值/类型 | 说明 |
| showAnim | fadeIn/字符串 | 设置false，无效果。默认效果为：fadeIn |
| duration | 300/数值 | 日历显示或消失时的持续时间，单位毫秒 |
datepicker可选特效
| 特效名称 | 说明 |
| blind | 日历从顶部显示或消失 |
| bounce | 日历断断续续地显示或消失，垂直运动 |
| clip | 日历从中心垂直地显示或消失 |
| slide | 日历从左边显示或消失 |
| drop | 日历从左边显示或消失，有透明度变化 |
| fold | 日历从左上角显示或消失 |
| highlight | 日历显示或消失，伴随着透明度和背景色的变化 |
| puff | 日历从中心开始缩放。显示时“收缩” ，消失时“生长” |
| scale | 日历从中心开始缩放。显示时“生长” ，消失时“收缩” |
| pulsate | 日历以闪烁形式显示或消失 |
| fadeIn | 日历显示或消失时伴随透明度变化 |
datepicker()方法的事件
除了属性设置外，datepicker()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。
datepicker事件选项
| 事件名 | 说明 |
| beforeShow | 日历显示之前会被调用 |
| beforeShowDay | beforeShowDay(date)方法在显示日历中的每个日期时会被调用(date参数是一个Date类对象)。该方法必须返回一个数组来指定每个日期的信息： 1.该日期是否可以被选择 （数组的第一项，为true或false） 2.该日期单元格上使用的CSS类 3.该日期单元格上显示的字符串提示信息 |
| onChangeMonthYear | onChangeMonthYear(year, month,inst)方法在日历中显示的月份或年份改变时会被调用。或者changeMonth或changeYear为true时，下拉改变时也会触发。Year：当前的年，month：当年的月，inst是一个对象，可以调用一些属性获取值 |
| onClose | onClose(dateText, inst)方法在日历被关闭的时候调用。dateText是当时选中的日期字符串，inst是一个对象，可以调用一些属性获取值 |
| onSelect | onSelect(dateText, inst)方法在选择日历的日期时被调用。dateText是当时选中的日期字符串，inst是一个对象，可以调用一些属性获取值 |
style.css中加入如下代码：
.a {
font-size: 30px;
}
jQuery代码：
$('#date').datepicker({
beforeShow:function() {
alert("日历显示之前被调用！");
},
beforeShowDay:function(date) {
//alert(date.getFullYear());
if(date.getDate() == 1) {
return [false,'a','不能选择1号'];
} else {
return [true];
}
},
onChangeMonthYear:function(year,month,inst) {
//alert("日历中年份或月份改变时激活！");
//alert(year);
//alert(month);
alert(inst.id); //date
},
onSelect:function(dateText,inst) {
alert(dateText);
},
onClose:function(dateText,inst) {
alert(dateText);
}
});
注意：jQuery UI只允许使用选项中定义的事件。目前还不可以试用on()方法来管理。
datepicker('action',param)方法
| 方法 | 返回值 | 说明 |
| datepicker('show') | jQuery对象 | 显示日历 |
| datepicker('hide') | jQuery对象 | 隐藏日历 |
| datepicker('getDate') | jQuery对象 | 获取当前选定日历 |
| datepicker('setDate',date) | jQuery对象 | 设置当前选定日历 |
| datepicker('destroy') | jQuery对象 | 删除日历，直接阻断 |
| datepicker('widget') | jQuery对象 | 获取日历的jQuery对象 |
| datepicker('isDisabled') | jQuery对象 | 获取日历是否禁用 |
| datepicker('refresh') | jQuery对象 | 刷新一下日历 |
| datepicker('option', param) | 一般值 | 获取options属性的值 |
| datepicker('option', param,value) | jQuery对象 | 设置options属性的值 |
只看两个方法：
alert($("#date").datepicker("getDate").getFullYear());
$("#date").datepicker("setDate","1992-10-06");
知问前端——日历UI(三)的更多相关文章
- 第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 知问前端——日历UI(二)
datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...
- 知问前端——日历UI(一)
日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...
- 第一百七十八节，jQuery-UI，知问前端--对话框 UI
jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...
- 知问前端——对话框UI(一)
对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...
- 知问前端——工具提示UI
工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...
- 知问前端——按钮UI
按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...
- 知问前端——对话框UI(二)
dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...
- 第一百七十九节，jQuery-UI，知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
随机推荐
- Spring MVC: 环境搭建并实现简易的HelloWorld
第一步:使用配置Tomcat服务器的Eclipse新建一个名为“TestSpringMVC”的web项目 第二步:将所使用的jar包复制到WEB-INF/lib目录下 第三步:在web.xml中配置D ...
- Python的re模块的常用方法
一.re的match与search方法 1.re.match方法 re.match 尝试从字符串的起始位置匹配一个模式,匹配成功re.match方法返回一个匹配的对象,如果不是起始位置匹配成功的话,m ...
- 【jQuery】 js 对象
[jQuery] js 对象 一. 创建对象的三种方式 <script> var v1 = new Object(); v1.name = "name1"; v1.a ...
- 分分钟搞定redis
随着科技不断的发展,使用到的技术也是更新换代,大家都知道当一个程序用户量上来之后,必然是要做数据缓存的,那么如何去实现的呢,在之前我们一直使用memcache去做数据缓存,现在众所周知主流的缓存技术已 ...
- 时屏蔽ios和android下点击元素时出现的阴影
-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(255,255,255,0)
- 「暑期训练」「Brute Force」 Money Transfers （CFR353D2C）
题目 分析 这个Rnd353真是神仙题层出不穷啊,大力脑筋急转弯- - 不过问题也在我思维江化上.思考任何一种算法都得有一个“锚点”,就是说最笨的方法怎么办.为什么要这么思考,因为这样思考最符合我们的 ...
- 关于Scala文件操作中出现的问题
在各种项目中,我们常常需要用到文件操作,笔者在近期的项目中遇到了一个与文件操作相关的问题. 在代码实现的过程中,笔者首先定义了一个文件路径:def PATH = "/a/b/c.txt&qu ...
- PyQt5图像全屏显示
Windows装这个:https://pypi.python.org/pypi/PyQt5Ubuntu输入这个:sudo apt-get install python3-pyqt5 或者直接输入:pi ...
- D - 小木棒
D - 小木棒 Time Limit: 1000/1000MS (C++/Others) Memory Limit: 65536/65536KB (C++/Others) Problem Descri ...
- Activiti工作流（一）——Activiti Diagram
工作流解决在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现某个预期的业务目标,或者促使此目标的实现. 使用Eclipse开发,需要安排工作流插件,详情见下面. Name ...