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

最新推荐文章于 2024-05-11 09:56:24 发布

xqian诗一

最新推荐文章于 2024-05-11 09:56:24 发布

阅读量1.3w

点赞数 4

分类专栏： js 文章标签：日期插件日历 jquery ui datepicker

本文链接：https://blog.csdn.net/huohuanyu1/article/details/78760860

版权

根据自己实际使用情况，本文简单介绍下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-09
dateFormat: 'mm/dd/yy', //如：12/09/2017
dateFormat: 'd M, y', //如：9 Dec, 17
dateFormat: 'd MM, y', //如：9 December, 17
dateFormat: 'DD, d MM, yy', //如：Saturday, 9 December, 2017
dateFormat: '&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:

最低0.47元/天解锁文章

xqian诗一

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI 日期选择器（Datepicker）使用总结

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

扫一扫