persian-datetime-picker-vue2 (based on dayjs)

A vue plugin to select jalali date and time based on dayjs

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

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

Installation

browser

1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
3<script src="/dist/persian-datetime-picker-vue2.umd.min.js"></script>
4<div id="app">
5  <date-picker v-model="date"></date-picker>
6</div>
7<script>
8  var app = new Vue({
9    el: '#app',
10    data: {
11      date: '1401/08/02'
12    },
13    components: {
14      DatePicker: VuePersianDatetimePicker
15    }
16  })
17</script>

npm

1npm install persian-datetime-picker-vue2 --save

Usage

1// main.js
2//...
3import VuePersianDatetimePicker from 'persian-datetime-picker-vue2'
4Vue.component('date-picker', VuePersianDatetimePicker)
5//...

Or in component

1<template>
2  <div>
3    <date-picker v-model="date"></date-picker>
4  </div>
5</template>
6
7<script>
8  import VuePersianDatetimePicker from 'persian-datetime-picker-vue2'
9  export default {
10    data() {
11      return {
12        date: ''
13      }
14    },
15    components: {
16      datePicker: VuePersianDatetimePicker
17    }
18  }
19</script>

You can also set default values:

1// main.js
2import VuePersianDatetimePicker from 'persian-datetime-picker-vue2'
3Vue.use(VuePersianDatetimePicker, {
4  name: 'custom-date-picker',
5  props: {
6    inputFormat: 'YYYY-MM-DD HH:mm',
7    format: 'YYYY-MM-DD HH:mm',
8    editable: false,
9    inputClass: 'form-control my-custom-class-name',
10    placeholder: 'Please select a date',
11    altFormat: 'YYYY-MM-DD HH:mm',
12    color: '#00acc1',
13    autoSubmit: false
14    //...
15    //... And whatever you want to set as default
16    //...
17  }
18})

Then use in component

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

Click to see full documentation and demo

License

This project is licensed under the MIT License