【发布时间】：2021-08-09 08:34:15
【问题描述】：
对于此 Tailwind UI Datepicker 中发生此错误的位置，我感到非常困惑。如果我在可视日期选择器上选择 09-08-2021，则该值将保存为 09-07-2021。
我已经阅读了其他类似的经验，其中月份值在某个地方需要 +1，因为月份从 0 开始，而它应该是 1，但是到目前为止我尝试添加 1 的所有地方我都没有成功获得正确的日期。
脚本之前：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
</head>
<div></div>
<div x-data="app()" x-init="[initDate(), getNoOfDays()]" x-cloak>
<div class="container mx-auto px-4 py-2 md:py-10">
<div class="mb-5 w-64">
<label for="datepicker" class="font-bold mb-1 text-gray-700 block">Select Date</label>
<div class="relative">
<input type="hidden" name="date" x-ref="date">
<input type="text" readonly x-model="datepickerValue" @click="showDatepicker = !showDatepicker" @keydown.escape="showDatepicker = false" class="w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium" placeholder="Select date">
<div class="absolute top-0 right-0 px-3 py-2">
<svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
</div>
<div class="bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0" style="width: 17rem" x-show.transition="showDatepicker" @click.away="showDatepicker = false">
<div class="flex justify-between items-center mb-2">
<div>
<span x-text="MONTH_NAMES[month]" class="text-lg font-bold text-gray-800"></span>
<span x-text="year" class="ml-1 text-lg text-gray-600 font-normal"></span>
</div>
<div>
<button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full" :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled="month == 0 ? true : false" @click="month--; getNoOfDays()">
<svg class="h-6 w-6 text-gray-500 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
</button>
<button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full" :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled="month == 11 ? true : false" @click="month++; getNoOfDays()">
<svg class="h-6 w-6 text-gray-500 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
</div>
</div>
<div class="flex flex-wrap mb-3 -mx-1">
<template x-for="(day, index) in DAYS" :key="index">
<div style="width: 14.26%" class="px-1">
<div x-text="day" class="text-gray-800 font-medium text-center text-xs">
</div>
</div>
</template>
</div>
<div class="flex flex-wrap -mx-1">
<template x-for="blankday in blankdays">
<div style="width: 14.28%" class="text-center border p-1 border-transparent text-sm">
</div>
</template>
<template x-for="(date, dateIndex) in no_of_days" :key="dateIndex">
<div style="width: 14.28%" class="px-1 mb-1">
<div @click="getDateValue(date)" x-text="date" class="cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100" :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"
脚本：
<script>
const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
function app() {
return {
showDatepicker: false,
datepickerValue: '',
month: '',
year: '',
no_of_days: [],
blankdays: [],
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new Date(this.year, this.month, date);
return today.toDateString() === d.toDateString() ? true : false;
},
getDateValue(date) {
let selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() +"-"+ (('0'+ selectedDate.getMonth()).slice(2)) +"-"+ ('0' + selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
// find where to start calendar day of week
let dayOfWeek = new Date(this.year, this.month).getDay();
let blankdaysArray = [];
for ( var i=1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for ( var i=1; i <= daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays = blankdaysArray;
this.no_of_days = daysArray;
}
}
}
</script>
非常感谢任何帮助。希望一些额外的眼睛可以看到我错过了什么。
【问题讨论】：
标签： javascript php html laravel datepicker