105 lines
2 KiB
Vue
105 lines
2 KiB
Vue
<template>
|
|
<div class="date-picker">
|
|
<input
|
|
type="text"
|
|
v-model="selectedDate"
|
|
@focus="showDatePicker = true"
|
|
@blur="showDatePicker = false"
|
|
placeholder="Select a date"
|
|
/>
|
|
<div v-if="showDatePicker" class="date-picker-dropdown">
|
|
<ul>
|
|
<li v-for="(day, index) in days" :key="index" @mousedown="selectDate(day)">
|
|
{{ formatDay(day) }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
date: { type: Date, default: () => new Date() },
|
|
})
|
|
const emit = defineEmits(['date-selected'])
|
|
|
|
function formatDay(date) {
|
|
const options = { weekday: 'long', day: 'numeric', month: 'numeric' }
|
|
return date.toLocaleDateString('en-AU', options)
|
|
}
|
|
|
|
const selectedDate = ref(formatDay(props.date))
|
|
const showDatePicker = ref(false)
|
|
|
|
watch(
|
|
() => props.date,
|
|
(newDate) => {
|
|
selectedDate.value = formatDay(newDate)
|
|
}
|
|
)
|
|
|
|
const days = computed(() => {
|
|
const today = new Date()
|
|
const result = []
|
|
for (let i = 0; i < 15; i++) {
|
|
const d = new Date(today)
|
|
d.setDate(today.getDate() + i)
|
|
result.push(d)
|
|
}
|
|
return result
|
|
})
|
|
|
|
function selectDate(date) {
|
|
selectedDate.value = formatDay(date)
|
|
showDatePicker.value = false
|
|
emit('date-selected', date)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.date-picker {
|
|
position: relative;
|
|
}
|
|
|
|
.date-picker input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
outline: none;
|
|
}
|
|
|
|
.date-picker-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
width: 100%;
|
|
margin: auto;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.date-picker-dropdown ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.date-picker-dropdown li {
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.date-picker-dropdown li:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.date-picker-dropdown li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|