Components
- Tailwind CSS Accordion
- Tailwind CSS Alert
- Tailwind CSS Avatar
- Dropdown example
- Dropdown hover
- Delay duration
- Dropdown divider
- carousels
- date Picker
- lists
- lists Group
- Legend indicator
- Progress
- Skelton
- Tailwind Css Ratings
- Tailwind css Spinners
- Tailwind Css Icons staick
- Tailwind Css Stipper
- Tailwind Css Toats
- Dropdown with checkbox
- Background hover
- Tailwind css Timeline
- Helper text
- navBar
- Section
- Tabs
date Picker
The Datepicker component integrates a date input field with a calendar popover, offering a seamless way for users to input or select specific date and time values. It simplifies scheduling and event planning within applications.
datepicker1
Copied!
<div class="antialiased sans-serif ">
<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"
:value="datepickerValue"
/>
<input
type="text"
x-on:click="showDatepicker = !showDatepicker"
x-model="datepickerValue"
x-on:keydown.escape="showDatepicker = false"
class="w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none text-gray-600 font-medium focus:ring focus:ring-blue-600 focus:ring-opacity-50"
placeholder="Select date"
readonly
/>
<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 x-text="no_of_days.length"></div>
<div x-text="32 - new Date(year, month, 32).getDate()"></div>
<div x-text="new Date(year, month).getDay()"></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="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 p-1 rounded-full"
@click="if (month == 0) {
year--;
month = 12;
} month--; getNoOfDays()"
>
<svg
class="h-6 w-6 text-gray-400 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="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 p-1 rounded-full"
@click="if (month == 11) {
month = 0;
year++;
} else {
month++;
} getNoOfDays()"
>
<svg
class="h-6 w-6 text-gray-400 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-0.5"
>
<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-indigo-200': isToday(date) == true,
'text-gray-600 hover:bg-indigo-200': isToday(date) == false && isSelectedDate(date) == false,
'bg-indigo-500 text-white hover:bg-opacity-75': isSelectedDate(date) == true
}"
></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const MONTH_SHORT_NAMES = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
selectedDate: "2024-04-04",
dateFormat: "DD-MM-YYYY",
month: "",
year: "",
no_of_days: [],
blankdays: [],
initDate() {
let today;
if (this.selectedDate) {
today = new Date(Date.parse(this.selectedDate));
} else {
today = new Date();
}
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = this.formatDateForDisplay(
today
);
},
formatDateForDisplay(date) {
let formattedDay = DAYS[date.getDay()];
let formattedDate = ("0" + date.getDate()).slice(
-2
); // appends 0 (zero) in single digit date
let formattedMonth = MONTH_NAMES[date.getMonth()];
let formattedMonthShortName =
MONTH_SHORT_NAMES[date.getMonth()];
let formattedMonthInNumber = (
"0" +
(parseInt(date.getMonth()) + 1)
).slice(-2);
let formattedYear = date.getFullYear();
if (this.dateFormat === "DD-MM-YYYY") {
return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`; // 02-04-2021
}
if (this.dateFormat === "YYYY-MM-DD") {
return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`; // 2021-04-02
}
if (this.dateFormat === "D d M, Y") {
return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`; // Tue 02 Mar 2021
}
return `${formattedDay} ${formattedDate} ${formattedMonth} ${formattedYear}`;
},
isSelectedDate(date) {
const d = new Date(this.year, this.month, date);
return this.datepickerValue ===
this.formatDateForDisplay(d)
? true
: false;
},
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 = this.formatDateForDisplay(
selectedDate
);
// this.$refs.date.value = selectedDate.getFullYear() + "-" + ('0' + formattedMonthInNumber).slice(-2) + "-" + ('0' + selectedDate.getDate()).slice(-2);
this.isSelectedDate(date);
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>
</div>
datepicker2
Copied!
<div class="antialiased sans-serif ">
<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">
<div class="relative">
<div
class="bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"
style="width: 17rem"
x-show.transition="showDatepicker"
>
<div
class="flex justify-between items-center mb-2"
>
<button
type="button"
class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 p-1 rounded-full"
@click="if (month == 0) {
year--;
month = 12;
} month--; getNoOfDays()"
>
<svg
class="h-6 w-6 text-gray-400 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>
<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="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 p-1 rounded-full"
@click="if (month == 11) {
month = 0;
year++;
} else {
month++;
} getNoOfDays()"
>
<svg
class="h-6 w-6 text-gray-400 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-0.5"
>
<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 h-48">
<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
x-text="date"
class="cursor-pointer text-center p-2 text-medium leading-none rounded-full leading-loose transition ease-in-out duration-100"
:class="{
'bg-indigo-200': isToday(date) == true,
'text-gray-600 hover:bg-indigo-200': isToday(date) == false && isSelectedDate(date) == false,
'bg-indigo-500 text-white hover:bg-opacity-75': isSelectedDate(date) == true
}"
></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const MONTH_SHORT_NAMES = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
function app() {
return {
showDatepicker: true,
datepickerValue: "",
selectedDate: "2024-04-04",
dateFormat: "DD-MM-YYYY",
month: "",
year: "",
no_of_days: [],
blankdays: [],
initDate() {
let today;
if (this.selectedDate) {
today = new Date(Date.parse(this.selectedDate));
} else {
today = new Date();
}
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = this.formatDateForDisplay(
today
);
},
formatDateForDisplay(date) {
let formattedDay = DAYS[date.getDay()];
let formattedDate = ("0" + date.getDate()).slice(
-2
); // appends 0 (zero) in single digit date
let formattedMonth = MONTH_NAMES[date.getMonth()];
let formattedMonthShortName =
MONTH_SHORT_NAMES[date.getMonth()];
let formattedMonthInNumber = (
"0" +
(parseInt(date.getMonth()) + 1)
).slice(-2);
let formattedYear = date.getFullYear();
if (this.dateFormat === "DD-MM-YYYY") {
return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`; // 02-04-2021
}
if (this.dateFormat === "YYYY-MM-DD") {
return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`; // 2021-04-02
}
if (this.dateFormat === "D d M, Y") {
return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`; // Tue 02 Mar 2021
}
return `${formattedDay} ${formattedDate} ${formattedMonth} ${formattedYear}`;
},
isSelectedDate(date) {
const d = new Date(this.year, this.month, date);
return this.datepickerValue ===
this.formatDateForDisplay(d)
? true
: false;
},
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 = this.formatDateForDisplay(
selectedDate
);
// this.$refs.date.value = selectedDate.getFullYear() + "-" + ('0' + formattedMonthInNumber).slice(-2) + "-" + ('0' + selectedDate.getDate()).slice(-2);
this.isSelectedDate(date);
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>
</div>
datepicker3
Copied!
<!-- Calendar -->
<div class="w-80 mt-5 space-y-0.5 ml-80 bg-white bg-white border border-gray-300 rounded-2xl shadow-xl " x-data="calendar()">
<!-- Months -->
<div class="grid grid-cols-7 gap-x-1 pb-4 pt-4 ">
<!-- Prev Button -->
<div class="col-span-1 flex justify-center">
<button type="button" class="size-8 flex justify-center items-center
text-gray-800 hover:bg-gray-100 rounded-full
disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800
dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" @click="prevMonth">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
</button>
</div>
<!-- End Prev Button -->
<!-- Month / Year -->
<div class="col-span-5 flex justify-center items-center gap-x-1">
<!-- Month Select max-h-64 -->
<div class="relative">
<div class="block w-24 overflow-auto hover:border-gray-400 px-2 py-1 leading-tight focus:outline-none focus:border-blue-500 focus:bg-white focus:z-10" x-on:click="showMonthPicker = !showMonthPicker">
<span x-text="months[selectedMonth]"></span>
</div>
<div class="absolute h-48 mt-2 w-30 bg-white rounded-md shadow-lg overflow-y-auto overflow-hidden" x-show="showMonthPicker" @click.away="showMonthPicker = false">
<template x-for="(month, index) in months" :key="index">
<div @click="selectedMonth = index; updateCalendar(); showMonthPicker = false;" class="cursor-pointer px-4 py-2 hover:bg-gray-100">
<span x-text="month"></span>
</div>
</template>
</div>
</div>
<!-- End Month Select -->
<span class="text-gray-800 dark:text-gray-200">/</span>
<!-- Year Select -->
<div class="relative">
<div class="block w-24 bg-white overflow-auto hover:border-gray-400 px-2 py-1 leading-tight focus:outline-none focus:border-blue-500 focus:bg-white focus:z-10" x-on:click="showYearPicker = !showYearPicker">
<span x-text="selectedYear"></span>
</div>
<div class="absolute mt-2 w-24 bg-white rounded-md shadow-lg overflow-y-auto overflow-hidden" x-show="showYearPicker" @click.away="showYearPicker = false">
<template x-for="year in years">
<div @click="selectedYear = year; updateCalendar(); showYearPicker = false;" class="cursor-pointer px-4 py-2 hover:bg-gray-100">
<span x-text="year"></span>
</div>
</template>
</div>
</div>
<!-- End Year Select -->
</div>
<!-- End Month / Year -->
<!-- Next Button -->
<div class="col-span-1 flex justify-center">
<button type="button" class="size-8 flex justify-center items-center text-gray-800 hover:bg-gray-100 rounded-full disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" @click="nextMonth">
<svg class="flex-shrink-0 size-4" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</div>
<!-- End Next Button -->
</div>
<!-- Months -->
<!-- Week Days -->
<div class="grid grid-cols-7 gap-x-1 px-4">
<!-- Days Names -->
<template x-for="(day, index) in days">
<span class="w-10 block text-center text-xs text-gray-500 " x-text="day"></span>
</template>
<!-- End Days Names -->
</div>
<!-- End Week Days -->
<!-- Days -->
<div class="grid grid-cols-7 gap-1 px-4">
<!-- Days Numbers -->
<template x-for="(day, index) in daysInMonth" :key="index">
<div x-on:click="selectDate(day)" x-bind:class="{ 'bg-blue-600 text-white': isToday(day),'m-px': true,
'size-10': true, 'flex': true, 'justify-center': true, 'items-center': true,
'border': true, 'border-transparent': true, 'text-xs': true,
'text-gray-800': true, 'hover:border-blue-600': true,
'hover:text-blue-600': true, 'rounded-full': true,
'disabled:text-gray-300': true, 'disabled:pointer-events-none': true,
'dark:text-gray-200': true, 'dark:hover:border-gray-500': true,
'dark:focus:outline-none': true, 'dark:focus:ring-1': true,
'dark:focus:ring-gray-600': true, 'dark:disabled:text-gray-600': true }":disabled="isDisabled(day)" >
<span x-text="day !== '' ? day : ''"></span>
</div>
</template>
<!-- End Days Numbers -->
<!-- Days -->
<div class="grid grid-cols-7 gap-1">
</div>
<!-- End Days -->
</div>
<!-- End Days -->
</div>
<!-- End Calendar -->
<script>
function calendar() {
const months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; // Start from Sunday
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth();
return {
months,
days,
years: [currentYear, currentYear + 1, currentYear + 2],
selectedMonth: currentMonth, // Set to current month
selectedYear: currentYear, // Set to current year
showMonthPicker: false,
showYearPicker: false,
get daysInMonth() {
const firstDayOfMonth = new Date(this.selectedYear, this.selectedMonth, 1).getDay(); // Get the day of the week of the first day
const daysInSelectedMonth = new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate();
const daysFromPreviousMonth = (firstDayOfMonth - 1 + 7) % 7; // Number of days from the previous month to display
const daysFromNextMonth = 42 - (daysInSelectedMonth + daysFromPreviousMonth); // Remaining days to complete the grid
const days = [];
// Previous month
const previousMonthLastDay = new Date(this.selectedYear, this.selectedMonth, 0).getDate();
for (let i = previousMonthLastDay - daysFromPreviousMonth + 1; i <= previousMonthLastDay; i++) {
days.push('');
}
// Current month
for (let i = 1; i <= daysInSelectedMonth; i++) {
days.push(i);
}
// Next month
for (let i = 1; i <= daysFromNextMonth; i++) {
days.push('');
}
return days;
},
isToday(day) {
return this.selectedYear === today.getFullYear() &&
this.selectedMonth === today.getMonth() &&
parseInt(day) === today.getDate();
},
isDisabled(day) {
return day === '';
},
prevMonth() {
if (this.selectedMonth > 0) {
this.selectedMonth--;
} else {
this.selectedMonth = 11;
this.selectedYear--;
}
},
nextMonth() {
if (this.selectedMonth < 11) {
this.selectedMonth++;
} else {
this.selectedMonth = 0;
this.selectedYear++;
}
},
updateCalendar() {
// Manually update the calendar when month or year changes
},
selectDate(day) {
if (day !== '') {
console.log(`Selected date: ${this.selectedMonth + 1}/${day}/${this.selectedYear}`);
}
}
};
}
</script>