gitwtfhub

wtf is daterangepicker?

dangrossman/daterangepicker — explained in plain English

Analysis updated 2026-06-24

10,992JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

TL;DR

A front-end JavaScript component that adds a click-to-open calendar popup to any web page, letting users select a start and end date or a single date.

Mindmap

mindmap
  root((daterangepicker))
    What it does
      Calendar popup
      Date range selection
      Single date mode
    Features
      Preset ranges
      Time picker
      Localization
      Date restrictions
    Tech stack
      JavaScript
    Use cases
      Analytics filters
      Booking forms
      Report date ranges

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Add a date range selector to a web analytics dashboard so users can filter reports by custom date windows.

REASON 2

Build a booking or scheduling form where users pick a start and end date from a calendar popup.

REASON 3

Add preset options like 'Last 7 days' or 'This month' so users can select common ranges with one click.

REASON 4

Create an international date picker with localized labels and regional date formats for multi-language apps.

What's in the stack?

JavaScript

How it stacks up

dangrossman/daterangepickeropenspug/spugreact-dropzone/react-dropzone
Stars10,99210,99710,981
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyhardeasy
Complexity1/54/51/5
Audiencedeveloperops devopsdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min
Free to use for any purpose including commercial projects, MIT license.

Wtf does this do

This is a JavaScript component that adds a date range picker to a web page. When a user clicks a field, a dropdown calendar appears where they can select a start date and an end date. The author originally built it for a web analytics product called Improvely, which needed a way for users to choose date ranges when viewing reports. It is a front-end UI component, not a backend service. The component includes a handful of practical options. You can restrict which dates a user is allowed to select, which is useful if you only want them picking dates within a certain window. There is a single-date mode for situations where you only need one date rather than a range. A time picker option extends the calendar to include hours and minutes. You can also define preset ranges, such as the last 7 days or the current month, so users can select common spans with one click rather than picking dates manually. Text labels and date display formats can be localized, meaning you can adjust them to suit different languages or regional date conventions. This makes the component usable in international applications without needing to swap it out for a region-specific alternative. The README is short and does not include setup or installation instructions directly. It points to an external documentation site for full details and live usage examples. The license is MIT, which means it is free to use in personal and commercial projects without restriction.

Yoink these prompts

Prompt 1
Using the daterangepicker library, write the HTML and JavaScript to add a date range input to my page that only allows selecting dates within the past 90 days.
Prompt 2
Show me how to add preset options like 'Last 7 days', 'Last 30 days', and 'This month' to a daterangepicker instance.
Prompt 3
How do I enable the time picker in daterangepicker so users can select both a date and a specific hour and minute for start and end?

Frequently asked questions

wtf is daterangepicker?

A front-end JavaScript component that adds a click-to-open calendar popup to any web page, letting users select a start and end date or a single date.

What language is daterangepicker written in?

Mainly JavaScript. The stack also includes JavaScript.

What license does daterangepicker use?

Free to use for any purpose including commercial projects, MIT license.

How hard is daterangepicker to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is daterangepicker for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.