Hi Dev,
Today, I will show you how to use tailwind css datepicker in laravel. We will talk about laravel tailwind css datepicker example. In this article i will give simple datepicker using tailwind css in laravel.
Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.
Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.
Here I will give you full example for laravel tailwind css datepicker example so let;s see the bellow step by step:
Step 1: Install Laravel Project
First, you need to download the laravel fresh setup. Use this command then download laravel project setup :
composer create-project --prefer-dist laravel/laravel blog
Step 2: Install Tailwind CSS Via NPM
In this step, you need install tailwind css and tailwind css requires Node.js 12.13.0 or higher using bellow command so let's install the tailwind css.
npm install
Install Tailwind and its peer-dependencies using npm:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Create your configuration file
you can generate your tailwind.config.js file using bellow command:
npx tailwindcss init
This will create a minimal tailwind.config.js file at the root of your project or open this file and paste bellow code:
tailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Step 3 : Configure Tailwind with Laravel Mix
In this step, you can configure tailwind with laravel mix and change in your webpack.mix.js, add tailwindcss as a PostCSS plugin:
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Step 4 : Include Tailwind in your CSS
Open the ./resources/css/app.css file that Laravel generates for you by default and use the @tailwind directive to include Tailwind's base, components, and utilities styles, replacing the original file contents:
resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5 : Add Route
<?php
use App\Http\Controllers\HomeController;
Route::get('/datepicker', [HomeController::class,'index']);
Step 6 : Create Controller
In this step, you can create new controller as HomeController so let's open terminal and bellow artisan command to create controller.
php artisan make:controller HomeController
app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class HomeController extends Controller
{
public function homePage()
{
return view('tailwind-datepicker');
}
}
Step 7 : Create Blade File
In last step, You can create datepicker view as tailwind-datepicker.blade.php So let's create tailwind-datepicker.blade.php file and paste bellow code:
resources/views/tailwind-datepicker.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Tailwind CSS DatePicker Example</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
<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>
<body>
<div>
</div>
<div class="h-screen w-screen flex justify-center bg-gray-200 py-5">
<div class="antialiased sans-serif mt-5">
<h1 class="font-bold text-gray-700 text-2xl mt-5">Laravel Tailwind CSS DatePicker Example</h1>
<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 }"
></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</body>
</html>
Now we are ready to run our google recaptcha v3 example with laravel 8 so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
localhost:8000/datepicker
It will help you....
