jQuery UI 日期选择器（Datepicker）使用总结

来源：互联网发布：ubuntu安装语言包编辑：程序博客网时间：2024/06/07 03:53

根据自己实际使用情况，本文简单介绍下jQuery UI的日期选择器（Datepicker）的使用实例，依次介绍以下三个功能：
1. 点击input文本框弹出时间选择框；
2. 点击右侧日历图标按钮弹出时间选择框；
3. 点击input文本框和日历图标都能弹出时间选择框。

点击input文本框弹出时间选择框

1.通过给元素绑定datepicker()事件触发日期选择器:$('#id').datepicker();

2.通过添加布尔值 changeMonth 和 changeYear 选项，显示月份和年份的下拉框，这样便于在大范围的时间跨度上导航：

changeMonth: true, //显示月份下拉框changeYear: true, //显示年份下拉框

3.通过添加选项dateFormat设置显示日期的格式：

dateFormat: 'yy-mm-dd', //如：2017-12-09dateFormat: 'mm/dd/yy', //如：12/09/2017dateFormat: 'd M, y', //如：9 Dec, 17dateFormat: 'd MM, y', //如：9 December, 17dateFormat: 'DD, d MM, yy', //如：Saturday, 9 December, 2017dateFormat: '&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy', //设置为任意自己想要的文本形式的，如：day 9 of December in the year 2017

4.通过 minDate 和 maxDate 选项限制可选择的日期范围：
① 限制可选择的开始日期为实际的日期：minDate: new Date('2017-10-01') 表示2017-10-01之前的日期不可选。
② 限制开始日期为与今天的一个数值偏移（-20）：maxDate: -20 表示从今天向后数超过20天的日期将不可选。
③ 限制开始日期为一个周期和单位的字符串（’+1M +10D’）：maxDate: "+1M +10D" 表示从今天向后数超过一个月零10天后的日期将不可选。可以使用’D’ 表示天，’W’ 表示周，’M’ 表示月，’Y’ 表示年。

源码示例如下：

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI 日期选择器</title><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css"><script src="//code.jquery.com/jquery-1.9.1.js"></script><script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script><link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"><style>    *{padding: 0;margin: 0;}    .date-wrapper{border-radius:5px;width: 158px;border:1px solid #ddd;height: 34px;position: relative;float: left;line-height: 34px;}    .date-inp{border-radius:5px;width: 100%;border: none;top: 0;left: 0;position: absolute;height: 34px;line-height: 34px;text-indent: 10px;color: #666666;font-size: 12px;}    .date-ic{right: -1px;top: -1px;z-index: 2; position: absolute;width: 34px;height: 36px;background: url("./images/dt-ic.png") no-repeat;}    .dt-wrapper{width: 765px;height: 510px;left: 50%;top: 50%;margin:-277px 0 0 -433px;position: fixed;padding: 21px 50px;background: #fff;border: 1px solid #ddd;}    .dt-wrapper img{vertical-align: middle;width: 765px;height: 510px;}    .dt-wrapper ul{height: 510px;position: absolute;}</style><script>  $(function() {    //点击开始时间选择框    $('#startDay').datepicker({        changeMonth: true, //显示月份下拉框        changeYear: true, //显示年份下拉框        dateFormat: 'yy-mm-dd', //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的        onSelect: function(dateText, inst) { //在选择时，可以根据自己需求需要加些判断            if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){                alert('开始时间不得选择早于2017.10.01的时间');                //inst.lastVal 记录的是上次修改的值,相对于本次来讲，即在点击选择日期之前，文本框里显示的日期                //在触发本事件时，input框里的日期已经被改变了，所以不满足条件时，需要重新写回原来的日期                $('#startDay').val(inst.lastVal);                return false;            }        }    });    //点击结束时间选择框    $('#endDay').datepicker({        changeMonth: true,        changeYear: true,        dateFormat: 'yy-mm-dd',        minDate: new Date('2017-10-01'),//限制可选择的开始日期为2017-10-01之后        maxDate: "-1D",//限制最大可选择日期为前一天的时间        onSelect: function(dateText, inst) { //在选择时，可以根据自己需要加些判断            var dateTextTime = new Date(dateText).getTime();            if(dateTextTime < new Date($("#startDay").val()).getTime()){                alert('截止时间不能小于开始时间');                $('#endDay').val(inst.lastVal);                return false;            }        }    });  });</script></head><body><div style="width:500px; height:34px; margin:20px;line-height:34px;">    <span style="float: left;font-size: 12px;color: #333;margin-right: 6px;">        <i style="padding-left: 20px;"></i>时间：    </span>    <div class="date-wrapper">        <!-- <i class="date-ic"></i> -->        <input type="text" class="date-inp" id="startDay" name="startDay" value="" autocomplete="off" readonly>    </div>    <span style="margin: 0 5px;float:left;">-</span>    <div class="date-wrapper">        <!-- <i class="date-ic"></i> -->        <input type="text" class="date-inp" id="endDay" name="endDay" value="" autocomplete="off" readonly>    </div></div></body></html>

