0.1.9 • Published 4 years ago

vue3-persian-datepicker v0.1.9

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

npm

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

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