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.
This section you can installing the package with npm or yarn.
Npm
$ npm install vue3-persian-datepickerYarn
$ yarn add vue3-persian-datepicker<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 })| 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 |
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 |