time Tailwind CSS and Alpinejs

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

Input

Author Hai mmm

Tailwind v3.4 2.4k 8

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

simple badge

Muhammad Imran

2 years ago

2.3k
Login form

Gopi Yadav

4 years ago

12.1k
Select input

Sophia Baker

3 years ago

15.1k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.1k
pricing slider with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.2k
Input field with logo
Logo on the left side of the input field

Conan Hilton

4 years ago

11.6k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

712
Single Input newsletter form

Task Master

3 years ago

11k
todo list with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.3k
Large File upload input

Akshay

4 years ago

15.3k
File Upload

Rajesh Maheshwari

1 year ago

1.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.