实现效果如图：
这里写图片描述

这里写图片描述

点击右侧日历图标按钮弹出时间选择框

1.通过图表来显示 datepicker，需要设置以下三个选项实现：

showOn: "button", //通过按钮显示buttonImage: "./images/dt-ic.png", //设置按钮图片buttonImageOnly: true,

设置以上三个选项后，会在input文本框后面添加一个如下img标签：
<img class="ui-datepicker-trigger" src="./images/dt-ic.png" alt="..." title="...">
2.如果想要给按钮加上自己的样式，可以参照如下设置：$('.ui-datepicker-trigger').addClass('date-ic');表示给该图标新添加个类名为date-ic的样式。
3.还可以通过设置选项buttonText给该按钮添加标题，如设置buttonText: "startDay"后，就给图标加上了标题，如下：
<img class="ui-datepicker-trigger date-ic" src="./images/dt-ic.png" alt="startDay" title="startDay">
4.若设置选项buttonImageOnly为false：buttonImageOnly: false，则会生成一个包含img标签的button标签，如下：

<button type="button" class="ui-datepicker-trigger"><img src="./images/dt-ic.png" alt="startDay" title="startDay" class="date-ic"></button>

此时设置样式为：$('.ui-datepicker-trigger img').addClass('date-ic');

源码示例如下：

<script>//点击开始时间选择框$('#startDay').datepicker({    showOn: "button", //通过按钮显示    buttonImage: "./images/dt-ic.png", //设置按钮图片    buttonImageOnly: true, //buttonImageOnly为false时只生成一个img标签作为按钮    buttonText: "startDay",    changeMonth: true, //显示月份下拉框    changeYear: true, //显示年份下拉框    dateFormat: 'yy-mm-dd', //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的    onSelect: function(dateText, inst) { //在选择时，可以根据自己需要加些判断        if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){            alert('开始时间不得选择早于2017.10.01的时间');            //inst.lastVal 记录的是上次修改的值,相对于本次来讲，即在点击选择日期之前，文本框里显示的日期            //在触发本事件时，input框里的日期已经被改变了，所以不满足条件时，需要重新写回原来的日期            $('#startDay').val(inst.lastVal);            return false;        }    }});//给按钮添加样式$('.ui-datepicker-trigger').addClass('date-ic');//$('.ui-datepicker-trigger img').addClass('date-ic');</script>

实现效果如图：
这里写图片描述

这里写图片描述

点击input文本框和日历图标都能弹出时间选择框

添加一个按钮标签，比如我添加的是<i class="date-ic"></i>，如下：

<div class="date-wrapper">    <input type="text" class="date-inp" id="startDay" name="startDay" value="" autocomplete="off" readonly>    <i class="date-ic"></i></div>

然后，给input文本框绑定datepicker，点击input文本框时弹出日期选择框；给i标签绑定onclick事件，点击时触发函数：$('#startDay').datepicker('show');：

<script>  $(function() {    //点击开始时间选择框    $('#startDay').datepicker({        changeMonth: true, //显示月份下拉框        changeYear: true, //显示年份下拉框        dateFormat: 'yy-mm-dd', //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的        onSelect: function(dateText, inst) { //在选择时，可以根据自己需要加些判断            if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){                alert('开始时间不得选择早于2017.10.01的时间');                //inst.lastVal 记录的是上次修改的值,相对于本次来讲，即在点击选择日期之前，文本框里显示的日期                //在触发本事件时，input框里的日期已经被改变了，所以不满足条件时，需要重新写回原来的日期                $('#startDay').val(inst.lastVal);                return false;            }        }    });    //点击时间选择框的按钮    $('#startDay').siblings('i').eq(0).click(function () {       $('#startDay').datepicker('show');    });  });</script>

实现效果如图：
这里写图片描述

这里写图片描述

阅读全文

0 0