A Persian datetime picker component that supports single date and date range selection.
How to use it:
1. Import and register the Persian date picker component.
import datePicker from "@alireza-ab/vue-persian-datepicker";
new Vue({
components: {
datePicker
},
})
// OR
Vue.component('date-picker', datePicker)
2. Use it in your component.
<template>
<div>
<date-picker></date-picker>
</div>
</template>
3. Available component props.
/**
* the format of the model value
* @type String
* @see https://alireza-ab.ir/persian-date/formats#
* @desc default value in "date" type is "YYYY-MM-DD"
* default value in "datetime" type is "YYYY-MM-DD HH:mm"
* default value in "time" type is "HH:mm"
*/
format: {
type: String,
},
/**
* the format of the input value
* @type String
* @see https://alireza-ab.ir/persian-date/formats#
* @desc default value equal to the value of "type" prop
*/
inputFormat: {
type: String,
},
/**
* the format of the value that shows in the footer of picker
* @type String
* @see https://alireza-ab.ir/persian-date/formats#
* @desc default value in "date" type is "?D ?MMMM"
* default value in "datetime" type is "?D ?MMMM HH:mm"
* default value in "time" type is "HH:mm"
*/
displayFormat: {
type: String,
},
/**
* the type of picker
* @default "date"
* @type String
* @values date | time | datetime
* @since 2.0.0
*/
type: {
type: String,
default: "date",
},
/**
* the date of start of the picker
* @type String
* @example 1400/7/1 | 1400-7
*/
from: {
type: String,
default() {
if (this.type == "time") return "";
return "1300";
},
},
/**
* the date of end of the picker
* @type String
* @example 1400/7/1 | 1400-7
*/
to: {
type: String,
default() {
if (this.type == "time") return "23:59";
return "1499";
},
},
/**
* show or hide the picker
* @default false
* @type Boolean
*/
show: {
default: false,
type: Boolean,
},
/**
* show the picker with click on the some sections
* @default "all"
* @type String
* @values all | input | icon | none
*/
clickOn: {
default: "all",
type: String,
},
/**
* show the picker in modal mode
* @default true
* @type Boolean
*/
modal: {
default: false,
type: Boolean,
},
/**
* text for label tag
* @type String
*/
label: {
type: String,
},
/**
* number of column
* @default "{ 576: 1 }"
* @type Object | Number
* @desc 1. you can send the number of column
* or send the object of the number of
* column in the breakpoint.
* 2. if the breaking point in the object
* is not specified, the default value it's 2
*/
column: {
default: () => {
return { 576: 1 };
},
type: [Number, Object],
},
/**
* submit when date selected or not
* @default true
* @type Boolean
*/
autoSubmit: {
default: true,
type: Boolean,
},
/**
* mode of select date
* @default "range"
* @type String
* @values range | single
*/
mode: {
default: "range",
type: String,
},
/**
* the locale of datepicker
* @default "fa"
* @type String
* @values fa | en | fa,en | en,fa
* @desc Except above values, you can add
* the language in "localeConfig" prop and use it.
* @since 2.0.0
*/
locale: {
default: "fa",
type: String,
},
/**
* user can clear the selected dates or not
* @default false
* @type Boolean
* @since 2.0.0
*/
clearable: {
default: false,
type: Boolean,
},
/**
* disable some dates or time
* @type [Array, String, Function, RegExp]
* @since 2.0.0
*/
disable: {
type: [Array, String, Function, RegExp],
},
/**
* the config for locales
* @type Object
* @since 2.0.0
*/
localeConfig: {
type: Object,
},
/**
* the styles of the picker
* @type Object
* @since 2.0.0
*/
styles: {
type: Object,
},
/**
* the color of the picker
* @type String
* @values red | pink | orange | green | purple | gray
* @since 2.0.0
*/
color: {
type: String,
},
/**
* show shortcut, for select date quickly
* @type Boolean | Object
* @since 2.2.0
*/
shortcut: {
type: [Boolean, Object],
default: false,
},
4. Events.
- @close
- @open
- @select(date)
- @submit(date)
- @focus
- @keypress
Preview:
Changelog:
v2.3.2 (10/04/2022)
- bugfixes
v2.3.1 (08/04/2022)
- bugfixes
v2.3.0 (03/14/2022)
- add clear event
v2.2.3 (02/10/2022)
- bug fixes
v2.2.2 (02/03/2022)
- update dependencies
v2.2.1 (09/22/2021)
- bug fixes in translates
Download Details:
Author: alireza-ab
Live Demo: https://alireza-ab.ir/datepicker
Download Link: https://github.com/alireza-ab/vue-persian-datepicker/archive/refs/heads/master.zip
Official Website: https://github.com/alireza-ab/vue-persian-datepicker
Install & Download: