vue3-persian-datepicker

This persian / jalali datepicker package is implemented with vue 3, it's simple and light.

NOTICE: Works only on projects with version 3.x vue.

All date manipulation and formatting are done via the PersianDate library, so it's a direct dependency of this picker.

Documentation - Demo

Installation

This section you can installing the package with npm or yarn.

Npm

$ npm install vue3-persian-datepicker

Yarn

$ yarn add vue3-persian-datepicker

Usage

<script>
import DatePicker from "vue3-persian-datepicker";
import "vue3-persian-datepicker/dist/datepicker.min.css";
import { reactive } from "@vue/reactivity";

export default {
  setup() {
    const state = reactive({
      date: "",
    });

    return {
      DatePicker,
      state,
    };
  },
};
</script>

<template>
  <DatePicker v-model="state.date" />
</template>

WARNING: If you use default value for v-model, You should act like the following format:

const state = reactive({ date: "1399/12/16" // for example })

Available props

| Prop | Type | Default | Description | | :---------- | :-------: | :----------: | :--------------------------------------------------------------------------------------------- | | inline | Boolean | | If true, the datepicker is always displayed | | format | String | YYYY/MM/DD | PersianDate-type format in which the string in the input should be both parsed and displayed | | name | String | | Input name property | | placeholder | String | | Input placeholder text |

Events

These events are emitted on actions in the datepicker

| Event | Output | Description | | :------- | :----: | :----------------------- | | opened | | The picker is opened | | closed | | The picker is closed | | selected | Date | A date has been selected |

License

MIT