码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-05-03 12:29:03      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:

   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>
View Code

   style.css:

技术分享
body {
    margin: 40px 0 0 0;
    padding: 0;
    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:0;
}
#header .header_main {
    width: 800px;
    height: 40px;
    margin: 0 auto;
}
#header .header_main h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
    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: 0;
}
#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;
}
View Code

   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(三)

标签:

原文地址:http://www.cnblogs.com/yerenyuan/p/5454328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!