A Material Design persian date & time picker for Vue.js that enables your users to select jalali date and time from a calendar popup.

Date _Time

Documentation

vue-persian-datetime-picker

npm version

A vue plugin to select jalali date and time

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

Installing

browser

<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/moment-jalaali.js"></script> <script src="dist/vue-persian-datetime-picker-browser.js"></script> <div id="app">     <date-picker v-model="date"></date-picker> </div> <script>     var app = new Vue({         el: '#app',         data: {             date: '1397/02/02'         },         components: {             DatePicker: VuePersianDatetimePicker         }     }); </script>

npm

npm install vue-persian-datetime-picker --save

webpack.config.js:

/**  * configuration for moment to ignore loading locales  */ module.exports.plugins = [     //...     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)     //... ]

Usage

main.js

//... import VuePersianDatetimePicker from 'vue-persian-datetime-picker'; Vue.component('date-picker', VuePersianDatetimePicker); //...

Or in component

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

You can also set default values:

main.js

import VuePersianDatetimePicker from 'vue-persian-datetime-picker'; Vue.use(VuePersianDatetimePicker, {     name: 'custom-date-picker',     props: {         inputFormat: 'YYYY-MM-DD HH:mm',         format: 'jYYYY-jMM-jDD HH:mm',         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

Change log

2.0.2 (2019-07-17)

  • Flipped month change buttons in rtl direction
  • Added label to locales. fixed #67
  • Added display format to each locale. fixed #67
  • Fixed wrong date on date-time picker mode

2.0.1 (2019-05-11)

  • Fixed #53
  • Show the next step on submit button click, instead of submitting immediately #41

2.0.0 (2019-01-16)

  • Added gregorian support <date-picker locale="en"></date-picker>
  • Added locale configuration support
  • Improved css transitions
  • Fixed min-max in time picker

1.1.7 (2018-12-31)

1.1.6 (2018-12-29)

  • Added jumpMinute and roundMinute to time-picker <date-picker type="time" :jumpMinute="5" :roundMinute="true"></date-picker>
  • Added clear button <date-picker :clearable="true"></date-picker>
  • Added inline mode <date-picker :inline="true"></date-picker>
  • Fixed tab key press problem
  • Fixed responsive mode
  • Fixed watching to min-max changes

1.1.5 (2018-09-01)

  • Added emit on open
  • Added feature to highlight items and dates

1.1.4 (2018-08-12)

  • Added label for display
  • Added feature to disable some dates
  • Added feature to disable or enable the datepicker
  • Icons and css styles optimization
  • Load component via script tag

1.1.3 (2018-05-22)

  • Fixed "min-date" bug

1.1.2 (2018-05-12)

  • Updated "moment-jalaali" version to 0.7.3
  • Fixed "display-format" when is editable
  • Reset "view" value

1.1.1 (2018-05-03)

  • Added "append-to"
  • Added "display format"

1.1.0 (2018-05-01)

  • Added default settings feature

1.0.9 (2017-12-25)

  • Clear input value
  • Fixed editable input bug
  • Added "Initial value"
  • Package keywords
  • Fixed css class name
  • Fixed some other bugs

1.0.7 (2017-12-14)

  • Avoid submitting form
  • Auto submit on wrapper click

1.0.5 (2017-12-04)

  • Fixed default value for "value"

You May Also Like