CODEWITHSUNDEEP
htmlvue.jsvuetify.js
Arctic Fox
Arctic Fox

Reputation: 79

24 hours time picker for vueJS

In my vuejs application I'm using input field to enter a time.

field type is time

<!-- Start Time -->
                    <div v-if="this.selectedValue=== '1'" class="container mx-auto flex bg-white px-6 py-1 space-x-2">
                            <dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="shift_start_time">
                                Start time
                            </dashboard-input-label>
                            <div class="col-sm-10 mb-6 w-full">   
                                    <input 
                                        name="shift_start_time" 
                                        type="time"
                                        class="form-input w-full relative z-10"
                                        placeholder="Start time"
                                    >
                            </div>   
                    </div>
                    <!-- Start Time -->

This'll give me an output as follows,

enter image description here

But I need this time picker to be a 24 hours one without having AM and PM

enter image description here

How can achieve this, since MDN also does not have proper explanation on this....

Upvotes: 3

Views: 4441

Answers (2)

Moshe Katz
Moshe Katz

Reputation: 16883

It says in the MDN page you linked to in your question that all browsers choose whether the time picker is 12-hr or 24-hr based on the system locale.

Example from the Chrome portion:

... with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale ...

From the Firefox portion:

It also uses a 12- or 24-hour format for inputting times, based on system locale.

If you want all users to see a 24-hour picker, you will need to use a JavaScript picker instead of the browser built-in picker.

Upvotes: 2

Daniel
Daniel

Reputation: 118

The appearance you refer to is browser defined. If you want to customize it, you can do it with CSS. My advice would be to add a time picker component written in Vue, so it takes away the issue of creating a custom time picker.

Upvotes: 1

Related Questions