npm

Introduction

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.

Example

CodeSandBox Demo, Choose a date:



Datepicker comes with less styling, but input itself does not. You can use .datePicker class for styling input and all elements, like:

.datePicker input {
  /* add css style to the input */
}

Installation

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

Npm

$ npm install vue3-persian-datepicker

Yarn

$ yarn add vue3-persian-datepicker

Then import it in your code and use as a usual component:

<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>

NOTICE

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

PropTypeDefaultDescription
inlineBooleanIf true, the datepicker is always displayed
formatStringYYYY/MM/DDPersianDate-type format in which the string in the input should be both parsed and displayed
nameStringInput name property
placeholderStringInput placeholder text

Events

These events are emitted on actions in the datepicker

EventOutputDescription
openedThe picker is opened
closedThe picker is closed
selectedDateA date has been selected

License

MIT