1 | // IGNORE IT -->
|
2 |
|
3 | ![](https://camo.githubusercontent.com/b39d1e12ba779319ff9bab0f56ba7e41f108d898/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6a756d6f646164612f76756558696e2e737667)
|
4 | ![code-test](https://github.com/Js-Monkey/better-datepicker/workflows/code-test/badge.svg)
|
5 | ![](https://www.travis-ci.org/Js-Monkey/better-datepicker.svg?branch=master)
|
6 | ![](https://img.shields.io/codecov/c/github/js-monkey/better-datepicker/master.svg)
|
7 |
|
8 |
|
9 | ## Doc
|
10 | TODO
|
11 |
|
12 | ## Installing
|
13 |
|
14 | Using npm:
|
15 |
|
16 | ```bash
|
17 | $ npm i better-datepicker
|
18 | ```
|
19 |
|
20 | Using yarn:
|
21 |
|
22 | ```bash
|
23 | $ yarn add better-datepicker
|
24 | ```
|
25 |
|
26 | ## Usage
|
27 |
|
28 | es6
|
29 | ```js
|
30 | import {createDatePicker} from 'better-datepicker'
|
31 | import 'better-datepicker/index.css'
|
32 | ```
|
33 | CommonJS
|
34 |
|
35 | ```js
|
36 | const {createDatePicker} = require('better-datepicker').default
|
37 | require('better-datepicker/index.css')
|
38 | ```
|
39 |
|
40 |
|
41 | ## Example
|
42 |
|
43 | ```html
|
44 | <input type="text" id="input">
|
45 | ```
|
46 |
|
47 | ```js
|
48 | const input = document.querySelector('#input')
|
49 | createDatePicker(input,{
|
50 | placement: 'bottom',
|
51 | type: 'date',
|
52 | zIndex: 2000,
|
53 | format: 'yyyy/MM/dd'
|
54 | })
|
55 | ```
|
56 |
|
57 | ## Options
|
58 |
|
59 | | Options | Description | Type | Accepted Values | Default |
|
60 | |---------|------------ |---------- |------------- |-------- |
|
61 | | type | Type of datepicker | string | date/date-range/month/month-range | date |
|
62 | | format | To set the date format | string | - | yyyy/mm/dd |
|
63 | | placement | Placement of datepicker | string | top/bottom/right/left | bottom |
|
64 | | disabledDate | Specifies the date that cannot be selected | function | - | - |
|
65 | | offset | Distance between Picker and inputElement | number | - | 12 |
|
66 | | insertTo | Name of the node inserted | string | body/parent | body |
|
67 | | binding | Bind the value of the inputElement | boolean | - | true |
|
68 |
|
69 | ## Instance methods
|
70 |
|
71 | | name | Description | params |
|
72 | |---------|------------ |------------ |
|
73 | | destroyed | destroyed the datepicker,clear InputElement value| -
|
74 | | onChange | called callback when date has changed |(callback)
|
75 | | updateOptions | Update configuration, remove old datepicker | (options)
|
76 | | getCurrentDate | get current date | -
|
77 |
|
78 | ## TODO LIST
|
79 |
|
80 | | versions | Description|
|
81 | |---------|------------ |
|
82 | | 0.1.0 | type support week/year/year-range|
|
83 | | 0.3.0 | instance methods support open、close |
|
84 | | 0.5.0 | methods support set defaultOptions |
|
85 | | 0.7.0 | options support unlinkPanels、zIndex、readonly、disabled、default-value |
|
86 | | 0.9.0 | - |
|
87 |
|
88 | ## Browser support
|
89 |
|
90 | todo
|
91 |
|
92 |
|
93 |
|