alireza-ab / vue-persian-datepicker

A datepicker component for select Persian date

Vue Persian Datepicker

A datepicker component for select persian date. It's very customizable and easily for use.

Features

• nuxt support
• single and range selection
• select date and time
• select with keyboard
• customizable style
• localization

Documentation

For full documentation and examples, visit https://alireza-ab.ir/datepicker

Install

npm i @alireza-ab/vue-persian-datepicker

Usage

import datePicker from "@alireza-ab/vue-persian-datepicker";

new Vue({
	components: { datePicker },
	el: "#app",
});

<date-picker></date-picker>

License

Vue Persian Datepicker is available under the MIT license.

vue-persian-datepicker's Issues

خطا در بایند تاریخ

هنگامی که از created برای props های from و to تاریخ جدید مقداردهی می کنم با خطا مواجه می شوم.
با خطای :
Error in nextTick: "TypeError: Cannot read property 'offsetHeight' of undefined"

<date-picker :from="minDate" :to="maxDate" </date-picker>

created(){
var currentDate = momentjalaali().format("jYYYY/jMM/jDD");
var dateShamsi = momentjalaali(currentDate, "jYYYY/jMM/jDD");
var maxDate = dateShamsi.add(-12, 'jYear').format("jYYYY/jMM/jDD");

// this.minDate ='2021/05/22';
// this.maxDate =maxDate;
console.log('maxDate', maxDate);
};
},

append shortcut

Hello
How to add shortcuts to existing shortcuts?
Default shortcuts are removed when I set the shortcut.

Features needed

Thank for the amazing calendar.Column feature is super great. These are the features that makes is even more amazing.

1- Please add the functionality to disable dates using day names along with dates. for example:
<date-picker :disable="['Sunday', 'Monday', '1400/12/10', '1400/12/20']" />
2- Also add view feature. example:

<date-picker view="year"/> // Open calendar on year selection. then goes for month and day. // Options: year/month/day

3- Add multiple selection mode. // User might need to choose multiple dates which are not in a range(['1400-05-05', '1400-08-05']).
4- Add Year & Month to selection types. // User might need to select only year(1400) or month(05) or year & month (1400-12).
5- Add highlight dates. LINK

nuxt app crashes while in ssr mode and page scroll occurs

I have a nuxt application with PWA enabled. as I add date-picker to page while ssr is enabled and if page scrolls the page crashes

disable date rang

hi how can I disable past time before today?

example today is 1401/06/30 i want disable before 1401/06/29

any plans for supporting vue3?

there aren't any persian datepicker plugins that support vue3 right now
it would be awesome if i could use this plugin in my vue3 project

if you're open for collaboration lemme know, i'd be happy to help

turbolinks and datepicker

hi
i using turbolinks and when i open a link and back to home, datepicker not open by clicking on input.

can you help me

warning در ناکست

سلام من نصب کردم روی ناکست 2

موقع اجرا این خطا میاد ولی کار میکنه !

selection-range ساخت تابع برای

با سلام و خدا قوت

<date-picker placeholder="تاریخ " @submit="submit" name="app" id="app" color="red" mode="range" style="--icon-background:#transparent;" type="datetime" :auto-submit="false" :to="toDates"></date-picker>

من قصد دارم که برای to تابعی تعریف کنم :to="toDates" و در method این مقدار رو فراخوانی کنم

new Vue({
  el: '#app',
  autoSubmit: false,
  components: {
    datePicker
  },
  methods: {
    submit(date) {
      datetempStart = new PersianDate(date[0]).toString("YYYY-MM-DDTHH:mm:ss.0000000");
      datetempEnd = new PersianDate(date[1]).toString("YYYY-MM-DDTHH:mm:ss.9999999");
    },
    toDate() {
      //Today 23:59
      return new PersianDate().toString('date 23:59');
    },
  }
})

ولی با خطای زیر مواجه میشوم ممنون میشم راهنمایی بفرمائید

e.js:5108 [Vue warn]: Invalid prop: type check failed for prop "to". Expected String, got Function 

found in

---> <DatePicker>
       <Root>
warn$2 @ vue.js:5108
assertProp @ vue.js:5662
validateProp @ vue.js:5601
_loop_1 @ vue.js:4361
initProps$1 @ vue.js:4386
initState @ vue.js:4330
Vue._init @ vue.js:4714
VueComponent @ vue.js:5838
createComponentInstanceForVnode @ vue.js:5047
init @ vue.js:4909
createComponent @ vue.js:6580
createElm @ vue.js:6534
createChildren @ vue.js:6653
createElm @ vue.js:6557
patch @ vue.js:7120
Vue._update @ vue.js:2838
updateComponent @ vue.js:2948
Watcher.get @ vue.js:4178
Watcher @ vue.js:4168
mountComponent @ vue.js:2965
Vue.$mount @ vue.js:9311
Vue.$mount @ vue.js:11870
Vue._init @ vue.js:4724
Vue @ vue.js:5774
(anonymous) @ main.js?version%20=%201.0.0:377
vue.js:5108 [Vue warn]: Error in mounted hook: "TypeError: e.split is not a function"

found in

---> <DatePicker>
       <Root>
w

کوچک نمایش دادن datePicker

سلام من یه مشکلی با کتابخونه دارم اونم اینه که datepicker کوچیک هست.
فونت کل داکیومت سمیم هست. ممنون میشم کمکم کنید

clear button and set manually

Hi
I have two questions:

