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.2k

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

Invalid input detected message
incorrect input notification

Author:
Conan Hilton

2 years ago

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

Author:
Shariar Hasan

1 year ago

2.7k
Login Form
Login Form

Author:
Md. Tofayel islam

9 months ago

1.6k
File input

Author:
Anonymous

1 year ago

6.8k
Stacked Checkboxes

Author:
kishan pc

1 year ago

2k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

3.7k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

11 months ago

1.8k
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

10 months ago

2.1k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

7.9k
Maintenance mode

Author:
Maxim

1 year ago

3.3k
Simple range slider

Author:
Nour Haider

2 years ago

14.7k
Upload file input field

Author:
Gopi Yadav

2 years ago

13.9k

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