second commit
0
node_modules/flowbite-datepicker/docs/.nojekyll
generated
vendored
Normal file
266
node_modules/flowbite-datepicker/docs/README.md
generated
vendored
Normal file
@ -0,0 +1,266 @@
|
||||
# Vanilla JS Datepicker
|
||||
|
||||
A vanilla JavaScript remake of [bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker) for [Bulma](https://bulma.io) and other CSS frameworks
|
||||
|
||||
This package is written from scratch as ECMAScript modules/[Sass](https://sass-lang.com) stylesheets to reproduce similar usability to bootstrap-datepicker.
|
||||
It can work either standalone or with CSS framework (e.g. [Bootstrap](https://getbootstrap.com), [Foundation](https://get.foundation)), but works best with [Bulma](https://bulma.io) as it's developed primarily for Bulma.
|
||||
|
||||
The package also includes pre-built js/css files for those who like to use it directly on browser.
|
||||
|
||||
##### Features
|
||||
|
||||
- Date picker (input-dropdown, inline), date range picker
|
||||
- Keyboard operation support (navigation by arrow keys, editing on input field)
|
||||
- i18n support (locales, CSS-based text direction detection)
|
||||
- Easily customizable to adapt stylesheet for various CSS frameworks
|
||||
- Dependency free
|
||||
- Made for modern browsers — no IE support
|
||||
- Lightweight (well, relatively…) — 33kB (minified, uncompressed)
|
||||
|
||||
##### Demo
|
||||
|
||||
[Live Online Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/)
|
||||
|
||||
## Quick Start
|
||||
|
||||
Install the package using npm.
|
||||
|
||||
```bash
|
||||
npm install --save-dev vanillajs-datepicker
|
||||
```
|
||||
|
||||
##### Date picker
|
||||
|
||||
– **Input picker**
|
||||
|
||||
1. create a text input element.
|
||||
|
||||
```html
|
||||
<input type="text" name="foo">
|
||||
```
|
||||
|
||||
2. import the `Datepicker` module.
|
||||
|
||||
```javascript
|
||||
import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';
|
||||
```
|
||||
|
||||
_Or if you use a bundler that supports [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module) (e.g. [Rollup](https://rollupjs.org/) with [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) plugin, [webpack](https://webpack.js.org/))_
|
||||
|
||||
```javascript
|
||||
import { Datepicker } from 'vanillajs-datepicker';
|
||||
```
|
||||
|
||||
_Or if your bundler supports [package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) (e.g. Rollup with node-resolve plugin v8.4+, webpack v5+), you can also do this._
|
||||
|
||||
```javascript
|
||||
import Datepicker from 'vanillajs-datepicker/Datepicker';
|
||||
```
|
||||
|
||||
3. call `Datepicker` constructor with the input element and, optionally, [config options](options).
|
||||
|
||||
```javascript
|
||||
const elem = document.querySelector('input[name="foo"]');
|
||||
const datepicker = new Datepicker(elem, {
|
||||
// ...options
|
||||
});
|
||||
```
|
||||
|
||||

|
||||
|
||||
|
||||
– **Inline picker**
|
||||
|
||||
1. create a block element.
|
||||
|
||||
```html
|
||||
<div id="foo" data-date="01/25/2020"></div>
|
||||
```
|
||||
|
||||
2. import the `Datepicker` module in the same way as Input picker.
|
||||
|
||||
|
||||
3. call `Datepicker` constructor with the block element and, optionally, [config options](options).
|
||||
|
||||
```javascript
|
||||
const elem = document.getElementById('foo');
|
||||
const datepicker = new Datepicker(elem, {
|
||||
// ...options
|
||||
});
|
||||
```
|
||||
|
||||

|
||||
|
||||
|
||||
##### Date range picker
|
||||
|
||||
1. create a block element that contains 2 text input elements.
|
||||
|
||||
```html
|
||||
<div id="foo">
|
||||
<input type="text" name="start">
|
||||
<span>to</span>
|
||||
<input type="text" name="end">
|
||||
</div>
|
||||
```
|
||||
|
||||
2. import the `DateRangePicker` module.
|
||||
|
||||
```javascript
|
||||
import DateRangePicker from 'path/to/node_modules/vanillajs-datepicker/js/DateRangePicker.js';
|
||||
```
|
||||
|
||||
_Or if you use a bundler that supports [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module) (e.g. [Rollup](https://rollupjs.org/) with [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) plugin, [webpack](https://webpack.js.org/))_
|
||||
|
||||
```javascript
|
||||
import { DateRangePicker } from 'vanillajs-datepicker';
|
||||
```
|
||||
|
||||
_Or if your bundler supports [package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) (e.g. Rollup with node-resolve plugin v8.4+, webpack v5+), you can also do this._
|
||||
|
||||
```javascript
|
||||
import DateRangePicker from 'vanillajs-datepicker/DateRangePicker';
|
||||
```
|
||||
|
||||
3. call `DateRangePicker` constructor with the block element and, optionally, [config options](options).
|
||||
|
||||
```javascript
|
||||
const elem = document.getElementById('foo');
|
||||
const rangepicker = new DateRangePicker(elem, {
|
||||
// ...options
|
||||
});
|
||||
```
|
||||
|
||||

|
||||
|
||||
##### Stylesheet
|
||||
|
||||
1. import scss file.
|
||||
|
||||
```scss
|
||||
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker';
|
||||
```
|
||||
|
||||
### Using with CSS framework
|
||||
|
||||
#### Bulma
|
||||
|
||||
1. import scss file for Bulma instead.
|
||||
|
||||
```scss
|
||||
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bulma';
|
||||
```
|
||||
|
||||
#### Bootstrap
|
||||
|
||||
1. use `buttonClass: 'btn'` option to call `Datepicker`/`DateRangePicker` constructor.
|
||||
|
||||
```javascript
|
||||
const datepicker = new Datepicker(elem, {
|
||||
buttonClass: 'btn',
|
||||
});
|
||||
```
|
||||
|
||||
2. import scss file for Bootstrap instead.
|
||||
|
||||
```scss
|
||||
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bs4';
|
||||
```
|
||||
|
||||
#### Foundation
|
||||
|
||||
1. import scss file for Foundation instead.
|
||||
|
||||
```scss
|
||||
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-foundation';
|
||||
```
|
||||
|
||||
#### Other frameworks
|
||||
|
||||
1. If the framework uses a specific class for button elements, set it to the `buttonClass` option to call `Datepicker`/`DateRangePicker` constructor.
|
||||
|
||||
```javascript
|
||||
const datepicker = new Datepicker(elem, {
|
||||
buttonClass: 'uk-button',
|
||||
});
|
||||
```
|
||||
|
||||
2. Copy the following template into your sass stylesheet, and edit the node_module path, the variables, button class and button style adjustments to match your environment.
|
||||
|
||||
```scss
|
||||
/***
|
||||
Copy the datepicker variables (the ones with `dp-` prefix and `!default` flag)
|
||||
from `sass/Datepicker.scss` to here
|
||||
Then, edit them using your framework's variables/values
|
||||
e.g.:
|
||||
$dp-background-color: $background !default;
|
||||
$dp-border-color: $border !default;
|
||||
...
|
||||
***/
|
||||
|
||||
@import '../node_modules/vanillajs-datepicker/sass/mixins';
|
||||
|
||||
@mixin dp-button {
|
||||
.button {
|
||||
/***
|
||||
Place style adjustment for date picker's buttons here, if needed
|
||||
***/
|
||||
|
||||
.datepicker-header & {
|
||||
@include dp-header-button-common;
|
||||
|
||||
/***
|
||||
Place style adjustment specific to the header buttons here, if needed
|
||||
***/
|
||||
}
|
||||
|
||||
.datepicker-footer & {
|
||||
@include dp-footer-button-common;
|
||||
|
||||
/***
|
||||
Place style adjustment specific to the footer buttons here, if needed
|
||||
***/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import '../node_modules/vanillajs-datepicker/sass/datepicker';
|
||||
```
|
||||
|
||||
### Using from Browser
|
||||
|
||||
1. From CDN, load css and js files.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
|
||||
|
||||
...
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
|
||||
```
|
||||
|
||||
_If you use Bulma, Bootstrap or Foundation, you can use the css for your framework instead._
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bulma.min.css">
|
||||
<!-- or -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bs4.min.css">
|
||||
<!-- or -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-foundation.min.css">
|
||||
```
|
||||
|
||||
_And if don't need date range, you can use the datepicker-only version of js file._
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker.min.js"></script>
|
||||
```
|
||||
|
||||
2. Call `Datepicker`/`DateRangePicker` constructor in the same way as explained [above](?id=quick-start). (The classes are exposed to global scope.)
|
||||
|
||||
```javascript
|
||||
const elem = document.querySelector('input[name="foo"]');
|
||||
const datepicker = new Datepicker(elem, {
|
||||
// ...options
|
||||
});
|
||||
```
|
||||
|
6
node_modules/flowbite-datepicker/docs/_sidebar.md
generated
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
* [Home](/)
|
||||
* [Overview](overview.md)
|
||||
* [Options](options.md)
|
||||
* [API](api.md)
|
||||
* [Date String & Format](date-string+format.md)
|
||||
* [i18n](i18n.md)
|
284
node_modules/flowbite-datepicker/docs/api.md
generated
vendored
Normal file
@ -0,0 +1,284 @@
|
||||
# API
|
||||
|
||||
## Datepicker
|
||||
|
||||
### Static Properties
|
||||
|
||||
#### Datepicker.locales
|
||||
- Type: `Object`
|
||||
|
||||
Installed locales in `[languageCode]: localeObject` format. `en`:_English (US)_ is pre-installed.
|
||||
|
||||
> See [i18n](i18n) for the details.
|
||||
|
||||
### Static Methods
|
||||
|
||||
#### Datepicker.formatDate()
|
||||
|
||||
Format a Date object or a time value using given format and language
|
||||
|
||||
```javascript
|
||||
Datepicker.formatDate( date , format [, lang ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- `date`: {`Date`|`Number`} - Date or time value to format
|
||||
- `format`: {`String`|`Object`} - Format string or object that contains `toDisplay()` custom formatter
|
||||
See [Options ≻ format](options?id=format)
|
||||
- [`lang`] : {`String`} - Language code for the locale to use
|
||||
– Default: `'en'`
|
||||
- **Return:**
|
||||
- {`String`} - Formatted date
|
||||
|
||||
#### Datepicker.parseDate()
|
||||
|
||||
Parse date string (or Date/time value) using given format and language
|
||||
|
||||
```javascript
|
||||
Datepicker.parseDate( dateStr , format [, lang ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- `dateStr`: {`String`|`Date`|`Number`} - Date string, Date object or time value to parse
|
||||
- `format`: {`String`|`Object`} - Format string or object that contains `toValue()` custom parser
|
||||
See [Options ≻ format](options?id=format)
|
||||
- [`lang`] : {`String`} - Language code for the locale to use
|
||||
– Default: `'en'`
|
||||
- **Return:**
|
||||
- {`Number`} - Time value of parsed date
|
||||
|
||||
|
||||
### Instance Properties
|
||||
|
||||
#### datepicker.active
|
||||
- Type: `Boolean`
|
||||
|
||||
Whether the picker element is shown
|
||||
(Read-only)
|
||||
|
||||
#### datepicker.pickerElement
|
||||
- Type: `HTMLDivElement`
|
||||
|
||||
DOM object of picker element
|
||||
(Read-only)
|
||||
|
||||
#### datepicker.rangepicker
|
||||
- Type: `DateRangePicker`
|
||||
|
||||
DateRangePicker instance that the datepicker belongs to
|
||||
Only avalable when the datepicker is a part of date range picker
|
||||
(Read-only)
|
||||
|
||||
|
||||
### Instance Methods
|
||||
|
||||
#### datepicker.destroy()
|
||||
|
||||
Destroy the Datepicker instance
|
||||
|
||||
```javascript
|
||||
datepicker.destroy()
|
||||
```
|
||||
- **Return:**
|
||||
- {`Detepicker`} - The instance destroyed
|
||||
|
||||
#### datepicker.getDate()
|
||||
|
||||
Get selected date(s)
|
||||
|
||||
The method returns a Date object of selected date by default, and returns an array of selected dates in multidate mode. If format string is passed, it returns date string(s) formatted in given format.
|
||||
|
||||
```javascript
|
||||
datepicker.getDate( [ format ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- [`format`] : {`String`} - Format string to stringify the date(s)
|
||||
- **Return:**
|
||||
- {`Date`|`String`} - Selected date (or `undefined` if none is selected)
|
||||
- {`Date[]`|`String[]`} - Array of selected dates (or empty array if none is selected)
|
||||
|
||||
#### datepicker.hide()
|
||||
|
||||
Hide the picker element
|
||||
Not available on inline picker
|
||||
|
||||
```javascript
|
||||
datepicker.hide()
|
||||
```
|
||||
|
||||
#### datepicker.refresh()
|
||||
|
||||
Refresh the picker element and the associated input field
|
||||
|
||||
```javascript
|
||||
datepicker.refresh( [ target ], [ forceRender ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- [`target`] : {`String`} - Target item when refreshing one item only. `'picker'` or `'input'`
|
||||
- [`forceRender`] : {`Boolean`} - Whether to re-render the picker element regardless of its state instead of optimized refresh
|
||||
– Default: `'false'`
|
||||
|
||||
#### datepicker.setDate()
|
||||
|
||||
Set selected date(s)
|
||||
|
||||
In multidate mode, you can pass multiple dates as a series of arguments or an array. (Since each date is parsed individually, the type of the dates doesn't have to be the same.)
|
||||
The given dates are used to toggle the select status of each date. The number of selected dates is kept from exceeding the length set to `maxNumberOfDates`. See [Multidate Mode](overview?id=multidate-mode) for more details.
|
||||
|
||||
With `clear: true` option, the method can be used to clear the selection and to replace the selection instead of toggling in multidate mode. If the option is passed with no date arguments or an empty dates array, it works as "clear" (clear the selection then set nothing), and if the option is passed with new dates to select, it works as "replace" (clear the selection then set the given dates)
|
||||
|
||||
When `render: false` option is used, the method omits re-rendering the picker element. In this case, you need to call [`refresh()`](api?id=datepickerrefresh) method later in order for the picker element to reflect the changes. The input field is refreshed always regardless of this option.
|
||||
|
||||
When invalid (unparsable, repeated, disabled or out-of-range) dates are passed, the method ignores them and applies only valid ones. In the case that all the given dates are invalid, which is distinguished from passing no dates, the method considers it as an error and leaves the selection untouched.
|
||||
|
||||
```javascript
|
||||
datepicker.setDate( date1 [, date2 [, ... dateN ]][, options ] )
|
||||
datepicker.setDate( dates [, options ] )
|
||||
datepicker.setDate( [ options ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- [`...dates`] : {...(`String`|`Date`|`Number`)|`Array`} - Date strings, Date objects, time values or mix of those for new selection
|
||||
- [`options`] : {`Object`} - Function options:
|
||||
- `clear`: {`Boolean`} - Whether to clear the existing selection
|
||||
– Default: `false`
|
||||
- `render`: {`Boolean`} - Whether to re-render the picker element
|
||||
– Default: `true`
|
||||
- `autohide`: {`Boolean`} - Whether to hide the picker element after re-render
|
||||
Ignored when used with `render: false`
|
||||
– Default: the value of `autohide` config option
|
||||
|
||||
#### datepicker.setOptions()
|
||||
|
||||
Set new values to the config options
|
||||
|
||||
```javascript
|
||||
datepicker.setOptions( options )
|
||||
```
|
||||
- **Arguments:**
|
||||
- `options`: {`Object`} - Config options to update
|
||||
|
||||
#### datepicker.show()
|
||||
|
||||
Show the picker element
|
||||
|
||||
```javascript
|
||||
datepicker.show()
|
||||
```
|
||||
|
||||
#### datepicker.update()
|
||||
|
||||
Update the selected date(s) with input field's value
|
||||
Not available on inline picker
|
||||
|
||||
The input field will be refreshed with properly formatted date string.
|
||||
|
||||
```javascript
|
||||
datepicker.update( [ options ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- [`options`] : {`Object`} - Function options:
|
||||
- `autohide`: {`Boolean`} - Whether to hide the picker element after update
|
||||
– Default: `false`
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
All Datepicker-event objects are `CustomEvent` instances and dispatched to the associated `<input>` element (for inline picker, the block element).
|
||||
They include the following extra data in the `detail` property.
|
||||
|
||||
- `date`: {`Date`} - Selected date(s) (see [getDate()](api?id=datepickergetdate))
|
||||
- `viewDate`: {`Date`} - Focused date
|
||||
- `viewId`: {`Number`} - ID of the current view
|
||||
- `datepicker`: {`Datepicker`} - Datepicker instance
|
||||
|
||||
#### changeDate
|
||||
|
||||
Fired when the selected dates are changed.
|
||||
|
||||
#### changeMonth
|
||||
|
||||
Fired when the focused date is changed to a different month's date.
|
||||
|
||||
#### changeView
|
||||
|
||||
Fired when the current view is changed.
|
||||
|
||||
#### changeYear
|
||||
|
||||
Fired when the focused date is changed to a different year's date.
|
||||
|
||||
#### hide
|
||||
|
||||
Fired when the date picker becomes hidden.
|
||||
|
||||
#### show
|
||||
|
||||
Fired when the date picker becomes visible.
|
||||
|
||||
|
||||
## DateRangePicker
|
||||
|
||||
### Instance Properties
|
||||
|
||||
#### rangepicker.datepickers
|
||||
- Type: `Array`
|
||||
|
||||
Array of associated Datepicker instances
|
||||
(Read-only)
|
||||
|
||||
|
||||
### Instance Methods
|
||||
|
||||
#### rangepicker.destroy()
|
||||
|
||||
Destroy the DateRangePicker instance
|
||||
|
||||
```javascript
|
||||
rangepicker.destroy()
|
||||
```
|
||||
- **Return:**
|
||||
- {`DateRangePicker`} - The instance destroyed
|
||||
|
||||
#### rangepicker.getDates()
|
||||
|
||||
Get the start and end dates of the date-range
|
||||
|
||||
The method returns Date objects by default. If format string is passed, it returns date strings formatted in given format.
|
||||
The result array always contains 2 items (start date/end date) and `undefined` is used for unselected side. (e.g. If none is selected, the result will be `[undefined, undefined]`. If only the end date is set when `allowOneSidedRange` config option is `true`, `[undefined, endDate]` will be returned.)
|
||||
|
||||
```javascript
|
||||
rangepicker.getDates( [ format ] )
|
||||
```
|
||||
- **Arguments:**
|
||||
- [`format`] : {`String`} - Format string to stringify the dates
|
||||
- **Return:**
|
||||
- {`Date[]`|`String[]`} - Start and end dates
|
||||
|
||||
#### rangepicker.setDates()
|
||||
|
||||
Set the start and end dates of the date range
|
||||
|
||||
The method calls [`datepicker.setDate()`](api?id=datepickersetdate) internally using each of the arguments in start→end order.
|
||||
|
||||
When a `clear: true` option object is passed instead of a date, the method clears the date.
|
||||
|
||||
If an invalid date, the same date as the current one or an option object without `clear: true` is passed, the method considers that argument as an "ineffective" argument because calling [`datepicker.setDate()`](api?id=datepickersetdate) with those values makes no changes to the date selection.
|
||||
|
||||
When the [`allowOneSidedRange`](options?id=allowonesidedrange) config option is `false`, passing `{clear: true}` to clear the range works only when it is done to the last effective argument (in other words, passed to `rangeEnd` or to `rangeStart` along with ineffective `rangeEnd`). This is because when the date range is changed, it gets normalized based on the last change at the end of the changing process.
|
||||
|
||||
```javascript
|
||||
rangepicker.setDates( rangeStart , rangeEnd )
|
||||
```
|
||||
- **Arguments:**
|
||||
- `rangeStart` : {`Date`|`Number`|`String)`|`Object`} - Start date of the range or `{clear: true}` to clear the date
|
||||
- `rangeEnd` : {`Date`|`Number`|`String)`|`Object`} - End date of the range or `{clear: true}` to clear the date
|
||||
|
||||
#### rangepicker.setOptions()
|
||||
|
||||
Set new values to the config options
|
||||
|
||||
```javascript
|
||||
rangepicker.setOptions( options )
|
||||
```
|
||||
- **Arguments:**
|
||||
- `options`: {`Object`} - Config options to update
|
||||
|
||||
|
90
node_modules/flowbite-datepicker/docs/date-string+format.md
generated
vendored
Normal file
@ -0,0 +1,90 @@
|
||||
# Date String & Format
|
||||
|
||||
## Date format
|
||||
|
||||
Date format must be declared using the combination of the predefined tokens and separators.
|
||||
|
||||
**– Tokens:**
|
||||
|
||||
Token | Description | Example
|
||||
--|--|--
|
||||
`d` | day of the month without leading zero | 1, 2, ..., 31
|
||||
`dd` | day of the month with leading zero | 01, 02, ..., 31
|
||||
`D` | shortened day name of the week | Sum, Mon, ..., Sat
|
||||
`DD` | full day name of the week | Sunday, Monday, ..., Saturday
|
||||
`m` | numeric month without leading zero | 1, 2, ..., 12
|
||||
`mm` | numeric month with leading zero | 01, 02, ..., 12
|
||||
`M` | shortened month name | Jan, Feb, ..., Dec
|
||||
`MM` | full month name | January, February, ..., December
|
||||
`y` | year without leading zero | 1, 645, 1900, 2020
|
||||
`yy` | 2-digit year with leading zero | 01, 45, 00, 20
|
||||
`yyyy` | 4-digit year with leading zero | 0001, 0645, 1900, 2020
|
||||
|
||||
**– Separators:**
|
||||
|
||||
All printable ASCII characters other than numbers and alphabets, `年`, `月` and `日`
|
||||
|
||||
**Notes**
|
||||
|
||||
- Since the built-in parser extracts the parts of the date by splitting the string with the separators, formats without separators (e.g. `yyyymmdd`) are not supported.
|
||||
- 2-digit year (`yy`) is only supported by the built-in formatter; the built-in parser doesn't.
|
||||
|
||||
> You can write your custom parser/formatter to handle arbitrary format including the above. See [`format` config option](options?id=format) for the details.
|
||||
|
||||
- Date format must not include the string set in the [`dateDelimiter`](options?id=datedelimiter) config option.
|
||||
|
||||
## Date string
|
||||
|
||||
Date strings are expected to be formatted in the date format set in the [`format`](options?id=format) config option (default: `mm/dd/yyyy`), but it isn't necessary to match the format strictly.
|
||||
|
||||
##### How Built-in Parser parses
|
||||
|
||||
The built-in parser uses the format string only to determine the sequence in which the date parts (year/month/day/day-of-the-week) and separators appear in the date string. The differences in separator characters, whether to have leading zeros and whether month name (full or short) or month number is used are ignored. Therefore, as long as the parts of a date string appear in the same order as the format's, the variations of the same date's date string are equally parsed to the same date.
|
||||
|
||||
There are some cases the parser treats the parts in specific way:
|
||||
- year is treated as full year _(1-/2-digit years are not mapped to nearby century's)_
|
||||
- month number not between 1 and 12 is treated in the similar way to [`Date.prototype.setMonth()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth)
|
||||
- month name is evaluated in case-insensitive begin-with match
|
||||
- day not between 1 and last-day-of-the-month is treated in the same way as [`Date.prototype.setDate()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate)
|
||||
- day-of-the-week is not evaluated _(not totally ignored, the existence is respected)_
|
||||
- if a part is omitted from the format, missing in the date string or parsed unsuccessfully, current date's value is used to complement.
|
||||
|
||||
Here are some examples of how irregular date strings are parsed.
|
||||
|
||||
- Different separators from the format:
|
||||
- if format is `yyyy-mm-dd`, `2020/04/22` ⟹ _April 22nd, 2020_
|
||||
- if format is `m.d.y`, `1/15 (2018)` ⟹ _January 15th, 2018_
|
||||
- With/without leading zeros:
|
||||
- if format is `d/m/y`, `05/06/07` ⟹ _June 5th, 0007_
|
||||
- if format is `yyyy-mm-dd`, `20-5-4` ⟹ _May 4th, 0020_
|
||||
- Number for the month name:
|
||||
- if format is `M-d-y`, `7-14-2020` ⟹ _July 14th, 2020_
|
||||
- Incomplete month name/full name for short name:
|
||||
- if format is `M-d-y`,
|
||||
- `ap-22-2020` ⟹ _April 22nd, 2020_
|
||||
- `sept-22-2020` ⟹ _September 22nd, 2020_
|
||||
- `Ju-4-2020` ⟹ _June 4th, 2020_
|
||||
- `July-4-2020` ⟹ _July 4th, 2020_
|
||||
- Month/day outside the normal range:
|
||||
- if format is `mm/dd/yyyy`,
|
||||
- `14/31/2019` ⟹ _March 2nd, 2020_
|
||||
- `0/0/2020` ⟹ _November 30th, 2019_
|
||||
- Omitted/missing/invalid parts:
|
||||
- if format is `mm/yyyy` and current date is _January 15th, 2020_,
|
||||
- `04/2022` ⟹ _April 15th, 2022_
|
||||
- if format is `m/d/y` and current date is _January 15th, 2020_,
|
||||
- `4/22` ⟹ _April 22nd, 2020_
|
||||
- `/22/2016` ⟹ _January 22nd, 2016_
|
||||
- `7/xx/2016` ⟹ _July 15th, 2016_
|
||||
- Day-of-the-week:
|
||||
- if format is `D m/d y` and current date is _January 15th, 2020_,
|
||||
- `xx 5/4 2022` ⟹ _May 4th, 2022_
|
||||
- `5/4 2022` ⟹ _October 13th, 2025 (= April 2022nd, 2020)_
|
||||
|
||||
##### 'Today' shortcut
|
||||
|
||||
You can use `'today'` as a shortcut to the current date.
|
||||
|
||||
##### Multiple dates
|
||||
|
||||
You can combine multiple dates into a single date string by joining the dates with the delimiter set in the [dateDelimiter](options?id=datedelimiter) config option.
|
99
node_modules/flowbite-datepicker/docs/i18n.md
generated
vendored
Normal file
@ -0,0 +1,99 @@
|
||||
# Internationalization (i18n)
|
||||
|
||||
Internationalization of Datepicker is done by adding languages' locales (month and day names, button labels, date format and start of the week) to `Datepicker.locales`.
|
||||
`en`:_English (US)_ is the pre-installed default language and also used as the fallback language.
|
||||
|
||||
> The package includes locale files taken from [bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker).
|
||||
|
||||
## Adding languages
|
||||
|
||||
Import the ones you need and merge them with `Datepicker.locales`.
|
||||
|
||||
```javascript
|
||||
import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';
|
||||
import es from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/es.js';
|
||||
import fr from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/fr.js';
|
||||
import zhCN from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/zh-CN.js';
|
||||
|
||||
Object.assign(Datepicker.locales, es, fr, zhCN);
|
||||
```
|
||||
|
||||
_Or if you use a bundler that supports [package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points) (e.g. [Rollup](https://rollupjs.org/) with [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) plugin v8.4+, [webpack](https://webpack.js.org/) v5+)_
|
||||
|
||||
```javascript
|
||||
import Datepicker from 'vanillajs-datepicker/Datepicker';
|
||||
import es from 'vanillajs-datepicker/locales/es';
|
||||
import fr from 'vanillajs-datepicker/locales/fr';
|
||||
import zhCN from 'vanillajs-datepicker/locales/zh-CN';
|
||||
|
||||
Object.assign(Datepicker.locales, es, fr, zhCN);
|
||||
```
|
||||
|
||||
##### for browser
|
||||
|
||||
Load the locale files you need after Datepicker
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/locales/es.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/locales/fr.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/locales/zh-CN.js"></script>
|
||||
```
|
||||
|
||||
### Custom locale
|
||||
|
||||
If needed, you can create your custom locale file by modifying the following template.
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* English translation
|
||||
*/
|
||||
export default {
|
||||
en: {
|
||||
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
|
||||
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
||||
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
today: "Today",
|
||||
clear: "Clear",
|
||||
titleFormat: "MM y",
|
||||
format: "mm/dd/yyyy",
|
||||
weekStart: 0
|
||||
}
|
||||
};
|
||||
```
|
||||
> You can omit properties that can fallback to `en`:_English (US)_.
|
||||
>
|
||||
> **for browser:**
|
||||
> ```javascript
|
||||
> /**
|
||||
> * English translation
|
||||
> */
|
||||
> (function () {
|
||||
> Datepicker.locales.en = {
|
||||
> //... same properties as the above
|
||||
> }
|
||||
> })();
|
||||
> ```
|
||||
|
||||
|
||||
Locale must be named with language code. The code can be arbitrary, but should comply with [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).
|
||||
|
||||
|
||||
## Text Direction
|
||||
|
||||
Text direction handling of Datepicker is mainly done by stylesheet and completely separated from its language configuration.
|
||||
|
||||
The picker element is styled to follow the container element's text direction. If the direction of the associated input field is different from it, date picker automatically detects the difference and sets the picker element's `dir` attribute so that the direction matches the input field's.
|
||||
|
||||
> **When customizing the prev/next button**
|
||||
>
|
||||
> The default of the prev/next button arrows are a pair of a parenthesis variant, which automatically flip according to text direction. If you customize the arrows with something other than parenthesis characters, you may need to add a style like below to your project's CSS in order for the arrows to flip automatically.
|
||||
>
|
||||
> ```css
|
||||
> [dir="rtl"] .datepicker-controls .prev-btn,
|
||||
> [dir="rtl"] .datepicker-controls .next-btn {
|
||||
> transform: scaleX(-1);
|
||||
> }
|
||||
>```
|
BIN
node_modules/flowbite-datepicker/docs/images/datepicker-inline.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/datepicker.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/multidate.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/picker-structure.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/rangepicker.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/view-days.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/view-decades.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 8.5 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/view-months.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 6.3 KiB |
BIN
node_modules/flowbite-datepicker/docs/images/view-years.jpg
generated
vendored
Normal file
After Width: | Height: | Size: 8.7 KiB |
26
node_modules/flowbite-datepicker/docs/index.html
generated
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>vannilajs-datepicker - Vanilla JS datepicker for Bulma and other CSS frameworks</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'vanillajs-datepicker',
|
||||
repo: 'https://github.com/mymth/vanillajs-datepicker',
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 4,
|
||||
auto2top: true,
|
||||
};
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-scss.min.js"></script>
|
||||
</body>
|
||||
</html>
|
354
node_modules/flowbite-datepicker/docs/options.md
generated
vendored
Normal file
@ -0,0 +1,354 @@
|
||||
# Options
|
||||
|
||||
There are 2 kinds of config options: the Datepicker options and the DateRangePicker options. The former are for `DatePicker` object and the latter are for `DateRangePicker` object.
|
||||
|
||||
Datepicker options can be used with date range picker. And when doing so, you can pass them mixing with DateRangePicker options into one "options" object.
|
||||
|
||||
> Datepicker options passed to date range picker are applied to its start- and end-date pickers.
|
||||
|
||||
Aside from a couple of exceptions, config options can be updated dynamically using the `setOptions()` method.
|
||||
|
||||
### Datepicker Options
|
||||
|
||||
#### autohide
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to hide the date picker immediately after a date is selected.
|
||||
|
||||
> Not available on inline picker.
|
||||
|
||||
#### beforeShowDay
|
||||
- Type: `Function`
|
||||
- Default: `null`
|
||||
|
||||
Function to customize the day cells in the days view. The function is called when each day cell is rendered.
|
||||
|
||||
- **function**
|
||||
- Arguments:
|
||||
- `date`: {`Date`} - Date associated with the cell
|
||||
- Return:
|
||||
- {`Object`} - Things to customize. Available properties are:
|
||||
- `enabled`: {`Boolean`} - whether the cell is selectable
|
||||
- `classes`: {`String`} - space-separated additional CSS classes for the cell element
|
||||
- `content`: {`String`} - HTML for the cell element's child nodes
|
||||
- {`String`} - additional classes — same as returning `{ classes: additionalClasses }`
|
||||
- {`Boolean`} - whether the cell is selectable — same as returning `{ enabled: isSelectable }`
|
||||
|
||||
```javascript
|
||||
function (date) {
|
||||
let isSelectable, additionalClasses, htmlFragment;
|
||||
//...your customization logic
|
||||
|
||||
return {
|
||||
enabled: isSelectable,
|
||||
classes: additionalClasses,
|
||||
content: htmlFragment,
|
||||
};
|
||||
// Or
|
||||
return additionalClasses;
|
||||
// Or
|
||||
return isSelectable;
|
||||
}
|
||||
```
|
||||
|
||||
#### beforeShowDecade
|
||||
- Type: `Function`
|
||||
- Default: `null`
|
||||
|
||||
Function to customize the decade cells in the decades view. The function is called when each decade cell is rendered.
|
||||
> See [`beforeShowDay`](#beforeShowDay) for the function details.
|
||||
|
||||
#### beforeShowMonth
|
||||
- Type: `Function`
|
||||
- Default: `null`
|
||||
|
||||
Function to customize the month cells in the months view. The function is called when each month cell is rendered.
|
||||
> See [`beforeShowDay`](#beforeShowDay) for the function details.
|
||||
|
||||
#### beforeShowYear
|
||||
- Type: `Function`
|
||||
- Default: `null`
|
||||
|
||||
Function to customize the year cells in the years view. The function is called when each year cell is rendered.
|
||||
> See [`beforeShowDay`](#beforeShowDay) for the function details.
|
||||
|
||||
#### buttonClass
|
||||
- Type: `String`
|
||||
- Default: `'button'`
|
||||
|
||||
CSS class for `<button>` elements. (view switch, prev/next buttons, clear and today buttons)
|
||||
|
||||
> For constructor only. Cannot be used with `setOptions()`.
|
||||
|
||||
#### calendarWeeks
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show the week number ([ISO week](https://en.wikipedia.org/wiki/ISO_week_date)) on week rows.
|
||||
|
||||
#### clearBtn
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show the clear button.
|
||||
|
||||
#### container
|
||||
- Type: `String`
|
||||
- Default: `body`
|
||||
|
||||
CSS selector for the element to append the date picker.
|
||||
|
||||
> For constructor only. Cannot be used with `setOptions()`.
|
||||
> On inline picker, this option is ignored and overwritten to the associated element.
|
||||
|
||||
#### dateDelimiter
|
||||
- Type: `String`
|
||||
- Default: `','`
|
||||
|
||||
Delimiter string to separate the dates in a multi-date string.
|
||||
|
||||
> The delimiter must not be included in date format string.
|
||||
|
||||
#### datesDisabled
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Dates to disable. Array of date strings, Date objects, time values or mix of those.
|
||||
|
||||
> Multi-date string cannot be used. Use multiple single-date strings instead.
|
||||
|
||||
#### daysOfWeekDisabled
|
||||
- Type: `Number[]`
|
||||
- Default: `[]`
|
||||
|
||||
Days of the week to disable. `0`:_Sunday_ – `6`:_Saturday_, up to 6 items.
|
||||
|
||||
#### daysOfWeekHighlighted
|
||||
- Type: `Number[]`
|
||||
- Default: `[]`
|
||||
|
||||
Days of the week to highlight. `0`:_Sunday_ – `6`:_Saturday_, up to 6 items.
|
||||
|
||||
#### defaultViewDate
|
||||
- Type: `String`|`Date`|`Number`
|
||||
- Default: current date
|
||||
|
||||
The date to be focused when the date picker opens with no selected date(s).
|
||||
|
||||
#### disableTouchKeyboard
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to prevent on-screen keyboard on mobile devices from showing up when the associated input field receives focus.
|
||||
|
||||
> Not available on inline picker.
|
||||
|
||||
#### format
|
||||
- Type: `String`|`Object`
|
||||
- Default: `'mm/dd/yyyy'`
|
||||
|
||||
[Date format](date-string+format?id=date-format) string.
|
||||
|
||||
> The format string must not include the [dateDelimiter](options?id=datedelimiter) string.
|
||||
|
||||
Alternatively, object that contains custom parser and formatter functions can be used.
|
||||
|
||||
- **Parser**
|
||||
- Property \(function\) name: `toValue`
|
||||
- Arguments:
|
||||
- `date`: {`String`|`Date`|`Number`} - date string, Date object or time value to parse
|
||||
- `format`: {`Object`} - format object itself
|
||||
- `locale`: {`Object`} - locale of the current language
|
||||
- Return:
|
||||
- {`Date`} - parsed date object
|
||||
- **Formatter**
|
||||
- Property \(function\) name: `toDisplay`
|
||||
- Arguments::
|
||||
- `date`: {`Date`} - date object to format
|
||||
- `format`: {`Object`} - format object itself
|
||||
- `locale`: {`Object`} - locale of the current language
|
||||
- Return:
|
||||
- {`String`} - formated date
|
||||
|
||||
```javascript
|
||||
{
|
||||
format: {
|
||||
toValue(date, format, locale) {
|
||||
let dateObject;
|
||||
//...your custom parse logic
|
||||
return dateObject;
|
||||
},
|
||||
toDisplay(date, format, locale) {
|
||||
let dateString;
|
||||
//...your custom format logic
|
||||
return dateString;
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
#### language
|
||||
- Type: `String`
|
||||
- Default: `'en'`
|
||||
|
||||
The language code of the language used by the date picker.
|
||||
|
||||
> For languages other than `en` to work, their locales must be loaded into your project/program.
|
||||
> See [i18n](i18n) for the details.
|
||||
|
||||
#### maxDate
|
||||
- Type: `String`|`Date`|`Number`
|
||||
- Default: `null`
|
||||
|
||||
Maximum limit to selectable date. No limit is applied if `null` is set.
|
||||
|
||||
#### maxNumberOfDates
|
||||
- Type: `Number`
|
||||
- Default: `1`
|
||||
|
||||
Maximum number of dates users can select. No limit is applied if `0` is set.
|
||||
|
||||
> Not available for date range picker.
|
||||
|
||||
#### maxView
|
||||
- Type: Number
|
||||
- Default: `3`
|
||||
|
||||
Maximum limit to the view that the date picker displays. `0`:_days_ – `3`:_decades_.
|
||||
|
||||
#### minDate
|
||||
- Type: `String`|`Date`|`Number`
|
||||
- Default: `null`
|
||||
|
||||
Minimum limit to selectable date. No limit is applied if `null` is set.
|
||||
|
||||
#### nextArrow
|
||||
- Type: `String`
|
||||
- Default: `'»'`
|
||||
|
||||
HTML (or plain text) for the button label of the "Next" button.
|
||||
|
||||
> See the note in [i18n ≻ Text Direction](i18n?id=text-direction) when using with RTL languages.
|
||||
|
||||
#### orientation
|
||||
- Type: `String`
|
||||
- Default: `'auto'`
|
||||
|
||||
Space-separated string for date picker's horizontal and vertical placement to the associated input field. `left`|`right`|`auto` for horizontal and `top`|`bottom`|`auto` for vertical.
|
||||
|
||||
> The order can be random.
|
||||
> If one direction is omitted, it falls back to `auto`. (e.g. `'top'` == `'top auto'`)
|
||||
> Not available on inline picker.
|
||||
|
||||
#### pickLevel
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
The level that the date picker allows to pick. `0`:_date_,`1`: _month_ or `2`:_year_.
|
||||
|
||||
> When this option is `1`, the selected date becomes the 1st of the month or, if the date picker is the end-date picker of date range picker, the last day of the month.
|
||||
> When this option is `2`, the selected date becomes January 1st of the year or, if the date picker is the end-date picker of date range picker, December 31st of the year.
|
||||
|
||||
#### prevArrow
|
||||
- Type: `String`
|
||||
- Default: `'«'`
|
||||
|
||||
HTML (or plain text) for the button label of the "Prev" button.
|
||||
|
||||
> See the note in [i18n ≻ Text Direction](i18n?id=text-direction) when using with RTL languages.
|
||||
|
||||
#### showDaysOfWeek
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to show the day names of the week.
|
||||
|
||||
#### showOnClick
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to show the date picker when the associated input filed is clicked.
|
||||
|
||||
> Not available on inline picker.
|
||||
|
||||
#### showOnFocus
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to show the date picker automatically when the associated input filed receives focus.
|
||||
|
||||
> Not available on inline picker.
|
||||
|
||||
#### startView
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
The view displayed when the date picker opens. `0`:_days_ – `3`:_decades_.
|
||||
|
||||
#### title
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Title string shown in the date picker's title bar.
|
||||
|
||||
> The title bar is not displayed if the title is empty.
|
||||
|
||||
#### todayBtn
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show the today button.
|
||||
|
||||
#### todayBtnMode
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
The mode how the today button behaves.
|
||||
|
||||
Mode | Name | Description
|
||||
--|--|--
|
||||
`0` | focus | Move the focused date to the current date without changing the selection
|
||||
`1` | select | Select (or toggle the selection of) the current date
|
||||
|
||||
#### todayHighlight
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to highlight the current date.
|
||||
|
||||
#### updateOnBlur
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to update the selected date(s) with the input field's value when the input field is losing focus.
|
||||
|
||||
> When this option is `false`, if the user edits the date string in input field, it will be parsed and applied only when the user presses the <kbd>Enter</kbd> key. If the edit is left unparsed, it will be discarded when input field becomes unfocused (by <kbd>Tab</kbd> key press or click outside the picker element/input field).
|
||||
>
|
||||
> Not available on inline picker.
|
||||
|
||||
#### weekStart
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
Start day of the week. `0`:_Sunday_ – `6`:_Saturday_.
|
||||
|
||||
|
||||
### DateRangePicker Options
|
||||
|
||||
#### allowOneSidedRange
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to allow one side of the date-range to be blank.
|
||||
|
||||
> When this option is `false`, if the user selects a date on one side while the other side is blank, the date range picker complements the blank side with the same date as the selected side.
|
||||
> Similarly, if the user clears one side of the date-range, the date range picker also clears the other side automatically.
|
||||
|
||||
#### inputs
|
||||
- Type: `Element[]`
|
||||
- Default: `input` elements inside the associated block element
|
||||
|
||||
Input fields to attach start- and end-date pickers. Must contain 2 items.
|
||||
|
||||
> For constructor only. Cannot be used with `setOptions()`.
|
174
node_modules/flowbite-datepicker/docs/overview.md
generated
vendored
Normal file
@ -0,0 +1,174 @@
|
||||
# Overview
|
||||
|
||||
## Types
|
||||
|
||||
##### Date picker (regular/text-input picker)
|
||||
|
||||
When Datepicker object is attached to an `<input>` element, it's configured as a regular date picker.
|
||||
|
||||

|
||||
|
||||
##### Inline picker
|
||||
|
||||
When Datepicker object is attached to a block element, it's configured as an inline picker.
|
||||
|
||||

|
||||
|
||||
- The picker element is embedded to the block element. (always shown)
|
||||
- Initial selection can be set in the `data-date` attribute
|
||||
- Inline picker does not support operation by keyboard.
|
||||
|
||||
##### Date range picker
|
||||
|
||||
Date range picker is essentially a wrapper/controller of 2 date pickers. It's the only type of DateRangePicker object.
|
||||
|
||||

|
||||
|
||||
- Date range picker cannot be attached to elements that contain less than 2 `<input>` elements
|
||||
- Regular date picker is attached to each of `<input>` elements
|
||||
|
||||
|
||||
## Picker Element
|
||||
|
||||

|
||||
|
||||
1. **Title bar**
|
||||
2. **View switch**:
|
||||
Button to change the view from days to months, months to years and years to decades
|
||||
The button label is used for the title of view contents.
|
||||
3. **Prev button**:
|
||||
Button to change the contents of the current view to the previous month/year/decade/century
|
||||
4. **Next button**:
|
||||
Button to change the contents of the current view to the next month/year/decade/century
|
||||
5. **View**:
|
||||
Area to display a calendar (for days) or a grid of months, years, or decades
|
||||
6. **Cell**:
|
||||
Block for each day, month, year or decade
|
||||
It works as a select button in days view. In the other views, it works as a button to change the view to the period of time it represents. (months view → days view of the month, years → months of the year, decades → years of the decade)
|
||||
7. **Today button**:
|
||||
Button to jump to the current date
|
||||
It can be customized to select the current date.
|
||||
8. **Clear button**:
|
||||
Button to clear the selection
|
||||
|
||||
##### Days view
|
||||
|
||||
The view to select a date. The days are displayed in monthly calendar layout. Optionally, ISO week numbers can be shown in the view.
|
||||
|
||||

|
||||
|
||||
##### Months view
|
||||
|
||||
The view to select a month. The months are shown in short name.
|
||||
|
||||

|
||||
|
||||
##### Years view
|
||||
|
||||
The view to select a year.
|
||||
|
||||

|
||||
|
||||
##### Decades view
|
||||
|
||||
The view to select a decade.
|
||||
|
||||

|
||||
|
||||
|
||||
## Multidate Mode
|
||||
|
||||
When [`maxNumberOfDates`](options?id=maxnumberofdates) config option is set to other than `1`, date picker turns to the multdate mode.
|
||||
|
||||
In this mode, the day cells in the days view act as toggle switch of the date's select status. The order of selection is kept; newly selected date is appended to the existing selection and the oldest item in the selection drops if the number of selected dates exceeds the option's value.
|
||||
In the input field, selected dates are joined with the delimiter string set in the [`dateDelimiter`](options?id=dateDelimiter) config option.
|
||||
|
||||

|
||||
|
||||
Multidate mode is not applied to the pickers of date range picker.
|
||||
|
||||
## Providing date
|
||||
|
||||
Datepicker accepts [date string](date-string+format), Date object or [time value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Time_value_or_timestamp_number) for the source of a date. All given dates are parsed/converted into the internal date value individually.
|
||||
|
||||
> The time value of local time `00:00:00.000` of the date is used for the internal date value.
|
||||
|
||||
The dates before _January 1st, 0000_ are not supported because the built-in parser cannot handle negative numbers. (`-` sign is one of the predefined separator characters)
|
||||
|
||||
To provide dates for config options or API method arguments, you can just follow the above general rules.
|
||||
|
||||
##### Initial selection
|
||||
|
||||
To provide initial date selection to a date picker, you can set a date string to the `<input>` element's `value` attribute. This also works for date range picker's `<input>` elements.
|
||||
|
||||
For inline picker, you can set a date string to the `data-date` attribute of the element to attach the picker.
|
||||
|
||||
##### Input field
|
||||
|
||||
You can update the selected date by editing the date string in the input field.
|
||||
|
||||
> Since the built-in parser is very tolerant of format errors, a small typing error can cause an unexpected (and sometimes unimaginable) date in the input field. _(See [How Built-in Parser parses](./date-string+format?id=how-built-in-parser-parses))_
|
||||
> If you think this is not good, you might want to consider using the [`updateOnBlur`](./options?id=updateonblur):`false` config option in order to implicitly nudge users to look at their input.
|
||||
|
||||
## Keyboard Operation
|
||||
|
||||
You can operate date picker using keyboard. Here are the available keyboard operations.
|
||||
|
||||
**When picker is hidden**
|
||||
|
||||
- <KBD>**↓**</KBD> (arrowDown)**,** <kbd>**Esc**</kbd> **:**
|
||||
Show the picker
|
||||
- <kbd>**Enter**</kbd> **:**
|
||||
Update the picker with the input field's value
|
||||
|
||||
**When picker is shown**
|
||||
|
||||
- <kbd>**Esc**</kbd> **:**
|
||||
Hide the picker
|
||||
- <kbd>**←**</kbd> (arrowLeft)**,** <kbd>**→**</kbd> (arrowRight) **:**
|
||||
Move focused date/month/year/decade 1 step horizontally
|
||||
- <kbd>**↑**</kbd> (arrowUp)**,** <kbd>**↓**</kbd> (arrowDown) **:**
|
||||
Move focused date/month/year/decade 1 step vertically
|
||||
- <kbd>**Ctrl**</kbd> (or <kbd>Meta</kbd>) **+** <kbd>**←**</kbd> (arrowLeft) **:**
|
||||
Move to previous month/year/decade/century _(Shortcut of the "Prev" button)_
|
||||
- <kbd>**Ctrl**</kbd> (or <kbd>Meta</kbd>) **+** <kbd>**→**</kbd> (arrowRight) **:**
|
||||
Move to next month/year/decade/century _(Shortcut of the "Next" button)_
|
||||
- <kbd>**Ctrl**</kbd> (or <kbd>Meta</kbd>) **+** <kbd>**↑**</kbd> (arrowUp) **:**
|
||||
Change the view upward _(Shortcut of the view switch)_
|
||||
- <kbd>**Enter**</kbd> **:**
|
||||
- *when days view is shown:*
|
||||
Select the focused date
|
||||
- *otherwise:*
|
||||
Change the view downward for the focused decade/year/month
|
||||
- <kbd>**Backspace**</kbd>**,** <kbd>**Delete**</kbd>**, any printable character,** <kbd>**Shift**</kbd> **+ either of arrow keys** ( <kbd>←</kbd>/<kbd>→</kbd>/<kbd>↑</kbd>/<kbd>↓</kbd> ) **:**
|
||||
Enter [edit mode](overview?id=edit-mode)
|
||||
|
||||
**When in [edit mode](overview?id=edit-mode)**
|
||||
|
||||
- <kbd>**Esc**</kbd> **:**
|
||||
Hide the picker exiting edit mode
|
||||
- <kbd>**Enter**</kbd> **:**
|
||||
Exit edit mode updating the picker with the change on the input field
|
||||
|
||||
> Note: Keyboard operation is not supported by inline picker.
|
||||
|
||||
## Edit Mode
|
||||
|
||||
When the picker element is shown, date picker (in the primary state) captures key-press events and uses them to control the picker element. Therefore, users cannot edit the `<input>` element in this state.
|
||||
To solve this, Datepicker has the edit mode.
|
||||
|
||||
Date picker automatically enters edit mode when:
|
||||
|
||||
- the `<input>` element is clicked
|
||||
- <kbd>Backspace</kbd>, <kbd>Delete</kbd> or any of printable character key is pressed (without control/meta key).
|
||||
- <kbd>Shift</kbd> + either of arrow keys ( <kbd>←</kbd>/<kbd>→</kbd>/<kbd>↑</kbd>/<kbd>↓</kbd> ) is pressed (without control/meta key).
|
||||
|
||||
and exits edit mode when:
|
||||
|
||||
- <kbd>Enter</kbd> key or <kbd>Esc</kbd> key is pressed
|
||||
- the picker element becomes hidden
|
||||
|
||||
While date picker is in edit mode,
|
||||
|
||||
- highlight of the `<input>` element becomes more prominent
|
||||
- keyboard operation of the picker element is temporarily disabled
|