1. Which event call when click clear button?
2. How to set manually date or time? When I set value in input clear button not working so must be a way that set value and set input value to.

Error: self is not defined , in nuxtjs ssr

Package version: 2.2.1
Nodejs version: 14.18.1
Vuejs version: 2.6.14
core-js version: 3.18.3

Implemented in Nuxtjs, I get this error:

<template>
  <date-picker />
</template>

<script>
import DatePicker from '@alireza-ab/vue-persian-datepicker';

export default {
  components: { DatePicker }
};
</script>

Error screenshot:

ایجاد فیلد الزامی

با سلام و وقت بخیر
چطور میشه Required رو به input اضافه کرد؟
در واقع در فرم فیلد تاریخ الزامی باشد؟

get display value

Hi
how can I get the display value?

var date = new Vue({
              ...
            });

how set initial value

how set initial value when update data mode, such as modified user birthday.

can not read properties of undefined (reading offsetHeight)

I'm using nuxtjs version 2.15.7 and get this error. ssr is set to false. the error shows up when the picker dialog is open and I scroll to see the time picker

how to set date to datepicker ?

how to set date from data model to datepicker and show it in datepicker?

Get Date

سلام وقت بخیر
من چطور میتونم شروع و پایان روز هر ماه رو بدست بیارم به صورت یکجا؟
ایا تابعی وجود دارد که بعد از .addMonth() درج شود و شروع و پایان تاریخ ماه را برگرداند؟

custom attributes

Hi
Is there any way to add some attributes to input which made by datepicker?

How to set default value to range Date picker?

I wanna set default value to range date picker as : ['2022-02-20 19:13', '2022-02-21 19:13'] in data section
But this Error Happen:
Error in mounted hook: "TypeError: e.some is not a function"

how can I solve it?

v-model not working on datepicker

hi
when use v-model and change or edit date in input model not changed

نمایش تاریخ شمسی به جای تاریخ میلادی

سلام با اینکه تقویم شمسی نشان داده می‌شود ولی
وقتی تاریخ انتخاب می‌شود تاریخ میلادی آن نشان داده می‌شود
درصورتی که من به تاریح شمسی نیازمندم

 <date-picker :column="1" mode="single" v-model="date" locale="fa" :modal="true"
                                input-format="YYYY-MM-DD" />

select just year or month

Hi
Is there an option to show only year or month?
and another question
how to disable all days except first of week (Saturday)?

How to style with vuetify?

example :
in inpute: 1400/11/04

Bug with the new version

The arrow keys, to swicth between dates, are disable when the datepicker opens on the current date (See the attachment)

There is NO such issue when the datepicker is on Gregorian calendar or if open the datepicker on a date different than current month.

Farshid

multi select

Hello
Is it possible to select multiple dates?
Like this link
https://talkhabi.github.io/vue-persian-datetime-picker/guide/multiple.html

تنظیم مقدار پیش فرض ساعت

سلام وقت بخیر
یک سوالی داشتم آیا امکان تنظیم مقدار پیش فرض ساعت ممکن است؟ مثل مورد زیر ؟ به طور مثال کسی که رنج دیتا انتخاب میکند
شروع روز با 00:00 دیفالت باشد و پایان رنج انتخابی 23:59 نمایش داده شود به صورت پیش فرض
https://talkhabi.github.io/vue-persian-datetime-picker/guide/initial-value.html#startup-initial-value
چون این موارد رو برای این datepicker تست کردم ولی متاسفانه به جواب نرسیدم و کار نکرد
ممنون میشم راهنمایی کنید

set default value

Hi ... i wanna set value to dateTimePicker .. when i click on record for edit .. i wanna set expired_at value to dateTimePick.

for example expired_at is: 1401-2-28 12:53.
Thank you :)

مشکل کار با localconfig

سلام

این کدمه:
<date-picker from="" mode="range" locale="fa,en" locale-config="{fa: {'displayFormat': 'jYYYY/jMM/jDD','inputFormat': 'jYYYY/jMM/jDD'},en: {'displayFormat': 'YYYY/MM/DD','inputFormat': 'YYYY/MM/DD'}}"></date-picker>

این ارور رو میده:
[Vue warn]: Invalid prop: type check failed for prop "localeConfig". Expected Object, got String with value "{fa: {'displayFormat': 'jYYYY/jMM/jDD','inputFormat': 'jYYYY/jMM/jDD'},en: {'displayFormat': 'YYYY/MM/DD','inputFormat': 'YYYY/MM/DD'}}".

package improvements

Nice work @alireza-ab <3

Some suggestions:

• Avoid depending on node_modules structure. Current module implementation, tries to add template from another package (../persian-date/lib/plugin.js). We may instead use this.addModule('@alireza-ab/persian-date/lib/nuxt') and add it as dependency
• Use files field in package.json to only include src and nuxt.js in final pkg (see unpkg. currently everything is published)
• In nuxt documentation, mention components option should be true in nuxt.config

update from and to date

When changing "from" date and "to" date in props, it doesn't update in the component.

ست كردن تاريخ جهت نمايش

سلام
ست كردن تاريخ بر اساس ديتاي خوانده شده از ديتابيس در صفحه وب به چه صورت مي باشد ؟
امكانش هست راهنمايي بفرمائيد.
زبان برنامه نويسی :
Asp.net MVC
C#

قطعه كدي كه نياز دارم تاريخ در آن نمايش داده شود :

مكان نمايش دادن تاريخ

با تشكر