vue-datepicker-persian
v2.4.3
Published
A Persian Datepicker Component For Vue2
Downloads
14
Readme
vue-datepicker-persian
A Persian Datepicker Component For Vue2
Demo
Install
$ npm install vue-datepicker-persian --save
Usage
<script>
import DatePicker from 'vue-datepicker-persian'
export default {
components: { DatePicker },
data() {
return {
time1: '',
time2: '',
time3: '',
shortcuts: [
{
text: 'Today',
onClick: () => {
this.time3 = [ new Date(), new Date() ]
}
}
],
timePickerOptions:{
start: '00:00',
step: '00:30',
end: '23:30'
}
}
}
}
</script>
<template>
<div>
<date-picker v-model="time1" :first-day-of-week="1"></date-picker>
<date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
<date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
</div>
</template>
Props
| Prop | Type | Default | Description | |---------------------|---------------|-------------|-----------------------------------------------------| | type | String | 'date' | select date type (date/datetime/year/month/time) | | range | Boolean | false | if true, the type is daterange or datetimerange | | format | String | YYYY/MM/DD | The parsing tokens are similar to the moment.js | | lang | String/Object | fa | Translation (fa)(custom) | | clearable | Boolean | true | if false, don't show the clear icon | | confirm | Boolean | false | if true, need click the button to change the value | | editable | Boolean | true | if false, user cann't type it | | disabled | Boolean | false | Disable the component | | placeholder | String | | input placeholder text | | width | String/Number | 210 | input size | | not-before | String/Date | '' | Disable all dates before new Date(not-before) | | not-after | String/Date | '' | Disable all dates after new Date(not-after) | | disabled-days | Array/function| [] | Disable Days | | shortcuts | Boolean/Array | true | the shortcuts for the range picker | | time-picker-options | Object | {} | set timePickerOptions(start, step, end) | | minute-step | Number | 0 | if > 0 don't show the second picker(0 - 60) | | first-day-of-week | Number | 7 | set the first day of week (1-7) | | input-class | String | 'mx-input' | the input class name | | input-name | String | 'date' | the input name attr | | confirm-text | String | 'OK' | the default text to display on confirm button | | range-separator | String | '~' | the range separator text | | date-format | String | '' | format the time header and tooltip |
shortcuts
- true - show the default shortcuts
- false - hide the shortcuts
- Object[] - custom shortcuts, [{text, start, end}]
- Object[] - custom shortcuts, [{text, onClick}]
| Prop | Type | Description | |-----------------|---------------|------------------------| | text | String | Text | | start | Date | Start Date | | end | Date | End Date | | onClick | Function | click handler |
time-picker-options
- Object[] - custom time-picker, [{start, step, end}]
| Prop | Type | Description | |-----------------|---------------|------------------------| | start | String | startTime (eg '00:00') | | step | String | stepTime (eg '00:30') | | end | String | endTime (eg '23:30') |
Events
| Name | Description | Callback Arguments | |-----------------|------------------------------|------------------------| | change | When the value change | the currentValue | | input | When the value change | the currentValue | | confirm | When click 'OK' button | the currentValue | | clear | When click 'clear' button | | | input-error | When user type a invalid Date| the input text |
Slots
| Name | Description |
|-----------------|--------------------------|
| calendar-icon | custom the calender icon |
| header | popup header |
| footer | popup footer |
Thanks
This component is a forked branch of mengxiong10's vue2-datepicker datepicker component
License
Copyright (c) 2017-present MostafaTech