DDatepicker

Usage

1. Import the component

import DDatepicker from 'd-datepicker';

2. Add it to the components object

components: {DDatepicker}

3. 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]). |