A jQuery plugin that allows user to select a date range

jQuery Date Range Picker Plugin jQuery Date Range Picker is a jQuery plugin that allows a user to select a date range. Requires jQuery 1.7+, Moment 2.8.1+ Supports IE7+, Firefox, Chrome, Safari and other standard HTML5

Information

Category: JavaScript / Calendar
Watchers: 55
Star: 1.1k
Fork: 592
Last update: Jun 6, 2023

Resource links

http://jszen.com/

https://github.com/longbill/jquery-date-range-picker

jQuery Date Range Picker Plugin

jQuery Date Range Picker is a jQuery plugin that allows a user to select a date range.

Requires jQuery 1.7+, Moment 2.8.1+
Supports IE7+, Firefox, Chrome, Safari and other standard HTML5 browsers
Supports multi-language
Fully CSS styled

Documentation & Demo

Documentation and demonstrations can be found here: https://longbill.github.io/jquery-date-range-picker

Setup on development machine

Install node.js Ubuntu/Mac , Windows
Update npm to latest version

npm install -g npm

Install gulp v3.9.1 (global install)

npm install -g [email protected]

Clone this project

git clone https://github.com/longbill/jquery-date-range-picker.git
cd jquery-date-range-picker

Install local dependencies

npm install

Generate new minified (dist) files by reading from the src folder

gulp

Build and tag a new version using npm version command according to Semantic Versioning best practices.

npm version <patch|minor|major>

Change log

See changelog

License

This date range picker plugin is under MIT LICENSE

163 Open More issues

Closed

Month UNDEFINED if shortcuts and monthSelect are enabled

The month showed as UNDEFINED if shortcuts and monthSelect are enabled:

Config:

{
       shortcuts :
            {
                'prev-days': [1,3,5,7],
                'prev': ['week','month','year'],
                'next-days':null,
                'next':null
            },
        monthSelect: true,
	yearSelect: true,
}

Using jquery-date-range-picker v 0.16.1

Type: regression Status: done

opened Mar 13, 2018 by XavierCLL 15

Closed

Register at CDN to increase ease of deployment

It seems your library is getting quite some attention and traction looking at the activity of this repo, nice!

To stimulate adoption and increase ease of deployment during production, registration of (minified) JavaScript and Stylesheet files at a CDN like http://www.cdnjs.com is useful.

Reminder to self, have a look at: https://github.com/cdnjs/cdnjs/blob/master/documents/autoupdate.md

Take following steps for this library: https://github.com/cdnjs/cdnjs/pull/6371#issuecomment-161240152

opened Jan 25, 2016 by holtkamp 13

Closed

please update npm package, because current is not work

Spent many time to understand that npm version and this are different. Please, update npm package

opened Aug 23, 2017 by evisotskiy 11

Closed

Greek language import

#511 Greek language has been added.

opened Dec 11, 2021 by ilaydaozdemir99 10

Closed

Bug with setValue: hours is 1hr less than selected

I use setValue to set date values in the app form. But the issue is that the displayed value is 1hr less than selected by the user.

This bug is reproducible when I select Greenwich Mean Time time zone on my computer

I am adding a source code how to reproduce this bug:

<!doctype html>
<html>
  <head>
    <script src="https://rawgit.com/jquery/jquery/1.12.4/dist/jquery.min.js"></script>
    <script src="https://rawgit.com/moment/moment/develop/min/moment-with-locales.min.js"></script>
    <script src="https://rawgit.com/longbill/jquery-date-range-picker/master/dist/jquery.daterangepicker.min.js"></script>
    <link href="https://rawgit.com/longbill/jquery-date-range-picker/master/dist/daterangepicker.min.css" rel="stylesheet"/>
  </head>

  <body>
    <input type="text" id="from"/>
    <input type="text" id="to"/>
    <a id="datepicker">
      select dates
    </a>
    <script>
      $('#datepicker').dateRangePicker({
        separator: ' to ',
        time: { enabled: true },
        format: 'DD-MM-YYYY HH:mm',
        showShortcuts: true,
        setValue: function(s, s1, s2) {
          console.log(s)
          console.log(s1)
          console.log(s2)
          $(this).val(s)
          $("#from").val(s1)
          $("#to").val(s2)
        },
        shortcuts: {
          'prev-days': null,
          'next-days': null,
          prev: null,
          next: null
        },
        startOfWeek: 'monday'
      })
    </script>
  </body>
</html>

There is a gist with this source code

Type: bug Status: done

opened Oct 28, 2018 by Hirurg103 9

Closed

Show two months in singleDate mode

Allow show the view of two months when the singleDate option is selected. Thus avoiding extra clicks to select a day for the end user. For example, It's 31th March and you need select a day in the next month. For achieve this you need 2 clicks showing one month. With this modification only one click is necessary.

opened Mar 31, 2016 by scarballo 9

Open

moment => luxon

It would be good if the dependancy for moment could be changed to luxon

opened May 16, 2023 by Pascal76 0

Open

moment => luxon

It would be good if the dependancy for moment could be changed to luxon

opened May 16, 2023 by Pascal76 0

Open

How to use date and time data in the custom top bar?

Hello! I'm searching for help. I want to use custom topbar with my css classes, but don't understand how can I get date and time data? What should I write in function?

customTopBar: function() {
  return ... ?
},

opened Feb 16, 2023 by pndparade 0

Open

Show dates in previous/next month

Resolves the discussion in #271 and removes the redundant styling rule that hides the dates of previous and next months, and instead shows them in a lighter grey color, much like other calendar applications such as Google Calendar and Outlook.

opened Oct 26, 2022 by hbulens 0

