Home
Hai mmm
time Tailwind CSS and Alpinejs

time Tailwind CSS and Alpinejs

This tailwind example is contributed by Hai mmm, on 09-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Hai mmm

893

3

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<form x-data="{
        selectedTime: '09:00',
        availableTimes: [],
        unAvailableTimes: ['12:30', '15:00'], // כאן תוכל להוסיף זמנים לא זמינים
        init() {
            // יצירת זמני הבחירה בין 09:00 ל-18:00 במרווחים של 30 דקות
            let start = 9 * 60; // 9:00 בדקות
            let end = 18 * 60; // 18:00 בדקות
            for (let minutes = start; minutes <= end; minutes += 30) {
                let hours = String(Math.floor(minutes / 60)).padStart(2, '0');
                let mins = String(minutes % 60).padStart(2, '0');
                let time = `${hours}:${mins}`;
                
                // הוספת זמן אם הוא לא מופיע ב-unAvailableTimes
                if (!this.unAvailableTimes.includes(time)) {
                    this.availableTimes.push(time);
                }
            }
        }
    }" x-init="init()" class="max-w-[8rem] mx-auto">
    <label for="time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select time:</label>
    <div class="relative">
        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/>
            </svg>
        </div>
        <select x-model="selectedTime" id="time" class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
            <template x-for="(time, index) in availableTimes" :key="index">
                <option :value="time" x-text="time"></option>
            </template>
        </select>
    </div>
</form>

Related Examples

Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.5k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

11 months ago

1.5k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

7 months ago

1.6k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

2 months ago

494
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

21.4k
Email input

Author:
Sophia Baker

2 years ago

10.1k
File input field

Author:
Lyra Ravensong

1 year ago

12.4k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

25.9k
File upload with icon

Author:
Fagundo67

2 years ago

16.7k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

2.2k
Login form

Author:
Gopi Yadav

2 years ago

10.2k
File upload input section with file preview

Author:
Noob

2 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1