Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
date-of-birth-js
Advanced tools
date-of-birth-js - npm Package Compare versions
Comparing version 2.0.3 to 2.0.4
| { | ||
| "name": "date-of-birth-js", | ||
| "version": "2.0.3", | ||
| "version": "2.0.4", | ||
| "description": "A datepicker specific for date of birth", | ||
@@ -5,0 +5,0 @@ "main": "dist/js/index.js", |
103
README.MD
| # Date-of-birth JS | ||
| A datepicker specific for collecting date of birth with straight forward interface. Bundle size 6.9kB gzipped (Source: Bundlephobia). | ||
| A datepicker specific for collecting date of birth with straight forward user interface. Bundle size 6.9kB gzipped (Source: Bundlephobia). | ||
| Clicking unintuitive datepicker 15 times just to get your date of birth is kinda annoying, right? With this package intuitive UI, you only need 4 click to get your date of birth. | ||
| Clicking unintuitive datepicker 15 times just to get your date of birth is kinda annoying, right? With this package you only need 4 click to get your date of birth. | ||
@@ -18,4 +18,4 @@ ## Tl;dr feature | ||
| ### Include stylesheet to head tag | ||
| Include `main.css` to in the `<head>` tag: | ||
| #### Include stylesheet to head tag | ||
| Include `date-of-birth-js.min.css` in the `<head>` tag: | ||
| ```html | ||
@@ -30,3 +30,3 @@ <head> | ||
| ### Include JS library | ||
| #### Include JS library | ||
| and include `date-of-birth.min.js` just above your closing `</body>` tag | ||
@@ -42,2 +42,4 @@ ```html | ||
| If you downloaded the package via zip file from Github, these files are located in the `dist` folder. Otherwise, you can use the Unpkg CDN as shown in the examples above. | ||
| ## Installation Via NPM | ||
@@ -60,11 +62,11 @@ Install via NPM | ||
| ```scss | ||
| @import '~js-date-of-birth/src/js/main' | ||
| @import '~js-date-of-birth/src/stylesheet/main' | ||
| ``` | ||
| Import CSS file to your projects | ||
| ```scss | ||
| @import '~js-date-of-birth/dist/css/main.css' | ||
| @import '~js-date-of-birth/dist/css/date-of-birth-js.min.css' | ||
| ``` | ||
| ## How to use it in your code | ||
| ```js | ||
| const dob = datepicker(selector, options) | ||
| const dob = dobDatepicker(selector, options) | ||
| ``` | ||
@@ -78,3 +80,3 @@ So what are `selector` and `options` arguments? | ||
| - `DOM Node` - DOM Node such as `document.querySelector('#my-id')` | ||
| 2. `Options` is optional argument, `Options` is an Object containing datepicker's configurations, you can adjust it according to your need. You can read more here. | ||
| 2. `Options` is optional argument, `Options` is an Object containing datepicker's configurations, you can adjust it according to your need. You can read more below. | ||
@@ -116,5 +118,5 @@ _NOTE: Datepicker will not change the value of input fields with a type of_ `date` - `<input type="date">`. _This is because those input's already have a built in calendar and can cause problems. Use_ `<input type="text">` _instead._ | ||
| Type: String | ||
| Possible value: 'inline' or 'popup' | ||
| Description: Display the datepicker whether inline (right in the bottom of the selected element) or in popup. | ||
| Type: String | ||
| Possible value: 'inline' or 'popup' | ||
| Description: Display the datepicker whether inline (right in the bottom of the selected element) or in popup. | ||
@@ -130,7 +132,7 @@ example: | ||
| ### `year_range` - determine how many year options to display | ||
| Type: Number | ||
| Possible value: Any | ||
| Description: By default the datepicker will show the last 120 years in select year page, you can the number using this property | ||
| Type: Number | ||
| Possible value: Any | ||
| Description: By default the datepicker will show the last 120 years in select year page, you can the number using this property | ||
| example: | ||
| example: | ||
| ```js | ||
@@ -142,4 +144,4 @@ // this will show all last 140 years in select year page | ||
| ### `enable_built_in_validation` - should the datepicker apply basic validation or not | ||
| Type: Boolean | ||
| Possible value: `True` or `False` | ||
| Type: Boolean | ||
| Possible value: `True` or `False` | ||
| Description: By default after user selecting a date the datepicker will do some basic validation. Here is the the validation rule: | ||
@@ -160,5 +162,5 @@ 1. Date should be exist - the selected date should be exist in a calendar. | ||
| ### `alerts.invalid_date_alert`- change built in validation's error message | ||
| Type: String | ||
| Possible value: Any | ||
| Description: As you can read in `enable_built_in_validation`section, upon failed validation the datepicker will show an alert message, the default message is `Date is invalid`. You can the message in this property. | ||
| Type: String | ||
| Possible value: Any | ||
| Description: As you can read in `enable_built_in_validation`section, upon failed validation the datepicker will show an alert message, the default message is `Date is invalid`. You can the message in this property. | ||
@@ -175,5 +177,5 @@ example: | ||
| ### `long_month`- Change name of the months to another language | ||
| Type: Array | ||
| Possible Value: Array with 12 elements with String type | ||
| Description: Change name of the months to another language. The default value is in English such as ['January', 'February', 'March', etc...] | ||
| Type: Array | ||
| Possible Value: Array with 12 string type elements | ||
| Description: Change name of the months to another language. The default value is in English such as ['January', 'February', 'March', etc...] | ||
@@ -188,5 +190,5 @@ example: | ||
| ### `short_month` - Change abbreviation for name of the months to another language | ||
| Type: Array | ||
| Possible Value: Array with 12 elements with String type | ||
| Description: Change abbreviation for months to other language. | ||
| Type: Array | ||
| Possible Value: Array with 12 string type elements with String type | ||
| Description: Change abbreviation for months to other language. | ||
@@ -201,7 +203,7 @@ example: | ||
| ### `show_long_month`- Determine whether to show full month name or the abbreviation on the select month page | ||
| Type: Boolean | ||
| Possible Value: `True`or `False` | ||
| Description: Determine whether to show full month name or the abbreviation on the select month page. | ||
| Type: Boolean | ||
| Possible Value: `True`or `False` | ||
| Description: Determine whether to show full month name or the abbreviation on the select month page. | ||
| example: | ||
| example: | ||
| ```js | ||
@@ -214,5 +216,5 @@ // show month abbreviation on select month page | ||
| ### `enable_ordinal_number`- Determine whether to show ordinal numbers or not | ||
| Type: Boolean | ||
| Possible value: `True` or `False` | ||
| Description: On select day page, determine whether to show ordinal numbers such as 1st, 2nd, 3rd, 4th, etc or not. | ||
| Type: Boolean | ||
| Possible value: `True` or `False` | ||
| Description: On select day page, determine whether to show ordinal numbers such as 1st, 2nd, 3rd, 4th, etc or not. | ||
@@ -227,5 +229,5 @@ Example: | ||
| ### `labels`- Change text labels to another language | ||
| Type: Object with predefined property with string values | ||
| Possible value: Any | ||
| Description: Change the text label to another language. By the default here is the default texts: | ||
| Type: Object | ||
| Possible value: Object with predefined property keys with string values | ||
| Description: Change the text label to another language. By the default here is the default texts: | ||
| ```js | ||
@@ -257,6 +259,6 @@ { | ||
| ``` | ||
| ### `dateFormat`- Change the date format returned by the datepicker | ||
| Type: Function | ||
| Possible Value: Function that returns String value | ||
| Description: Change date format returned by the datepicker to input field. The default format is 'YYYY-MM-DD' format. | ||
| ### `dateFormat`- Change the date format returned by the datepicker | ||
| Type: Function | ||
| Possible Value: Function that returns string value | ||
| Description: Change date format returned by the datepicker to input field. The default format is 'YYYY-MM-DD' format. | ||
@@ -275,5 +277,5 @@ example: | ||
| ### `zIndex`- Change z-index CSS property of the datepicker | ||
| Type: Object | ||
| Possible Value: Object with predefined property key with any valid z-index css value (string) | ||
| Description: Just in case the datepicker z-index order is conflicting with your layout, you can tune it without recompiling the stylesheets. | ||
| Type: Object | ||
| Possible Value: Object with predefined property keys with any valid z-index value (string) | ||
| Description: Just in case the datepicker z-index order is conflicting with your layout, you can tune it without recompiling the stylesheets. | ||
@@ -293,3 +295,3 @@ Here is the default value: | ||
| - `datepickerWidget`- is to change `z-index` CSS property of the datepicker itself. | ||
| - `invisibleBackground`- is to change `z-index` CSS property of the datepicker. If you resize the screen to less than 768px, the "invisible background" is the transparent black background around the datepicker. | ||
| - `invisibleBackground`- is to change `z-index` CSS property of the invisible background behind the datepicker widget. If you resize the screen to less than 768px, the "invisible background" is the transparent black background around the datepicker. | ||
@@ -308,9 +310,12 @@ example: | ||
| ## Acknowledgement | ||
| This package and documentation is inspired by [js-datepicker](https://github.com/qodesmith/datepicker#readme) package by [qodesmith](https://github.com/qodesmith) and contributors. | ||
| ## Acknowledgement | ||
| This package and documentation is inspired by [js-datepicker](https://github.com/qodesmith/datepicker#readme) package by [qodesmith](https://github.com/qodesmith) and contributors. | ||
| ## P.S | ||
| Sorry for bad english | ||
| ## License | ||
| MIT |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.35%
90752
- Number of lines in readme file
- increased by1.67%
304
No dependency changes