24 hours time picker for vueJS

user_19237342 0
Viewed 246

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

vuetify.js vue.js html
2 Answers

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.

user_8299700

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.

user_49283740
Related