1.0.2 • Published 2 years ago
@lucasz/d-datepicker v1.0.2
DDatepicker
Usage
- Import the component
import DDatepicker from 'd-datepicker';
- Add it to the components object
components: {DDatepicker}
- Use it in the template
<DDatepicker
...props
/>Props
| Name | Type | Required | Values | Description |
|---|---|---|---|---|
| idAttr | String | ❌ | - | The id of the input element. |
| nameAttr | String | ❌ | - | The name of the input element. |
| classAttr | String | ❌ | - | The class of the input element. |
| placeholderAttr | String | ❌ | - | The placeholder of the input element. |
| currentDate | Date | ❌ | Default value: new Date() | The currently selected date. |
| minDate | Date | ❌ | Default value: null | Restriction for the minimum date. Dates earlier than this date cannot be picked from. |
| maxDate | Date | ❌ | Default value: null | Restriction for the maximum date. Dates later than this date cannot be picked from. |
| leftArrowIcon | String | ❌ | - | The icon for selecting the previous month. |
| rightArrowIcon | String | ❌ | - | The icon for selecting the next month. |
| arrowIconAlt | String | ❌ | - | The alt value for both arrow icons. |
| locale | Object<{weekday: String[], todayBtn: String, clearBtn: String, closeBtn: String}> | ❌ | Default value: { weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], todayBtn: "Today", clearBtn: "Clear", closeBtn: "Close", } | Represents the strings to be used for the weekdays and buttons, this adds the possibility to use several languages. |
| inputDividerSymbol | String | ❌ | Default value: / ---Possible values:/, - | The divider symbol that is shown inside the input field, and used to parse the date from the input field. |
| inputFormat | Boolean | ❌ | Default value: DD_MM_YY ---Possible values: DD_MM_YY, MM_DD_YY, YY_MM_DD | The format of the date, so the order of day, month and year. |
| swipingEnabled | Boolean | ❌ | Default value: false | The ability to switch between months with swiping movements, for mobile users. |
| hasDateRange | Boolean | ❌ | Default value: false | This enables the ability to select a range of dates. When this is enabled, the user needs to select 2 dates to specify the range. When the second date is selected, there is an event fired which returns two dates to indicate the range. |
Events
| Name | Description |
|---|---|
| value-changed | Fires when a date has been selected. Returns a Date and with hasDateRange enabled it returns two dates when the second date is selected(Date, Date). |