知问前端——日历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) ...
随机推荐
- 一次和别人争吵一个按钮，点击后显示导航；再点击不显示的效果，是否一定以及必须用js?
事情经过是这样的,我们组一个说话很喜欢用一定,肯定的哥们,吃午饭的时候拿了自己做的一个UI库,头部有一个按钮 点击展开,再次点击收缩,他意思说一个按钮无法记录点击状态,必须使用js.然后我看了一眼,心 ...
- cachel-control
nodejs: res.set('Cache-Control', 'public, max-age=31557600'); express全局设置: app.use(express.sta ...
- json 处理日期格式
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8") private Date createT ...
- Java Set集合(HashSet、TreeSet)
什么是HashSet?操作过程是怎么样的? 1.HashSet底层实际上是一个HashMap,HashMap底层采用了哈希表数据结构 2.哈希表又叫做散列表,哈希表底层是一个数组,这个数组中每一个元素 ...
- 使用JDK的keytool生成Android签名证书
生成证书:keytool -genkey -alias [yourapp] -keyalg RSA -validity 20000 -keystore [yourapp].keystore 输入key ...
- Drools 7.4.1.Final参考手册（十四）集成Spring
集成Spring Drools 6.0重要变更 Drools Spring集成经历了与Drools 6.0的变化完全一致的改造. 以下是一些主要的变化: T*推荐的Drools Spring的前缀已经 ...
- linux备忘录-系统服务daemon
服务(daemon)及其分类 Linux中的服务被称为daemon(daemon是守护神,恶鬼的意思哦).这些daemon会常驻在内存当中,从而对我们的系统和任务等进行一些辅助性的工作.实际上,dae ...
- winform构造函数和load事件
有些地方,有些代码写在构造函数里面运行不成功: 但是加在load事件里面运行成功: 有时候,反则反之.
- 阿里云服务器 linux下载 jdk
直接从本地下载包上传比较慢.直接在服务器上下载安装包: 1.进入orcle官网; 2.选择需要下载的版本,下载需要同意orcle协议, 3.点击下载,获取到下载请求的cookie, 复制所有cooki ...
- HashMap和Hashtable的区别（转载）
转载声明:转载自原文http://www.importnew.com/7010.html HashMap和Hashtable的比较是Java面试中的常见问题,用来考验程序员是否能够正确使用集合类以及是 ...