Closed hamed-bolhasani closed 2 years ago
Hi @hamed2867
With this way:
<date-picker v-model="date" type="datetime" />
data() {
return {
date: ['2022-02-20 19:13', '2022-02-21 19:13']
}
}
thank you for your answer, I create Component from your datePicker as below:
<template>
<div>
<date-picker
:key="keyToUpdate"
:value="value ? toUTC(value) : null"
:mode="mode"
:type="type"
:column="column"
:locale="locale"
:autoSubmit = "autoSubmit"
:locale-config="type === 'datetime' ? {
fa: {
inputFormat: 'jYYYY/jMM/jDD HH:mm',
},
en: {
format: 'YYYY-MM-DD HH:mm',
},
} : {
fa: {
inputFormat: 'jYYYY/jMM/jDD',
},
en: {
format: 'YYYY-MM-DD',
},
}"
click-on="all"
format="YYYY-MM-DD HH:mm"
:to="to"
:from="from"
clearable
:show="false"
:auto-submit="false"
:id="`date-picker-${value}`"
class="form-control p-0"
style="height: 32px"
@select="selected"
>
<!-- v-model="dateOfBirth" -->
<template v-if="value" #clear>
<b-icon @click="$emit('input', null );" scale="2" aria-hidden="true" icon="x"></b-icon>
</template>
</date-picker>
</div>
</template>
<script>
import datePicker from "@alireza-ab/vue-persian-datepicker";
import moment from "jalali-moment";
import dateFormat from "@/mixins/dateFormat";
export default {
data(){
return {
keyToUpdate:0,
dateInfo: []
}
},
components: { datePicker },
methods: {
selected(value){
let dateInfo;
if (this.mode === "single") {
dateInfo = value.d.year + "/" + value.d.month + "/" + value.d.date + ' ' + value.d.hour + ':' + value.d.minute + ':' + value.d.second;
if (value.c === "jalali") {
dateInfo = this.toUTC(this.toGreg(dateInfo));
}
} else {
this.dateInfo.push(value)
if (this.dateInfo.length > 1) {
dateInfo = []
this.dateInfo.forEach((v, index) => {
dateInfo[index] = v.d.year + "/" + v.d.month + "/" + v.d.date + ' ' + v.d.hour + ':' + v.d.minute + ':' + v.d.second;
if (v.c === "jalali") {
dateInfo[index] = this.toUTC(this.toGreg(dateInfo[index]));
}
});
}
}
this.$emit("select", this.toIso ? this.toIsoDate(dateInfo) : dateInfo);
this.$emit("input", this.toIso ? this.toIsoDate(dateInfo) : dateInfo);
},
dateInput(value) {
let dateInfo;
// if (value){
if (this.mode === "single") {
dateInfo = value.d.year + "/" + value.d.month + "/" + value.d.date + ' ' + value.d.hour + ':' + value.d.minute + ':' + value.d.second;
if (value.c === "jalali") {
dateInfo = this.toUTC(this.toGreg(dateInfo));
}
} else {
dateInfo = [];
value.forEach((v, index) => {
dateInfo[index] = v.d.year + "/" + v.d.month + "/" + v.d.date + ' ' + v.d.hour + ':' + v.d.minute + ':' + v.d.second;
if (v.c === "jalali") {
dateInfo[index] = this.toUTC(this.toGreg(dateInfo[index]));
}
});
}
// this.$emit("input", this.toIso ? this.toIsoDate(dateInfo) : dateInfo);
},
},
mixins: [dateFormat],
props: {
to: {
default: moment.from(new Date()).locale("fa").format("YYYY/MM/DD"),
// default: moment.from(new Date()).locale("en").format("YYYY MM DD, hh:mm:ss")
},
from: {
default: '1300',
// default: moment.from(new Date()).locale("en").format("YYYY MM DD, hh:mm:ss")
},
locale: {
default: "fa,en",
},
column: {
default: 1,
},
mode: {
default: "single",
},
type: {
default: "date",
},
toIso: {
default: true,
type : Boolean
},
value: {
// default: moment.from(new Date()).locale("en").format("YYYY MM DD, hh:mm:ss")
default: null,
},
autoSubmit: {
default: false,
},
timezone: {
default: false,
},
},
watch:{
// value(){
// if (this.value === '' || this.value === null){
// this.keyToUpdate++;
// }
// }
}
};
</script>
And call it as:
<my-ab-date-picker
:mode="'range'"
:type="'datetime'"
:locale="'fa,en'"
click-on="all"
clearable
:show="false"
:auto-submit="true"
:column="2"
v-model="searchDate"
:toIso="false"
>
and in data:
data() {
return {
searchDate: ['2022-02-20 19:13', '2022-02-21 19:13'],
}
}
but it doesn't work and (Error in mounted hook: "TypeError: e.some is not a function") showed Do you have any idea for it?
Could you also show me the toUTC
function?
In addition, you can use PersianDate
instead of moment
to improve your code.
import datePicker, {PersianDate} from '@alireza-ab/vue-persian-datepicker'
documentation: https://alireza-ab.ir/persian-date
Could you also show me the
toUTC
function?In addition, you can use
PersianDate
instead ofmoment
to improve your code.import datePicker, {PersianDate} from '@alireza-ab/vue-persian-datepicker'
documentation: https://alireza-ab.ir/persian-date
toUTC(value) {
return moment.from(value).format("YYYY-MM-DD HH:mm")
},
change the function to this:
toUTC(value){
if(Array.isArray(value))
return value.map(date => moment.from(date).format("YYYY-MM-DD HH:mm"))
return moment.from(value).format("YYYY-MM-DD HH:mm")
}
I have the same requirement to set initial value while loading the page containing date-picker. but I need to set the value dynamically. in your example answer here you set the range statically. Is there any solution?
Hi @honarmanly Please read this #4.
change the function to this:
toUTC(value){ if(Array.isArray(value)) return value.map(date => moment.from(date).format("YYYY-MM-DD HH:mm")) return moment.from(value).format("YYYY-MM-DD HH:mm") }
Thank you for Your answer.
I have the same requirement to set initial value while loading the page containing date-picker. but I need to set the value dynamically. in your example answer here you set the range statically. Is there any solution?
try this:
data() {
return {
searchDate: this.getDefaultDateItems(),
}
},
methods: {
getDefaultDateItems(){
let startDate = new Date();
startDate.setHours(0, 0, 0);
let endDate = new Date();
endDate.setHours(23, 59, 59);
return [startDate,endDate];
},
}
and v-model your datepicker field on searchDate (for Example)
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?