知问前端——日历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) ...
随机推荐
- P1016 旅行家的预算
P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能行驶的距离D2 ...
- spring mvc 返回xml格式数据
1.问题 : 因为业务需要,需要发送xml格式的数据,使用spring mvc 自己解析,就不用费心去自己搞这些东西. 2.解决: 新建一个实体类,直接在实体类中添加注解即可,如下: @XmlRoot ...
- Android之内容提供者ContentProvider的总结
本文包含以下知识点: ContentProvider Uri 的介绍 ContentResolver: 监听ContentProvider的数据改变 一:ContentProvider部分 Conte ...
- Hyperledger04
代码 'use strict'; var Fabric_Client = require('fabric-client'); var path = require('path'); var util ...
- git 创建分支并提交到服务器对应的新分支
1.切换到源分支 git checkout test 2.在源分支的基础上创建新分支 git branch test1 3.提交到远程分支 git pull 会自动提示下面的命令 git pull - ...
- sed-awk命令详解
第2章 ***********sed***********. 1目 录 2.1 -------sed命令小结及小结图---- 1 2.2 -------第几行---------- 2 2.3 - ...
- JavaScript - Standard built-in objects
标准对象分类 Value Properties 以下全局属性返回一个简单的值:它们没有属性或者方法: Infinity NaN undefined null literal Function Prop ...
- ubuntu apache2配置，包括虚拟机配置
虚拟机设置好了之后,需要在/etc/hosts里面添加 127.0.0.1 www.baidu.com 跟在windows里hosts里配置是一样的
- c# log
public static void WriteMsg(string logName, string msg) { try { //string path = Path.Combine(". ...
- ssh问题_2
前一段时间配置hadoop集群环境,发现一个现象,教程中的命令形式是ssh hostname,当然这个hostname应该是在ssh发起者的hosts文件中和相应的IP对应:现在问题来了: 我用的是m ...