Top-Date-Picker is a Vue.js plugin designed for selecting Jalali (Persian) date and time, optimized for mobile screen sizes.
npm install top-date-picker --saveTo configure moment to ignore loading locales:
// webpack.config.js:
module.exports.plugins = [
//...
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
//...
]
// vue.config.js:
module.exports = {
//..
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
},
//...
}In main.js:
// main.js
//...
import topDatePicker from 'top-date-picker';
Vue.component('date-picker', topDatePicker);
//...Then used in component:
<date-picker v-model="date" />Or in component:
<template>
<div>
<date-picker v-model="date"></date-picker>
</div>
</template>
<script>
import topDatePicker from 'top-date-picker'
export default {
data(){
return {
date: ''
}
},
components: {
datePicker: topDatePicker
}
}
</script>If you want to use a custom input or custom element to trigger and show the datepicker, use the custom-input option.
custom-input="#inputId" Example :
<template>
<div>
<!-- Your input -->
<input type="text" id="inputId">
<date-picker
v-model="date"
custom-input="#inputId"
/>
</div>
</template>
<script>
export default {
data: function () {
return {
date: '2023-10-15',
}
},
}
</script>If you want to display holidays in the datepicker, use the holidays option.
:holidays="holidays"Example :
<template>
<div>
<date-picker
v-model="date"
:holidays="holidays"
/>
</div>
</template>
<script>
export default {
data: function () {
return {
date: '2023-10-15',
holidays: {
"1402/12/29": "روز ملی شدن صنعت نفت ایران",
},
}
},
}
</script>If you want to display price or text for each day, use the dayPrice option.
:dayPrice="priceList"Example :
<template>
<div>
<date-picker
v-model="date"
:dayPrice="priceList"
/>
</div>
</template>
<script>
export default {
data: function () {
return {
date: '2023-10-15',
priceList : {
"1402/06/30": "1500",
"1402/07/30": "your text",
} ,
}
},
}
</script>If you want to add an action when submitting a date in the datepicker, use the action option.
:action="yourMethod"Example :
<template>
<div>
<date-picker
v-model="date"
:action="yourMethod"
/>
</div>
</template>
<script>
export default {
data: function () {
return {
date: '2023-10-15',
priceList : {
"1402/06/30": "1500",
"1402/07/30": "your text",
} ,
}
},
methods: {
yourMethod() {
console.log('run your method ... ')
}
}
}
</script>If you want to use this plugin on desktop, use the desktop-view option:
desktop-view="true"Example :
<template>
<div>
<date-picker
v-model="date"
desktop-view="true"
/>
</div>
</template>If you want to get the visible value or know whether the dialog is open or closed, use the @getVisibleValue method.
@getVisibleValue="yourMethod"Example :
<template>
<div>
<date-picker
v-model="date"
@getVisibleValue="yourMethod"
/>
</div>
</template>
<script>
export default {
data: function () {
return {
date: '2023-10-15',
priceList : {
"1402/06/30": "1500",
"1402/07/30": "your text",
} ,
}
},
methods: {
yourMethod(visibleValue){
console.log("visibleValue => " , visibleValue)
} ,
}
}
</script>If you want to set Dark Mode, use the dark option:
:dark="true"Example :
<template>
<div>
<date-picker
v-model="date"
:dark="true"
/>
</div>
</template>If you want to change the default submit text, use submitText.
submitText="Submit"Example :
<template>
<div>
<date-picker
v-model="date"
submitText="Submit"
/>
</div>
</template>-
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.
-
vue-persian-datetime-picker - A Vue plugin to select Jalali date and time.