Flexible Date Range Picker With Moment.js – lightPick.js

Category: Date & Time , Javascript | September 11, 2018
Author: wakirin
Views Total: 1,224
Official Page: Go to website
Last Update: September 11, 2018
License: MIT

Preview:

Flexible Date Range Picker With Moment.js – lightPick.js

Description:

lightPick.js is a JavaScript library to lets you create a flexible, customizable, multi-language, user-friendly date range picker component using moment.js.

More features:

  • Also can be used as a date picker.
  • Custom date format.
  • Allows you to set min/max dates.
  • Useful event handlers and API methods.

How to use it:

Include the necessary moment.js and jQuery lightPick.js libraries at the bottom of the webpage.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script src="lightpick.js"></script>

Create a standard input field the date range picker should attach to.

<input type="text" id="demo">

Initialize the date range picker on the input field and done.

const myPicker = new lightPick({
      field: document.getElementById('demo'),
      singleDate: false
});

To initialize the library as a single date picker, set the singleDate options to true.

const myPicker = new lightPick({
      field: document.getElementById('demo'),
      singleDate: true // default: true
});

Sometimes you might need to display the date range using 2 input fields:

<input type="text" id="start">
<input type="text" id="end">
const myPicker = new lightPick({
      field: document.getElementById('start'),
      secondField: document.getElementById('end')
});

Specify the language you want to use. By default, the plugin will detect and use the language based on your browser language.

const myPicker = new lightPick({
      field: document.getElementById('demo'),
      singleDate: false,
      lang: 'en',
});

More configuration options with default values.

const myPicker = new lightPick({

      // 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,

      disabledDatesInRange: true,
      tooltipNights: false,

      // localization
      locale: {
        buttons: {
            prev: '←',
            next: '→',
            close: '×',
            reset: 'Reset',
            apply: 'Apply',
        },
        tooltip: ['day', 'days'],
      },

      // callbacks
      onSelect: null,
      onOpen: null,
      onClose: null

});

Available event handlers.

const myPicker = new lightPick({

      onSelect: function(start, end){
        // ...
      },

      onOpen:  function(start, end){
        // ...
      },

      onClose: function(start, end){
        // ...
      },

      onError: function(start, end){
        // ...
      }

});

API methods.

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

// shows date range picker
myPicker.show()

// hides date range picker
myPicker.hide()

// destroys date range picker
myPicker.destroy()

Changelog:

v1.2.5 (09/11/2018)

  • Improve pluralize.

v1.2.4 (08/27/2018)

  • Tooltip on disabled days.

v1.2.3 (08/24/2018)

  • Removed extra div days in next month.
  • new callback: onError Calling when disabledDatesInRange is set to false and user is select range includes disabled dates.
  • minor bug fixes

v1.2.2 (08/23/2018)

  • new options: disabledDatesInRange, tooltipNights

v1.1.2 (08/22/2018)

  • new option: footer

v1.1.1 (08/16/2018)

  • Fixed: On select method invoked when Lightpick instance is created

v1.1.0 (07/20/2018)

  • drop support IE
  • now header (month name) is clickable for fast change month

v1.0.9 (07/19/2018)

  • fixed bug

v1.0.6 (07/12/2018)

  • Improves styling

v1.0.5 (07/12/2018)

  • Bugfix: When a parentEl is provided in options, the position is incorrect

v1.0.4 (07/12/2018)

  • Improves CSS

v1.0.3 (07/09/2018)

  • Fixed: Can always pick a one-day-range

v1.0.0 (06/22/2018)

  • Constructor name to begin with a capital letter: lightPick to Lightpick

v0.0.6 (06/20/2018)

  • new option: repick

v0.0.5 (06/19/2018)

  • hidden on start

v0.0.4 (06/18/2018)

  • Added tooltip
  • Option buttons moved to locale

Leave a Reply