知问前端——日历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) ...

随机推荐

7 tftp
1. TFTP协议介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户端与服务器之间进行简单文件传输的协议特点: ...
洛谷P1090 合并果子
合并果子题目链接这个只能用于结构体中 struct item { int val; friend bool operator < (item a,item b) { return a.val ...
使用git创建分支
Git大法好--3.Git分支本地操作详解这时已经切换到了dingBranch分支下面了,在项目文件夹下添加一个dingBranchtest.txt文件,然后提交到本地仓库和远程仓库: git ad ...
【翻译】介绍 ASP.NET Core 中的 Razor Pages
介绍 ASP.NET Core 中的 Razor Pages 原文地址:Introduction to Razor Pages in ASP.NET Core 译文地址:介绍 asp. ...
在C/C++程序中打印当前函数调用栈
前几天帮同事跟踪的一个程序莫名退出,没有core dump(当然ulimit是打开的)的问题.我们知道,正常情况下,如果程序因为某种异常条件退出的话,应该会产生core dump,而如果程序正常退出的 ...
To Chromium之浏览器外框UI
先不去管那些webkit,V8 engine, Parser, security,IPC... 先来看看Chromium的外框UI是那些code负责的,如果自己可以定制化一下,应该蛮好玩的. TBD. ...
Intellij IDEA 系统路径配置
在使用IDEA启动Tomcat的时候,会读取系统路径,默认路径可能不是我们想要的,可以修改 C:\MyPrograms\IntelliJ IDEA 14.0.1\bin\idea.properties ...
thrift的lua
thrift的lua实现最近要进行系统升级,后台的数据是根据城市区分的.担心新系统的稳定性及新数据的准确性,计划部分城市采用新接口.接口的入参里没有城市信息,只有经纬度坐标,需要调用一个thrift ...
附录A培训实习生-面向对象基础类和实例(1)
对象是一个自包含的实体,用一组可识别的特性和行为来标识. 面向对象编程,Object-Oriented Programming,其实就是针对对象进行编程的意思. 类就是具有相同属性和功能的对象的抽象的 ...
P1404 平均数
题目描述给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式输入格式: N+1行, 第一行两个整数n和m 接下来n行,每行一个整数a[ ...

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

知问前端——日历UI(三)的更多相关文章

随机推荐

热门专题