Air-datepicker 日期选择器

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82848400 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82848400

air-datepicker 是一款基于 jQuery 的简易日期选择器

更多精彩

官网

Air Datepicker

引用

  1. 引入插件所需 css/js 文件
<link rel="stylesheet" type="text/css" href="plugins/air-datepicker/css/datepicker.min.css">
<script type="text/javascript" src="plugins/jquery.min.js"></script>
<script type="text/javascript" src="plugins/air-datepicker/js/datepicker.js"></script>
<script type="text/javascript" src="plugins/air-datepicker/js/i18n/datepicker.zh.js"></script>
  1. 定义一个 input 用户展现内容
    • data-language="zh" 表示插件使用中文
<input type="text" class="datepicker-input" data-language="zh">
  1. 调用插件初始化方法
$(function() {
    $(".datepicker-input").datepicker();
});

API

  1. classes 自定义 className
  2. inline 是否一直可见
    • false [default]
  3. language 指定 i18n 国际化语言
    • ru [default]
    • 可如上述在 input 中指定 data-language="zh"
    • 也可以在插件初始化方法中通过 language: zh 指定
  4. startDate 初始化显示日期
    • new Date() [default]
  5. firstDay 每周的开始时间
    • 0-6 表示星期天到星期六
    • 没有默认值,若不指定则根据引入的 i18n 规则决定,例如引入 zh ,则第一天为周一,引入 en ,则第一天为周日
  6. weekends 指定一组日期为周末
    • [6, 0] [default]
  7. dateFormat 日期格式
    • 没有默认值,若不指定则根据引入的 i18n 规则决定
  8. keyboardNav 是否允许键盘操作
    • true [default]
  9. position 日期选择器相对于输入框的显示位置
    • bottom left [default]
  10. offset 位置偏移值
    • 12 [default]
  11. view 默认视图
    • days [default]
    • 可选 days months years
  12. minView 最小视图
    • days [default]
    • 可选 days months years
  13. minDate 可被选择的最小日期
    • minDate: new Date() 表示今天之前的日期都不可被选中
  14. maxDate 可被选择的最大日期
  15. disableNavWhenOutOfRange 可选范围之外的日期是否禁止查看
    • true [default]
  16. multipleDates 是否可选择多个日期
    • false [default]
  17. multipleDatesSeparator 自定义多个日期之间的分隔符
    • , [default]
  18. range 允许选择日期范围
    • false [default]
    • 无法与 multipleDates 同时使用
  19. todayButton 是否显示[今天]按钮
    • false [default]
    • 点击按钮不会直接选择当前日期,只会跳转到当前日期所在的视图页
  20. clearButton 是否显示[清除]按钮
    • false [default]
  21. autoClose 选择日期后,自动关闭面板
    • false [default]
  22. timepicker 是否开启时间选择器
    • false [default]
  23. timeFormat 时间格式
    • 没有默认值,若不指定则根据引入的 i18n 规则决定
  24. minHours 小时数最小值
    • 0 [default]
    • 可选范围 0-23
  25. maxHours 小时数最大值
    • 23 [default]
    • 可选范围 0-23
  26. minMinutes 分钟数最小值
    • 0 [default]
    • 可选范围 0-59
  27. maxMinutes 分钟数最大值
    • 59 [default]
    • 可选范围 0-59
  28. hoursStep 小时的滑动间隔
    • 1 [default]
  29. minutesStep 分钟的滑动间隔
    • 1 [default]
目录
相关文章
|
iOS开发
uView的u-datetime-picker限制开始的年月日后ios显示不出来
uView的u-datetime-picker限制开始的年月日后ios显示不出来
317 0
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
4976 0
BootStrop datepicker 选择年月
BootStrop datepicker 选择年月
100 0
|
前端开发 Windows
[UWP]使用Picker实现一个简单的ColorPicker弹窗
原文:[UWP]使用Picker实现一个简单的ColorPicker弹窗 在上一篇博文《[UWP]使用Popup构建UWP Picker》中我们简单讲述了一下使用Popup构建适用于MVVM框架下的弹窗层组件Picker的过程。
1138 0
|
C# Windows
[UWP]实现Picker控件
原文:[UWP]实现Picker控件 1. 前言 在WPF中,很多打开下拉框(Popup或Flyout)选择一个结果值的控件,除了ComboBox等少数例外,这种控件都以-Picker做名称后缀。因为要打开关闭下拉框和计算下拉框的弹出位置, 这类控件实现起来还挺麻烦的。
856 0
|
Android开发 iOS开发
带农历日历的DatePicker控件!Xamarin控件开发小记
原文:带农历日历的DatePicker控件!Xamarin控件开发小记 闲来无事开发了个日期选择控件,感兴趣的同学前往: https://github.com/MatoApps/Mato.DatePicker Mato.
1734 0
|
C#
WPF 4 日期选择器(DatePicker)
原文:WPF 4 日期选择器(DatePicker)     前一篇《WPF 4 日历控件(Calendar)》 中我们对日历控件的使用方式有了基本了解,本篇将继续介绍WPF 4 中另一个新控件“日期选择器”(DatePicker)。
1692 0