You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.2 KiB
81 lines
2.2 KiB
<template>
|
|
<div class="tw-flex tw-flex-col-reverse md:tw-flex-row md:tw-items-center">
|
|
<button
|
|
class="select-date tw-transition tw-w-fit tw-btn-md tw-border tw-border-solid tw-border-secondary-default tw-text-secondary-default tw-bg-white tw-px-[16px] tw-py-[10px] tw-rounded-xl hover:tw-bg-secondary-default hover:tw-text-white">
|
|
<client-only>
|
|
<a-date-picker v-model="time1" placeholder="Select Time" :disabled-date="disabledDate" format="YYYY.MM.DD"
|
|
@change="onChange" @ok="onOk">
|
|
<span class="tw-text-secondary-default hover:tw-text-white tw-cursor-pointer">{{ $t("Select Date") }}</span>
|
|
</a-date-picker>
|
|
</client-only>
|
|
</button>
|
|
<!-- <a-range-picker v-model="time2">
|
|
<span>
|
|
{{ time2 ? time2 : "请选择" }}
|
|
</span>
|
|
</a-range-picker> -->
|
|
<div v-show="time1" class="tw-text-secondary-dark tw-body-4 tw-font-medium tw-mb-[15px] md:tw-mb-0 md:tw-ml-[20px]">
|
|
{{ $t("Selected: ") }}{{ startDate }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import moment from "moment";
|
|
export default {
|
|
props: {
|
|
start: {
|
|
type: String
|
|
},
|
|
end: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
time1: undefined,
|
|
time2: undefined,
|
|
};
|
|
},
|
|
computed: {
|
|
startDate() {
|
|
return moment(this.time1).format("YYYY.MM.DD");
|
|
},
|
|
endDate() {
|
|
return moment(this.time2).format("YYYY.MM.DD");
|
|
},
|
|
},
|
|
methods: {
|
|
onChange(value, dateString) {
|
|
console.log("Selected Time: ", value);
|
|
console.log("Formatted Selected Time: ", dateString);
|
|
this.$emit('selected', dateString);
|
|
},
|
|
onOk(value) {
|
|
console.log("onOk: ", value);
|
|
},
|
|
clearTime() {
|
|
this.time1 = undefined;
|
|
this.$emit('selected', '');
|
|
},
|
|
disabledDate(current) {
|
|
// const today = new Date();
|
|
// today.setHours(0, 0, 0, 0);
|
|
const startDate = new Date(this.start);
|
|
const endDate = new Date(this.end);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
endDate.setHours(0, 0, 0, 0);
|
|
endDate.setDate(endDate.getDate() + 1);
|
|
return current < startDate || current > endDate;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.select-date {
|
|
&:hover {
|
|
span {
|
|
color: #fefefe !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|