Moment-Datepicker-JS

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!

Dependencies

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

Moment.js

Getting Started

Using Git, and Vanilla JS

Clone the repogit clone https://github.com/ctrachte/Datepicker.js
Comment out lines 1 through 12 of Datepicker.js to implement with pure Vanilla JS, HTML and CSS.
Open Datepicker.html in your browser of choice to view and test behavior.
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).
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)

Install the npm package:npm i --save moment-datepicker-js
In your Node Modules directory, You may delete Datepicker.html, DatepickerSmall.css, and Datepicker_V1.0.0.gif, you will not need these files.
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:
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

Usage

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.

Methods

Method Name	Method Description	First Param	Second Param	Example
`.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 `Moment()`		`// get start date from datepicker: Datepicker.startDate() // 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 `Moment()`		`// get end date from datepicker: Datepicker.endDate() // set end date in datepicker: Datepicker.endDate(new Date())`
`.closeCalendar()`	Invoke at any time to close the calendar UI (pop-up element).			Datepicker.closeCalendar()
`.openCalendar()`	Invoke at any time to open the calendar UI (pop-up element).			Datepicker.openCalendar()
`.resetCalendar()`	Invoke at any time to reset the calendar to its default state (determined by initial options).			Datepicker.resetCalendar()
.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 `Moment()`	`isVisble` - set to - `false` - if calendar is not visible, or should not be visible currently.	Datepicker.resetCalendar()

Contributing

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:

Fork the Project (top right there should be a button)
Look through the issues, and choose one that is not in progress on the project board
Comment on the issue and I will assign it to you.
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Please track your progress on the project board
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:


Latest ✔	Latest ✔	Not supported ❌	Not tested	Latest ✔	Latest ✔

Donate!

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.

singleDate - true if you want the datepicker to pick only one date. presetMenu - true if you want to allow a hamburger menu of preset dates or date ranges. autoClose - true if you want the datepicker to close after selections are made. militaryTime - true if you want the datepicker to display 24hr time - HH:MM. timePicker - true if you want to allow users to also choose a time range. leadingTrailingDates - true if you want to show next/previous months dates on the first/last week of the current month. clearDates - true if you want the "X" button to reset the calendar dates instead of close the calendar UI. defaults - true if you want to prefill Date(s) if none chosen.

startDateLabel: endDateLabel:

Primary Color Secondary Color Shadow Color Selection Color Accent Color Trouble Color