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

$3

``html

`

$3

`bash
npm install vue3-persian-datetime-picker --save
`

Configuration for moment to ignore loading locales:
`javascript
// vue.config.js:
module.exports = {
//..
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
},
//...
}
`

vitejs configuration:
`javascript
// vite.config.js
// ...
export default defineConfig({
// ...
resolve: {
mainFields: [
'browser',
'module',
'main',
'jsnext:main',
'jsnext'
]
}
})
`




$3


`javascript
// 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
`html



`




$3


`javascript
// 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
`html

`

$3

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

$3

* Fixed: "value" is no longer needed.

$3

* Fixed: Moment jalali localeData is not a function
* Fixed: Watch model value

$3

* Feat: Added support for display format when using custom-input
* Fixed: Using jumpMinute and roundMinute together
* Fixed: Typescript declaration

$3

* 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

$3

* Migrated to Vue3