<commit_before>## Javascript Datepicker
**- lightweight, customizable CSS, no dependencies, extendable -**

[Examples](https://nehrdani.github.io/Datepicker/)

### Getting Started

This is the minimum markup and it renders the Datepicker as a static element on the page. If you want it dynamically hidden or shown on an event you have to do this on yourself.

I'm sure you can do it :wink:.

#### HTML

```html
<input id="input" type="text" name="date">
<div id="container">
<!-- the Datepicker will be rendered here -->
</div>
```

#### Javascript

```js
// best wait for DOM ready
document.addEventListener("DOMContentLoaded", function () {

  // constructor
  var datepicker = new Datepicker({
    onSelect: onSelect // callback
  });

  var input = document.querySelector("#input");
  var container = document.querySelector("#container");

  // manually bind the datepicker element to the container
  container.appendChild(datepicker.element);

  // get a Date object as parameter to work with
  function onSelect (date) {
    input.value = date.toDateString();
  }
}
```

### Properties

* date [Date, null] - The current Date of the Datepicker.
* element [DOM Element] - The Datepicker element.

### Methods

* setDate (date) - Sets the value of the Datepicker, it must be a Date object or parsable through 'new Date()', returns the new date as Date object.
* destroy - destroys the datepicker. Returns null.

### Options

* onSelect (date) - Callback that returns the selected Date.
* firstDay *(Default: 0)* - Starting day of the week from 0-6 (0 = Sunday, 6 = Saturday).
* minDate *(Default: null)* - Defines the minimum available Date.
* maxDate *(Default: null)* - Defines the maximum available Date.
* startMode *(Default: day)* - Current mode of the Datepicker *(day|month|year)*. Defines the mode initialized.
* customClass ({date: date, mode: mode}) - Optional function to add classes to dates based on passing an object with date and current mode properties.
* disableDate ({date: date, mode: mode}) - Optional function to disabled Dates based on passing an object with date and current mode properties.

### i18n
* The Datepicker has i18n support through dedicated script files.
* Simply add a script from the i18n directory before the datepicker script and it automatically uses this language.

### NPM
* npm run uglify - minifies the datepicker.js file for production use.

### About
*There are many other Datepicker plugins out there. But I wanted to build one on my own.*

**Feel free to try, fork and share. I appreciate every feedback.**<commit_msg>update Docs<commit_after>## Javascript Datepicker
**- lightweight, customizable CSS, no dependencies, extendable -**

[Examples](https://nehrdani.github.io/Datepicker/)

### Getting Started

This is the minimum markup and it renders the Datepicker as a static element on the page. If you want it dynamically hidden or shown on an event you have to do this on yourself.

I'm sure you can do it :wink:.

#### HTML

```html
<input id="input" type="text" name="date">
<div id="container">
<!-- the Datepicker will be rendered here -->
</div>
```

#### Javascript

```js
// best wait for DOM ready
document.addEventListener("DOMContentLoaded", function () {

  // constructor
  var datepicker = new Datepicker({
    container: document.querySelector("#container"), // container
    onSelect: onSelect // callback
  });

  // get a Date object as parameter to work with
  function onSelect (date) {
    document.querySelector("#input").value = date.toDateString();
  }
}
```

### Properties

* date [Date, null] - The current Date of the Datepicker.
* element [DOM Element] - The Datepicker element.

### Methods

* setDate (date) - Sets the value of the Datepicker, it must be a Date object or parsable through 'new Date()', returns the new date as Date object.
* destroy - destroys the datepicker. Returns null.

### Options

* container - The container where the Datepicker will be rendered into.
* onSelect (date) - Callback that returns the selected Date.
* firstDay *(Default: 0)* - Starting day of the week from 0-6 (0 = Sunday, 6 = Saturday).
* minDate *(Default: null)* - Defines the minimum available Date.
* maxDate *(Default: null)* - Defines the maximum available Date.
* startMode *(Default: day)* - Current mode of the Datepicker *(day|month|year)*. Defines the mode initialized.
* customClass ({date: date, mode: mode}) - Optional function to add classes to dates based on passing an object with date and current mode properties.
* disableDate ({date: date, mode: mode}) - Optional function to disabled Dates based on passing an object with date and current mode properties.

### i18n
* The Datepicker has i18n support through dedicated script files.
* Simply add a script from the i18n directory before the datepicker script and it automatically uses this language.

### NPM
* npm install - installs all needed dependencies
* npm run uglify - minifies the datepicker.js file for production use.

### About
*There are many other Datepicker plugins out there. But I wanted to build one on my own.*

**Feel free to try, fork and share. I appreciate every feedback.**
{'fraction_non_alphanumeric': 0.10454722114263505, 'fraction_numerical': 0.004275165176836378, 'mean_word_length': 4.111221449851043, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6755396', 'n_tokens_mistral': 1402, 'n_tokens_neox': 1345, 'n_words': 660}