Datepicker GIF

About The Project

There are many great datepickers available on GitHub, however, I didn't find one that really suited my needs. The hardest thing to find is a datepicker that can do a specific combination of features.

Here's a few other reasons:

  • I hate (unnecessary) dependencies like jQuery
  • I want the code to be as lightweight and portable as possible.
  • I want programmable features that HTML5 input elements don't offer

Of course, no one datepicker will serve all projects since your needs may be different. So I'll be adding more to this API in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue.

I am the creator, and currently contribute and maintain this project almost entirely myself. I have reviewed and accepted some pull requests along the way however, and I am happy to review and merge any helpful PRs as soon as I find time. If you want to contribute checkout the "Contributing" section!


Since the goal of this project is to use only vanilla JavaScript and Moment.js, we have only one dependency:

  1. Moment.js

Getting Started

Using Git, and Vanilla JS

  1. Clone the repogit clone
  2. Comment out lines 1 through 12 of Datepicker.js to implement with pure Vanilla JS, HTML and CSS.
  3. Open Datepicker.html in your browser of choice to view and test behavior.
  4. Place the Datepicker.js and moment.js files in the appropriate directory in your project (for many, that will be your bundled JS helpers or packages directory).
  5. Adjust the options as necessary for your needs, be sure to supply the Datepicker options with the appropriate container HTML element node.

Using NPM (React, Next.js)

  1. Install the npm package:npm i --save moment-datepicker-js
  2. In your Node Modules directory, You may delete Datepicker.html, DatepickerSmall.css, and Datepicker_V1.0.0.gif, you will not need these files.
  3. Import the Datepicker, and move/scope the DatepickerSmall.css and moment.js files in the appropriate places in your project. Below is a basic example component that should work in Next.js or React for simple implementations:

  4. Adjust the options as necessary for your needs, be sure to supply the Datepicker options with the appropriate container HTML element node. See usage section below


1.) You will first need a recent version of Moment.js installed.

  • You can use the one included in the helpers folder of this project _RECOMMENDED_
  • or download the latest version from their website.

2.) Download and add the Datepicker.js and Datepicker.css files to their appropriate directories in your project.

  • you will need to reference them in your project in a way that they are in scope to the code you are initializing the datepicker with.

3.) Below are all the options you can enable using Vanilla JS syntax. For implementation in React, see above NPM section

// there should only be this one variable here // to instantiate the class into the container element const testDatepicker = new Datepicker({ containerElement: document.querySelector('.DatepickerContainer'), presetMenu: true, singleDate: false, autoClose: false, timePicker: false, leadingTrailingDates: true, clearDates: true, defaults: false, // militaryTime: false, // max: moment("08/14/2022"), // min: new Date("08/14/2021"), // defaults: [new Date('08/14/2023'),new Date('08/14/2023')], menuOptions: [ { title: 'Today', values: [new Date(), new Date()] } ], startDateLabel: "Reservation Start: ", endDateLabel: "Reservation End: ", // onChange: function () { // console.log("onChange:", this.dates); // }, // onSubmit: function () { // console.log("onSubmit:", this.dates); // }, // onClose: function () { // console.log("onClose:", this.dates); // } });

4.) Adjust the options above to meet the needs of your project, or the project's component you are implementing the datepicker in.


Method NameMethod DescriptionFirst ParamSecond ParamExample
.value()Invoke at any time with no parameters to return an array of dates containing start and end date. Invoke with params to set a date range.
Array of Date or Moment objects
[new Date(), Moment()]
(String) Moment format
"MM/DD/YYYY hh:mm:ss"
// get values from datepicker: Datepicker.value() // returns [startDate, endDate] 
// set values in datepicker:
Datepicker.value([new Date(), new Date()]) // returns null, sets date range.
.startDate()Invoke at any time with no parameters to return single start date. Invoke with a single Moment or js Date object to set start date.
JS Date object
new Date()
Moment object
// get start date  from datepicker:
// set start date  in datepicker:
Datepicker.startDate(new Date())
.endDate()Invoke at any time with no parameters to return single end date. Invoke with a single Moment or js Date object to set end date.
JS Date object
new Date()
Moment object
// get end date  from datepicker:
// set end date  in datepicker:
Datepicker.endDate(new Date())
.closeCalendar()Invoke at any time to close the calendar UI (pop-up element).
.openCalendar()Invoke at any time to open the calendar UI (pop-up element).
.resetCalendar()Invoke at any time to reset the calendar to its default state (determined by initial options).
.snapTo(Date(), isVisible)
Invoke at any time to snap the calendar pop-up UI to a specific date.
JS Date object
new Date()
Moment object
isVisble - set to - false - if calendar is not visible, or should not be visible currently.


Contributions are greatly appreciated towards the final goal of a perfect datepicker!

Please visit this contribution guide for GitHub open source if you are unsure about any of these steps:

  1. Fork the Project (top right there should be a button)
  2. Look through the issues, and choose one that is not in progress on the project board
  3. Comment on the issue and I will assign it to you.
  4. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  5. Commit your Changes (git commit -m 'Add some AmazingFeature')
  6. Push to the Branch (git push origin feature/AmazingFeature)
  7. Please track your progress on the project board
  8. Open a Pull Request

Code will be reviewed before being merged. If your code does not quite work or needs revision it may not be merged to the master.

Browser Support:

Chrome FirefoxIEOperaSafariEdge
Latest ✔Latest ✔Not supportedNot testedLatest ✔Latest ✔

Want to fund the development of this project? Donate crypto!

  • Bitcoin: 3593eFRSHSVEAiwvEvpQnrodFpXPpwwrzx
  • Ethereum: 0x8c1EB41f646b4d7DCE0D3075F2A639E40bC894c3
  • Tezos: tz1fji2C1o21Xa6qQxC2hjsHNv7h89RnEkhq
  • Dai: 0xaAa1650a9f842F8A0EEa2FD8966BB2bc9144Ea35

Datepicker Sandbox

Choose options to configure the moment-datepicker with, and click submit to configure.