Minimal Clean Data Range Picker Plugin With jQuery

Minimal Clean Data Range Picker Plugin With jQuery

A simple, lightweight jQuery plugin that helps you create a nice clean, fully configurable data range picker for hotel booking web app.

1. Import jQuery JavaScript library and the jQuery date range picker plugin's files into the html file.

<link href="jquery.daterangepicker.css" rel="stylesheet">
<script src="" 
<script src="jquery.daterangepicker.js"></script>

2. Create the html for the date range picker.

<div id="date_range_picker" class="date_range_picker">
  <div class="values">
      <div class="value date_at">
          <span class="date_at"></span>
          <input id="date_at" class="date_at" type="hidden" />
      <div class="to"></div>
      <div class="value date_to">
          <span class="date_to"></span>
          <input id="date_to" class="date_to" type="hidden" />
      <div class="clear"></div>
  <div class="calendar">
      <div class="button button-prev"></div>
      <div class="button button-next"></div>
      <div class="container"></div>

3. Enable the date range picker and set the pre-selected dates.

  container: '#date_range_picker',
  inputActive: 'date_at',
  date_at: '2018-01-03',
  date_to: '2018-02-12'

4. i18n.

  locale: 'en-US',
  l: {
      close: "Close",
      at: "Check-in",
      to: "Check-out",
      days: ["MON","TUE","WED","THUR","FRI","SAT","SUN"],
      months: ["January","February","March","April","May","June","July","August","September","October","November","December"],

This awesome jQuery plugin is developed by vdekh. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 25.11.2017
  • Source