air-datepicker -- 日历选择器

最新推荐文章于 2024-09-06 11:23:02 发布

Never Yu

最新推荐文章于 2024-09-06 11:23:02 发布

阅读量4.9k

点赞数

分类专栏：前端文章标签：日历 datepicker 插件

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/csdn_yudong/article/details/53838929

版权

前端专栏收录该内容

181 篇文章 16 订阅

订阅专栏

用 air-datepicker 实现的日历选择器

air-datepicker 是一款跨浏览器轻量级的 jquery 日期选择器插件。该日期选择器使用es5和css-flexbox来制作，可以在所有的现代浏览器中正常工作。

效果图如下:

安装
可以通过bower来安装Air Datepicker插件

bower i --save air-datepicker

可以通过npm来安装Air Datepicker插件

npm i --save air-datepicker

使用方法
使用该日期选择器插件需要引入 jquery.min.js ，datepicker.min.js，datepicker.min.css 文件。
如果你希望日历选择器是英文的，还需要引入:
datepicker.en.js
如果你希望日历选择器是中文的，还需要引入:
datepicker.zh.js

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>air-datepicker</title>
    <link rel="stylesheet" href="./dist/css/datepicker.min.css">
    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="./dist/js/datepicker.min.js"></script>
    <script src="./dist/js/i18n/datepicker.en.js"></script>
</head>
<body style="padding: 100px;">
    <input type="text" id="test-1">
    <script>
        $(document).ready(function(){
            $("#test-1").datepicker({
                language: 'en'
            });
        }); 
    </script>
</body>
</html>

配置参数

classes : 类型 : string ; 默认值 : ""。日期选择器的扩展class类。
inline : 类型 : Boolean ; 默认值 : false ; 如果设置为true。那么日期选择器将一直可见。
language : 类型 : string|object ; 默认值 : "ru"。日期选择器的语言。如果传入的是字符串，会在Datepicker.language对象中查找语言，如果传入的是对象，则直接在对象中查找。
startDate : 类型 : Date ; 默认值 : new Date()。初始化时显示的日期。
firstDay : 类型 : number ; 默认值 : ""。一周的哪一天，可能值从0-6,0表示星期天，6表示星期六。
weekends : 类型 : array ; 默认值 : [6,0]。作为周末的一组日期。class .-weekend- 将会被使用到相应的单元中，默认星期六和星期天。
dateFormat : 类型 : string ; 默认值 : ""。日期格式。默认使用当前本地日期格式。
@ : 毫秒时间。
d : 天数。
dd : 前面带0的天数。
D : 简写的天数。
DD : 天数的全称。
m : 月份数值。
mm : 前面带0的月份数值。
M : 简写的月份。
MM : 月份的全称。
yy : 2个数字的年份。
yyyy : 4个数字的年份。
yyyy1 : 包含当前年份的十年的第一年。
yyyy2 : 包含当前年份的十年的最后一年。
altField : 类型 : string|jQuery ; 默认值 : ""。输入框的替换文本，使用altFieldDateFormat来格式化日期。
altFieldDateFormat : 类型 : string ; 默认值 : "@"。替换文本的日期格式。
toggleSelected : 类型 : boolean ; 默认值 : true。如果为true，那么点击在相应单元中的时候将移除选择。
keyboardNav : 类型 : boolean ; 默认值 : true。如果为true则可以使用键盘来对日期选择器进行导航。
键盘快捷键如下:
    Ctrl + → | ↑:将月份向前移动。
    Ctrl + ← | ↓:将月份向后移动。
    Shift + → | ↑:将年份向前移动。
    Shift + ← | ↓:将年份向后移动。
    Alt + → | ↑:向前移动10年。
    Alt + ← | ↓:向后移动10年。
    Ctrl + Shift + ↑:移动到下一个视图。
    Esc:隐藏日期选择器。

position : 类型 : string ; 默认值 : "bottom left"。日期选择器相对于输入框的位置。
offset : 类型 : number ; 默认值 : 12。位置偏移值。
view : 类型 : string ; 默认值 : "days"。日期选择器视图。可选值有:
days - display days of one month
months - display months of one year
years - display years of one decade
minView : 类型 : string ; 默认值 : "days"。最小的日期选择器视图。在该视图上选择一个单元格将不会渲染下一个视图，而是直接激活它。
showOtherMonths : 类型 : boolean ; 默认值 : true。如果设置为true，其它月份的天数将可见。
selectOtherMonths : 类型 : boolean ; 默认值 : true。如果设置为true，那么其它月份的天数可以被选择。
moveToOtherMonthsOnSelect : 类型 : beelean ; 默认值 : true。如果设置为true，那么选择其它月份的天数时，将移动到该月份。
showOtherYears : 类型 : boolean ; 默认值 : true。如果设置为true，在10年中将可见其它年份。
selectOtherYears : 类型 : beelean ; 默认值 : true。如果设置为true，在10年中将可选择其它年份。
moveToOtherYearsOnSelect : 类型 : boolean ; 默认值 : true。如果设置为true。在选择其它年份时将移动到该年份。

minDate:类型:Date；默认值:""。选择的最小日期，所有在该日期之前的日期都可以被激活。
maxDate:类型:Date；默认值:""。选择的最打日期，所有在该日期之后的日期都不可以被选择。
disableNavWhenOutOfRange:类型:boolean；默认值:true。如果设置为true，那么在小于最小日期或大于最大日期的某个日期，导航按钮将不可用。
multipleDates:类型:boolean|number；默认值:false。如果设置为true，可以选择多个日期。
multipleDatesSeparator:类型:string；默认值:","。多个日期之间的分割符。
range:类型:boolean；默认值:false。设置为true可以选择一个日期范围。
todayButton:类型:boolean；默认值:false。设置为true时，"Today"按钮将可见。
clearButton:类型:boolean；默认值:false。设置为true时，"Clear"按钮将可见。
showEvent:类型:string；默认值:"focus"。显示日期选择器的类型。
autoClose:类型:boolean；默认值:false。如果设置为true，在选择一个日期后，日期选择器将关闭。
prevHtml:类型:string；默认值:<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>。"next"按钮的标签内容。
nextHtml:类型:string；默认值:<svg><path d="M 14,12 l -5,5 l 5,5"></path></svg>。"prev"按钮的标签内容。

下面看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>air-datepicker</title>
    <link rel="stylesheet" href="./dist/css/datepicker.min.css">
    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="./dist/js/datepicker.min.js"></script>
    <script src="./dist/js/i18n/datepicker.en.js"></script>
    <style>
        .my {
            border: 2px solid red;
        }
    </style>
</head>
<body style="padding: 100px;">
    <input type="text" id="test-1">
    <script>
        $(document).ready(function(){
            var disabledDays = [0,6];
            $("#test-1").datepicker({
                language: "en",
                minDate: new Date(),
                range: true,
                toggleSelected: false,
                multipleDatesSeparator: " - ",
                onRenderCell: function(date,cellType) {
                    if(cellType == 'day') {
                        var day = date.getDay();
                        var isDisabled = disabledDays.indexOf(day) != -1;
                        return {
                            disabled: isDisabled
                        }
                    }
                }
            });
        }); 
    </script>
</body>
</html>

关于该日期选择器插件更多详细信息请参考： http://t1m0n.name/air-datepicker/docs/

写在最后：约定优于配置——-软件开发的简约原则.

——————————– (完)————————————–

我的
个人网站：https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博：http://weibo.com/Neveryu

更多学习资源请关注我的新浪微博….

width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">