vite-vue3-persian-datetime-picker

A vue plugin to select jalali date and time

This package is a fork of vue3-persian-datetime-picker which is migrated to use vite as build tool instead of webpack.

See documentation and demo at vue-persian-datetime-picker.

If you are using vuejs 2, please refer to this repository.

Installation

npm

npm install vite-vue3-persian-datetime-picker --save

Usage

// main.js

import { createApp } from 'vue'
import Vue3PersianDatetimePicker from 'vite-vue3-persian-datetime-picker'
const app = createApp({})
app.component('DatePicker', Vue3PersianDatetimePicker)
app.mount('#app')

Or in component

<template>
  <date-picker v-model="date"></date-picker>
</template>
 
<script>
  import DatePicker from 'vite-vue3-persian-datetime-picker'
  export default {
    data(){
      return {
        date: ''
      }
    },
    components: { DatePicker }
  }
</script>

You can also set default values:

// main.js

import Vue3PersianDatetimePicker from 'vite-vue3-persian-datetime-picker'
const app = createApp({})
app.use(Vue3PersianDatetimePicker, {
  name: 'CustomDatePicker',
  props: {
    format: 'YYYY-MM-DD HH:mm',
    displayFormat: 'jYYYY-jMM-jDD',
    editable: false,
    inputClass: 'form-control my-custom-class-name',
    placeholder: 'Please select a date',
    altFormat: 'YYYY-MM-DD HH:mm',
    color: '#00acc1',
    autoSubmit: false,
    //...
    //... And whatever you want to set as default.
    //...
  }
})

Then use in component

<custom-date-picker v-model="date"></custom-date-picker>

Click to see full documentation and demo

Built With

• Vue.js - The Progressive JavaScript Framework.
• Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
• moment-jalaali - A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.

License

This project is licensed under the MIT License