Persian Date & Date Range Picker For Vue

Install & Download:

Description:

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.