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

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

Prajwal Hallale

3 years ago

27.9k
Domain For Sale Template
Domain For Sale Template

Geoffrey Callaghan

2 years ago

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

Nick Girga

1 year ago

1.1k
todo list with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.3k
Incentives
tailwind css Incentives

Anonymous

2 years ago

5.9k
File Upload

Rajesh Maheshwari

1 year ago

1.4k
File input

Anonymous

2 years ago

8.2k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.2k
File Upload
Image or file upload card

Khalid

2 years ago

3.9k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Maxim

1 year ago

2.8k
Textarea

Ron Hicks

3 years ago

12.7k
beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

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