vue3-persian-datetime-picker
v1.2.2
Published
A vue plugin to select jalali date and time
Downloads
8,061
Maintainers
Readme
vue3-persian-datetime-picker
A vue plugin to select jalali date and time
See documentation and demo at vue-persian-datetime-picker.
If you are using vuejs 2, please refer to this repository.
Installation
browser
<script src="https://unpkg.com/vue@next"></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/vue3-persian-datetime-picker.umd.min.js"></script>
<div id="app">
<date-picker v-model="date"></date-picker>
</div>
<script>
Vue.createApp({
data: function() {
return {
date: '1400/01/01'
}
},
components: {
DatePicker: Vue3PersianDatetimePicker
}
}).mount('#app')
</script>
npm
npm install vue3-persian-datetime-picker --save
Configuration for moment to ignore loading locales:
// vue.config.js:
module.exports = {
//..
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
},
//...
}
vitejs configuration:
// vite.config.js
// ...
export default defineConfig({
// ...
resolve: {
mainFields: [
'browser',
'module',
'main',
'jsnext:main',
'jsnext'
]
}
})
Usage
// main.js
import { createApp } from 'vue'
import Vue3PersianDatetimePicker from '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 'vue3-persian-datetime-picker'
export default {
data(){
return {
date: ''
}
},
components: { DatePicker }
}
</script>
You can also set default values:
// main.js
import Vue3PersianDatetimePicker from '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
Change log
1.2.2 (2022-02-10)
- Fixed: "value" is no longer needed.
1.2.1 (2022-02-09)
1.2.0 (2021-11-04)
- Feat: Added support for display format when using
custom-input
- Fixed: Using jumpMinute and roundMinute together
- Fixed: Typescript declaration
1.1.0 (2021-10-01)
- Feat: Added simple-mode
- Feat: Added
input-attrs
- Feat: Added
@next-month
and@prev-month
events - Feat: Added
@year-change
and@month-change
events - Fix: Mouse wheel in Firefox
- Fix: Prevent selected dates from being reset
1.0.0 (2021-08-14)
- Migrated to Vue3