知问前端——日历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) ...
随机推荐
- abtest-system后台系统设计与搭建
本文来自网易云社区 作者:刘颂 1 项目背景: 2017年5月:客户端提出增加https&dns以及双cdn业务功能 后台配合实现使用disconf配置 针对不同的域名或者请求配置不同的htt ...
- C#3DES加密了解一下
最近一个项目中,因为服务端是用的java开发的,客户端是用的C#,由于通信部分采用到了3DES加密,所以做个记录,以备以后需要的时候直接用. 这是对方(java)的加密算法,和网上流传的代码也差不多( ...
- 虚拟现实-VR-UE4-编辑自定义Character-上下左右移动-旋转
在上一片文章中,我创建了一个自定义的Character,但是只是有一行log显示,我使用了自己的Character,不能有任何操作,这里,我将记录我修改我的Character的过程 万事第一步,打开工 ...
- Qt 飞机仪表显示
使用Qt简单谢了一个飞机的一小部分仪表,还没有写完,目前只写了一个界面,不过思想应该是一样的. 效果图如下 其中主要由转速表,和下面的部分数字显示构成 转速表代码 .h文件 #ifndef CONTR ...
- 在测试时用到的一些mysql的小技巧（持续更新）
经常使用的快捷键: 1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的sql语句 5.ctrl+shift+r ...
- CSP201409-1：相邻数对
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...
- [Binary Search] Leetcode 35, 74
35. Search Insert Position Description Given a sorted array and a target value, return the index if ...
- DFS（2）——hdu1241Oil Deposits
一.题目回顾 题目链接:Oil Deposits 题意:给你一块网格,网格被分为面积相等的地块,这些地块中标记'@'的是油田,标记'*'的不是油田.已知一块油田与它上下左右以及对角线的油田同属一片油区 ...
- asp.net文件上传进度条研究
文章:asp.net 文件上传进度条实现代码
- nodejs安装错误
network错误: npm ERR! network tunneling socket could not be established, cause=connect ECONNREFUSED 12 ...