Open

Add Spanish language support

"Time, Hour, Minute" missing translation

opened Sep 22, 2022 by Aldo-Gsu-4 0

Open

#508 Add croatian language support

Adds the Croatian language to the language list.

opened Feb 10, 2022 by Eptick 0

v0.21.1(Oct 28, 2020)

Source code(tar.gz)
Source code(zip)

v0.21.0(Oct 28, 2020)

Includes fixes provided by the community:

#395: New translation: Slovak;
#403: Improved Japanese translation;
#417: Improved Traditional Chinese translation;
#492: Danish translation fixes;
#498: Removal of npm as a direct dependency;
#499: Upgrade of jQuery click events to the on syntax;
#500: Fix for issues with time selection caused by DST.

Furthermore, yarn.lock was dropped and the minimum required node version bumped to ~4.9.1.

Source code(tar.gz)
Source code(zip)

v0.20.0(Sep 26, 2018)

This release includes the fix in #455, which provides a solution for the issues brought up in #412 and #452.

As a minor update, the files are now normalized to LF as the EOL character.

Source code(tar.gz)
Source code(zip)

v0.19.0(Aug 17, 2018)

As discussed in https://github.com/longbill/jquery-date-range-picker/issues/373, https://github.com/longbill/jquery-date-range-picker/issues/438

Source code(tar.gz)
Source code(zip)

v0.18.0(Apr 23, 2018)

Thanks to @oslyak!

Source code(tar.gz)
Source code(zip)

v0.17.0(Apr 18, 2018)

This bumps the required jQuery version to >= 1.7

Thanks to @yonisolo

Source code(tar.gz)
Source code(zip)

Date Range Picker is a Calendar Picker View to show a Customized Date Range Picker with improved UI and functionality to add subtitles to the dates

vue-date-range-picker - A vue component using Bootstrap 4 styles for date range selection

JavaScript Date Range, Date and Time Picker Component

A React component for choosing dates and date ranges.

A smart colored time selector. Users can select just free time with a handy colorful range selector.

A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.

vue-bootstrap-select [email protected]/vue-bootstrap-select - Vue version of bootstrap-select.

vue-jquery-mask jQuery Mask Pluginvue-jquery-mask - Vue.js v2.x component for jQuery Mask Plugin

Flutter date range pickers use a dialog window to select a range of date on mobile.

A JavaScript implementation of the Python's range() function.

Lazy number range generator

vue-analog-clock-range - Analog clock range to show time difference.

stf vue select - most flexible and customized select

A Dialogo fragment with date pickers which can be used to select a time range.

The best (?) date range picker control for OS X.

:muscle::ballot_box_with_check: A jQuery plugin that turns regular select boxes into Quicksilver-like, flex-matching, incremental-finding controls.

Responsive Cropper is a full responsive JQuery plugin that lets you select an area from an image and prepare crop information to send it to the server.

a range picker of JQuery plugins

A jQuery select plugin

jQuery fontIconPicker v2 is a small (3.22kb gzipped) jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms.

jQuery plugin of countdown on html-page

Share this repo

Related Repos

Calendar

An iCal API to see the 42 events in a calendar.

42cal An iCal API to see the 42 events in a calendar. Installation You have to create a new intra app (Settings > API > REGISTER A NEW APP). Fill in t

Calendar

3.4k

jQuery Plugin Date and Time Picker

jQuery DateTimePicker Demo and Documentation PLEASE. Help me update documentation. Doc.tpl This file will be automatically displayed on the site Insta

Calendar

React calendar component with support for multiple views and events

Calend - calendar component for React Support for: day view three days view week view month view LIVE DEMO: https://calend.nibdo.com If given interfac

Calendar

A calendar module for Freescout

LJPc calendar module for FreeScout This module adds a calendar module to FreeScout. Functions You can add unlimited calendars via the settings page. E

Calendar

7.8k

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickadate The mobile-friendly, responsive, and lightweight jQuery date & time input picker. To get started, check out the: Homepage - Date picker - Ti

Calendar

7.6k

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

Pikaday A refreshing JavaScript Datepicker Lightweight (less than 5kb minified and gzipped) No dependencies (but plays well with Moment.js) Modular CS

Calendar

2.9k

:calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!

rome Customizable date (and time) picker. Opt-in UI, no jQuery! Rome wasn't built in a day. Browser support includes every sane browser and IE7+. Demo

Calendar

A simple datepicker with Chakra-UI and date-fns

Datepicker A simple datepicker component build with date-fns and Chakra-UI. Table of Contents Requisites Installation and Usage Customizing License Re

Calendar

Beautiful, minimal and accessible date-picker for React.

sassy-datepicker Beautiful, minimal and accessible date-picker for react. Installation yarn add sassy-datepicker # or npm install sassy-datepicker Usa

Calendar

See all your Magister appointments in Google calendar

MagiSync A NodeJS based syncing tool for Magister and Google Calendar. Usage Configure your env variables - See below Run yarn to install dependencies

Calendar

This app is aiming to combine the functionality of Calendar, Reminder, and Project Managem...

Blocky Calendar This app is aiming to combine the functionality of Calendar, Reminder, and Project Management sites. Currently it only has frontend re

Calendar

A simple jQuery calander plugin to show and pick date and other stuff.

Calendar

20.3k

The open-source Calendly alternative.

Let's face it: Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families

Calendar

A headless calendar hook for React.

use-lilius A headless calendar hook for React. Installation yarn add use-lilius Be sure you have the peer dependencies installed: react ^17.0.0 react-

Calendar

Life Calendar: Your Life in Weeks