وقتی از Custom Input استفاده میشه display-format کار نمیکنه

alireza2281 commented 3 years ago

با این روش میشه <date-picker ref="datePicker" type="date" vmodel="selectedDate" element="fromtime" format="YYYY-MM-DD" display-format="jYYYY/jMM/jDD" @change="selectDate"/> <input v-model="displaySelectedDate" id="from-time" >

data() { return { displaySelectedDate: '', selectedDate: '' } }

methods: { selectDate() { this.displaySelectedDate = this.$refs.datePicker.displayValue }, }

jsfather commented 3 years ago

سلام آقا علیرضا دم شما گرم کار کرد و کارمو قشنگ راه انداخت. امیدوارم همیشه موفق و پیروز باشید. ممنونم از شما

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: @.> Sent: Sunday, May 9, 2021 11:59 AM To: @.> Cc: Keyvan @.>; @.> Subject: Re: [talkhabi/vue-persian-datetime-picker] وقتی از Custom Input استفاده میشه display-format کار نمیکنه (#149)

با این روش میشه <date-picker ref="datePicker" type="date" vmodel="selectedDate" element="fromtime" format="YYYY-MM-DD" display-format="jYYYY/jMM/jDD" @change="selectDate"/>

data() { return { displaySelectedDate: '', selectedDate: '' } }

methods: { selectDate() { this.displaySelectedDate = this.$refs.datePicker.displayValue }, }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/talkhabi/vue-persian-datetime-picker/issues/149#issuecomment-835726068, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHQEE3QDFIAFRSIB5QKWWWTTMY2ULANCNFSM4ZE5R7LA.

niloofarfs commented 3 years ago

سلام من هم با display-format مشکل دارم. در اصل می‌خوام تو یه کد آماده، به جای flatpickr از تاریخ شمسی استفاده کنم: کدی که نمی‌تونم تغییرش بدم اینه:

<input is="flat-pickr" class="form-control item-datestart select" type="datetime-local" tabindex="1"
    name="<?= $enc->attr( $this->formparam( array( 'item', 'product.datestart' ) ) ) ?>"
    placeholder="<?= $enc->attr( $this->translate( 'admin', 'YYYY-MM-DD hh:mm:ss (optional)' ) ) ?>"
    v-bind:value="`<?= $enc->js( $this->datetime( $this->get( 'itemData/product.datestart' ) ) ) ?>`"
    v-bind:disabled="`<?= $enc->js( $this->site()->readonly( $this->get( 'itemData/product.siteid' ) ) ) ?>` !== ''"
    v-bind:config="Aimeos.flatpickr.datetime" />
‍‍

و کد جاوااسکریپتی که نوشتم برای جایگزین کردن:

‍‍‍

Vue.use(VuePersianDatetimePicker,  {
    name: 'flat-pickr',
    props: {
        inputFormat: "YYYY-MM-DD",
        format: "YYYY/MM/DD",
        clearable: true,
        editable: false,
        color: 'var(--bs-primary, #30a0e0)',
        autoSubmit: false,
    }
});

با این تنظیمات تاریخی که انتخاب می‌کنم شمسیه، و همون تاریخ رو به میلادی در اینپوت نشون می‌ده و به درستی هم میلادی سابمیت می‌شه. ولی اگه displayFormat استفاده کنم تا تاریخ اینپوت به شمسی نمایش داده بشه، همون فرمت شمسی نمایش داده شده رو سابمیت می‌کنه. چه طوری می‌تونم بدون تغییر تگ input درستش کنم؟

alireza2281 commented 3 years ago

@niloofarfs سلام این input که الان داریو فقط واسه نمایش تاریخ ازش استفاده کن و v-model اصلی که قرار هست تاریخ میلادی رو نگه داره رو به خود کامپوننت `VuePersianDatetimePicker` بده و بعد روی `@change` کامپوننت بیا مقداره input رو بروزرسانی کم

talkhabi / vue-persian-datetime-picker

وقتی از Custom Input استفاده میشه display-format کار نمیکنه #149