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

1.1k

4

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

test2

Author:
SHAHAD EIDAH ALHAERTHI

9 months ago

1.2k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

14.4k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

9.9k
Console like input field

Author:
Charlotte Dupont

2 years ago

11.1k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.8k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

8 months ago

1.3k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

11 months ago

3.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

9 months ago

2.1k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

2 months ago

62
File input field

Author:
Lyra Ravensong

2 years ago

12.6k
Sign in / Login Form

Author:
Bunny

2 years ago

12.8k
Select input

Author:
Sophia Baker

2 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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