日期范围选择插件lightPick.js

日期范围选择插件lightPick.js源码下载

看看谁在用

查看文件结构

文件大小:0.08M

资源分类: 插件-时间

更新时间: 2022-04-13

lightPick.js是一个JavaScript库,允许您创建一个灵活的、可定制的、多语言、用户友好的日期范围选择器组件使用moment.js。直接汉化moment即可。

初始化组件
const myPicker = new lightPick({
      field: document.getElementById('demo'),
      singleDate: false
});
设置语言
const myPicker = new lightPick({
      field: document.getElementById('demo'),
      singleDate: false,
      lang: 'en',
});
更多配置参数
const myPicker = new lightPick({
      // target form field
      field: null,
      // end of date range will set here
      secondField: null,
      // first day of the week
      // 1 = Monday
      firstDay: 1,
      // parent element
      parentEl: 'body',
      // language
      lang: 'auto',
      // date format
      format: 'DD/MM/YYYY',
      // separator character
      separator: ' - ',
      // number of months to display
      numberOfMonths: 1,
      // number of columns to display
      numberOfColumns: 2,
      // single date mode
      singleDate: true,
      
      // auto close after selection
      autoclose: true,
      // Repick start/end instead of new range. 
      repick: false,
      // start/end dates
      startDate: null,
      endDate: null,
      // min/max dates
      minDate: null,
      maxDate: null,
      // an array of disabled dates
      disableDates: null,
      // selects second date before/after the first selected date
      selectForward: false,
      selectBackward: false,
      // min/max days
      minDays: null,
      maxDays: null,
      // shows tooltip
      hoveringTooltip: true,
      // hide on click
      hideOnBodyClick: true,
      // shows footer
      footer: false,
      // disabled dates in the range
      disabledDatesInRange: true,
      // 'left' or 'right', 'top' or 'bottom', and 'auto'
      orientation: 'auto',
      // disable Saturday and Sunday.
      disableWeekends: false,
      // inline mode
      inline: false,
      // long (e.g., Thursday), short (e.g., Thu), narrow (e.g., T).
      weekdayStyle: 'short',
      dropdowns: {
        years: {
          min: 1900,
          max: null,
        },
        months: true,
      },
      // localization
      locale: {
        buttons: {
          prev: '←',
          next: '→',
          close: '×',
          reset: 'Reset',
          apply: 'Apply',
        },
        tooltip: {
          one: 'day',
          other: 'days',
        },
        tooltipOnDisabled: null,
      },
      // callbacks
      onSelect: null,
      onOpen: null,
      onClose: null
});
API
// sets a date
myPicker.setDate(date)
// gets current date
myPicker.getDate()
// gets current start of date range
myPicker.getStartDate()
// gets current end of date range
myPicker.getEndDate()
// returns clone dates now
myPicker.getX()
// shows date range picker
myPicker.show()
// hides date range picker
myPicker.hide()
// destroys date range picker
myPicker.destroy()

日期范围选择插件lightPick.js

正在加载文件目录...

也许你还喜欢

  1. Js日期选择器可选范围
  2. 日期选择Js插件
  3. 带事件的日历插件TavoCalendar.js
  4. jquery-datePicker日期范围选择插件
  5. 两个日期范围选择JS插件
  6. jQuery+CSS3圆形倒计时
纯css进度圆圈连线
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备20015882号-5
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器