talkhabi / vue-persian-datetime-picker Goto Github PK
View Code? Open in Web Editor NEWA vue plugin to select jalali date and time
Home Page: https://talkhabi.github.io/vue-persian-datetime-picker/
A vue plugin to select jalali date and time
Home Page: https://talkhabi.github.io/vue-persian-datetime-picker/
سلام
لطفا در صورت امکان این آپشن رو قرار بدید
Currently, the right arrow is for the next month and the left one is for the previous month. Which I think is not suited for RTL languages.
My suggestion is to swap their functionality in RTL languages.
با سلام و خسته نباشید
ممنون از پلاگین خوبتون
فقط یه سوال من میخوام ولیو رو از اینپوت بگیرم ولی نمیتونم ممنون میشم راهنمایی کنین
آقا اگه بخوایم بگیم فقط 5 مین 5 مین دقیقه ها رو انتخاب کنه چه آپشنی باید بهش بدیم
؟؟
سلام و خسته نباشید
ممنونم از اعمال تغییرات جدید.
دوست عزیز من ورژن 1.0.9 رو دانلود کردم اما در
build
شدن مشکل داره و فایل
moment-jalaali
رو نمیشناسه. ممنون میشم اگه این مورد برطرف بشه.
این پیغام خطای من هست.
ERROR in .//vue-persian-datetime-picker//moment-jalaali/index.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Source**\node_modules\vue-persian-datetime-picker\node_modules\moment-jalaali\index.js'
@ ./~/vue-persian-datetime-picker/dist/vue-persian-datetime-picker.js 1:82-107
Hello
Can I use this for pure javascript?
سلام و تشکر بابت این کار تمیزتون
برنامه ای برای پشتیبانی از سرور ساید رندرینگ دارید؟
سلام.
برای حالتی که بخوایم بک گراند کل فیلد تقویم رو قرمز کنیم یا مثلا کادر رو قرمز کنیم چکار میشه کرد؟مثلا در حالتی که فردی تقویم رو انتخاب نکنه و برای ولیدیت بخوایم اروری نمایش بدیم در اون فیلد
امکان برگشت تاریخ میلادی شمشی بعد از انتخاب وجود دارد ؟
سلام
مشکلی که باهاش مواجه شدم این هست که مودال چندین بار به تگ بادی اپند میشه.
فکر میکنم وقتی مودال تقویم باز هست با زدن دکمه تب، ایونت فوکوس باز فراخوانی میشه
سلام خسته نباشید جناب تلخابی
میخواستم ببینم آیا امکانی وجود داره که بتونیم با انتخاب تاریخ اون تاریخ به صورت تایم استمپ در دیتا ذخیره بشه؟
ممنون
با وجود اینکه متغیری که کامپوننت متصل شده رو نال میکنم یا برابر یک استرینگ خالی قرار میدم باز هم مقدار تاریخ انتخاب شده در اینپوت حذف نمیشه.
با انتخاب تنظیمات پیشفرض با کلیک روی تاریخ مورد نظر این تاریخ انتخاب میشه:
۰۰۰۰/۰۱/۰۱
اگر تاریخ رو دوباره انتخاب کنی باز هم همین مقدار نمایش داده میشه.
در هنگام انخاب برای بار سوم این دفعه مقادیر درست نمایش داده میشن .
با اینکه نمایش تاریخ به این نحو هست اما در لاگ ها میشه دید که تاریخ درست انتخاب میشه.
مشکل زمانی پیش می آد که درکامپوننت هایی همزمان از مومنت و قابلیت نمایش فارسی اعداد استفاده کنیم
این اوکی هست :
let moment = require("moment-jalaali");
return moment(date, 'jYYYY/jM/jD HH:mm').format('YYYY-M-D HH:mm:ss');
اما اگر این خط رو اضافه کنیم مشکلی که در بالا گفتم به وجود می آد
moment.loadPersian({usePersianDigits: true})
سلام و تشکر بابت ارائهی این کمپوننت.
من در یک پروژهی ام.وی.سی از این کمپوننت استفاده میکنم. دو پرسش دارم:
اعداد به صورت لاتین نمایش داده میشوند. مثلا بجای ۱۳۹۷ نوشته میشود 1397.
آیا این امکان هست که نمایش انتخاب تقویم یا ساعت را در یک رویداد کلیک، مثلا یک دکمه قرار داد؟
ممنون از راهنمایی
Hi. great package. I put :min or :max on date picker and it works well but when I reset the max or min value on my component, max and min wont change and date picker doesn't watch for these properties so I still have boundaries for choosing the date
Great work by the way :)
سلام
همه چیز اوکی هست فقط این وارنینگ میاد
Locale fa not found. Did you forget to load it?
when roundMinute is true and jumpMinute is 15 the time picker jumps from 55 to 10
that should jump to 00 for rounding the minutes
سلام
چطوری میتونیم اعداد رو در تقویم فارسی کنیم؟
در نمونه ای که ارائه شده اعداد فارسی هستند به طور کامل
با سلام و احترام خدمت شما جناب تلخابی ، وقت بخیر .
ممنون بابت پکیج خیلی خوب و زیبایی که زحمت طراحیش رو کشیدید .
سوال :
آیا امکانش هست که مقدار ورودی رو بصورت تایمستمپ یا یونیکس دیت وارد کرد که سیستم تبدیل کنه ؟
سوال دوم :
آیا پکیج شما قابلیت پشتیبانی از تاریخ میلادی رو داره ؟
سیستمی نوشتم که بصورت دو زبانه هست ( فارسی و انگلیسی ) و میخوام پکیج شمارو طوری استفاده کنم که اگر زبان سیستم فارسی بود ، دیت پیکر شمسی و اگر انگلیسی بود ، دیت پیکر میلادی رو بارگذاری کنم
چنین امکانی وجود داره ؟
ممنون میشم راهنماییم کنید .
متشکرم .
Thanks for the 1.1.6
version and it's cool clearable
feature. I'm getting the following error in this new version, updated with npm
. Can you help me to resolve it.
[Vue warn]: Error in callback for immediate watcher "value": "TypeError: Cannot read property 'isValid' of null"
found in
---> <DatePicker>
<BFormGroup>
<UserForm> at resources/assets/js/components/users/Form.vue
<Root>
and this
admin.js:75661 TypeError: Cannot read property 'isValid' of null
at VueComponent.updateDates (admin.js:104887)
at VueComponent.Vue.$watch (admin.js:77568)
at createWatcher (admin.js:77525)
at initWatch (admin.js:77507)
at initState (admin.js:77267)
at VueComponent.Vue._init (admin.js:78562)
at new VueComponent (admin.js:78730)
at createComponentInstanceForVnode (admin.js:78233)
at init (admin.js:78064)
at createComponent (admin.js:79539)
سلام. من میخام این تقویم رو به صورت inline نشون بدم
چطور این کار امکان پذیره؟ توی نمونه ها موردی براش وجود نداره
سلام و خسته نباشید
دوست عزیز من از تقویم شما در حالت قابل ویرایش
editable="true"
استفاده میکنم. مشکلی که وجود داره این هستش که زمانی که
input
رو خالی میکنم
model
متصل به اون خالی نمیشه. می تونید این موضوع رو دموی خودتون هم مشاهده بفرمایید.
آیا این امکان وجود داره که اگر کاربر یک تاریخ غیر معتبر تایپ کرد یا اینپوت رو خالی کرد
model
را هم خالی کنید؟
یا اگه در حال حاضر روشی برای انجام این موضوع وجود دارد ممنون میشم که بنده رو راهنمایی بفرمایید.
I've used exactly the same markup as the documentation:
<input
type="text"
class="form-control form-control-lg"
v-model="date"
id="my-custom-input"
placeholder="select date">
<date-picker
v-model="date"
format="jYYYY/jMM/jDD"
element="my-custom-input">
</date-picker>
when I click on input the picker shows up but when I choose a date the text inside the input doesn't change.
I've noticed that I've this error in the browser console:
[Vue warn]: Property or method "date" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
whenever I choose a date the error shows up again.
I'm using laravel and this is how I load the component inside app.js:
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.component('date-picker', VuePersianDatetimePicker);
hope I've given enough information.
thanks in advance
سلام
من می خوام فقط چند روز خاص در ماه برای کاربر جهت انتخاب فعال باشه
اگر یک نمونه کد ارائه بدید ممنون میشم
با سلام و خسته نباشید و تشکر بابت پکیج خوبی که نوشتید.
یه سوال داشتم در مورد اینکه ما میخوایم توی این پکیج روزهای تعطیل رسمی توی تقویم رو هم علامت دار کنه یعنی مثلا رنگش رو قرمز کنه.و اینکه خودمون یه سری روز ها رو دستی بهش بدیم و این روز ها رو هم به تعطیلاتش اضافه کنه.
یه مورد دیگه هم اینکه چطور میشه یه سری روز های خاص رو بهش بدیم و کاربر نتونه این روز ها رو انتخاب کنه؟
ممنون میشم اگه بتونید منو راهنمایی کنید
با توجه به اینکه تایم پیکر خودش رو به پرنت متصل میکنه اگر در مودال استفاده بشه درست نمایش داده نمیشه .
راه حل اینه که پراپرتی زیر رو هم تعریف کنید .
append_to
که بتونیم در مودال هم ازش استفاده کنیم
I'm altering my format
from jYYYY/jMM/jDD
to YYYY-MM-DD HH:mm:ss
and adding displayFormat
to dddd jDD jMMMM jYYYY
.
It works like a charm on default components. On custom input, However, data is shown as YYYY-MM-DD HH:mm:ss
(displayFormat
is not applied to it).
با سلام و احترام خدمت شما جناب آقای تلخابی بزرگوار ،بابت پکیج فوق العاده کاربردیتون ممنونم
یک موردی رو من واقعا متوجه نشدم و نتونستم پیاده کنم
من میخوام یه فیلد داشته باشم که فرمت ورودی که کاربر انتخاب میکنه به شکل شمسی یا میلادی ( با یه متغییر این کارو انجام دادم ) باشه ولی تو متغییری که دارم درون دیتا میخوام میلادی ثبت بشه
نمیدونم این حالت شدنی هست یا نه
چیزی که به فکرم رسید اینه که :
خواستم از alt برای این کار استفاده کنم که متاسفانه اونم کار نمیکنه ( یعنی نتونستم بفهمم چرا alt رو نمایش نمیده )
در واقع با کد زیر ، آلت نمایش داده نمیشه :
<date-picker v-model="date" alt-name="date_alt" alt-format="YYYY-MM-DD HH:mm:ss"> </date-picker>
ممنون میشم راهنماییم کنید
سلام
وقت بخیر
با تشکر از پکیج بسیار عالی که درست کردید
من وقتی می خواهم از این بسته استفاده کنم
مثل زیر عمل می کنم
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.component('date-picker', VuePersianDatetimePicker);
ولی یک صفحه سفید دریافت می کنم
و خطای
ReferenceError: "date is not defined"
را دریافت می گکنم.
میشه بدونم مشکل کجاست.
I did the same as the document. after click on custom input, picker-dialog not show . In fact, nothing happens.
<v-text-field
label="تا تاریخ"
v-model="to_date"
id="to_date"
class="from_date"
></v-text-field>
<datetime-picker
v-model="to_date"
format="jYYYY/jMM/jDD"
element="to_date"
>
</datetime-picker>
آقا timepicker این خطا رو تو کنسول میندازه
[: Invalid default value for prop "value": Props with type Object/Array must use a factory function to return the default value.](url)
ورودی اولیه رو چی بزارم که خطا نده؟
When select some data but user click wrapper model add value data select in input
Please add an optional option...
Thank you for your group...
hi
please add new option
Range select by drag or custom day select
Hi
I see that its possible to get value of date picker in gregorian format, but the ui of the date picker is still jalali format
is there a way to show date picker in gregorian format?
چطور میشه بعد کاربر بعد اینکه روی تایید کلیک کرد ساعت باز بشه؟ چون واقعا طبق فید بک هایی که گرفتم کاربرا بیشتر روی تاریخ کلیک میکنن . ولی این کتابخونه برای تعیین ساعت باید روی اون تاریخ کلیک کرد
سلام
راهی هست که تاریخ امروز که در تقویم هست در تکست باکس هم بصورت پیش فرض نمایش داده شود
یا باید از پکیج دیگری استفاد کرد
این پکیج دارای
moment
هست ، آیا راهی دارد که از دستورات آن استفاده کنیم؟
مرسی
Hello @talkhabi , nice component!
I was wondering if you could issue an english version?
i'm using NUXT.JS and using SSR (Server Side Rendering), i really need this component, but i cant use it in SSR mode. it would be great to add SSR compatibility to your component.
سلام روزتون بخیر و خسته نباشید.
امکان انتخاب تاریخ های قبل از بهمن 1349 در این پکیج وجود ندارد.
آیا این موضوع علت خاصی داره؟ و آیا قابل برطرف شدن هست؟
پیشاپیش از پاسخگوییتون سپاسگزارم.
I'm looking for a way to clear the date inside the filled input like a button. Seems there are a props like clear-button
in other projects:
https://github.com/charliekassel/vuejs-datepicker#available-props
سلام آقای @talkhabi
با تشکر از کار خوب و زیباتون
پیشنهاد میکنم ابزاری برای انتخاب یک رنج زمان یا تاریخ (شروع - پایان) رو هم اضافه کنید.
hi,
how can i know when the datepicker modal is open ?
there is no event handler for that in doc
thank you
When the field is editable, the binded model is not updated automatically on input's keyup event.
it only updated on blur event.
باسلام . توی موبایل در صفحه نمایش هایی که ارتفاعش از ارتفاع تقویم کوچکتره یا به صورت افقی نگه میداری تمام تقویم نشون داده نمیشه و به پایین هم اسکرول نمیشه . برای رفع این مشکل چکار باید بکنم . ممنون
حتی وقتی از دوتا کامپوننت کوپل استفاده میکنیم به نتیجه مطلوب نمیرسه
<input class="form-control input ltr" title="برای مشاهده تقویم راست کلیک کنید" type="text" :id="'component-date-picker-' + unique" v-model="date" :placeholder="placeholder" @contextmenu="open" @blur="blur" :disabled="disabled" :readonly="readonly"/>
<input type="hidden" :id="'component-hidden-date-picker-' + unique" v-model="date"/>
<span class="icon is-small is-right clear-date-picker" v-if="date && editable" @click="date = null">
<i class="fa fa-remove"></i>
</span>
<d-picker
v-if="loaded"
v-model="date"
:format="format"
append-to="body"
:auto-submit="true"
:wrapper-submit="false"
:display-format="format"
:input-format="format"
view="year"
type="year"
:editable="editable"
color="#ff7b81"
:clearable="editable"
:jump-minute="15"
:round-minute="false"
:disabled="disabled"
:min="normalMin"
:max="normalMax"
locale="fa,en"
:show="show === 1"
@close="show=2"
:element="'component-date-picker-' + unique">
</d-picker>
<d-picker
v-if="loaded"
v-model="date"
:format="format"
append-to="body"
:auto-submit="true"
:wrapper-submit="false"
:display-format="format"
:input-format="format"
view="month"
type="month"
:editable="editable"
color="#ff7b81"
:clearable="editable"
:jump-minute="15"
:round-minute="false"
:disabled="disabled"
:min="normalMin"
:max="normalMax"
locale="fa,en"
:show="show === 2"
@close="show=0"
:element="'component-hidden-date-picker-' + unique">
</d-picker>
</span>```
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.