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

Category: Date & Time , Javascript | July 12, 2018
Author: wakirin
Views Total: 345
Official Page: Go to website
Last Update: July 12, 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',

      // shows tooltip on hover
      hoveringTooltip: true,   

      // custom navigation buttons
      locale: {
        buttons: {
          prev: '&lt;',
          next: '&gt;',
          close: '&times;',
        },
       tooltip: ['day', 'days'],
      }

      // date format
      format: 'DD/MM/YYYY',

      // separator character
      separator: ' - ',

      // number of months to display
      numberOfMonths: 1,

      // number of columns to display
      numberOfColumns: 2,
      
      // 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

});

Available event handlers.

const myPicker = new lightPick({

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

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

      onClose: 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.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