日期范围选择插件lightPick.js

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()