vue-datetime
vue-datetime copied to clipboard
[Feature Request] Allow non-zero-padded hours in time picker
Hi. In Time picker I always have zero-padded hours like 06, 07, 08, 09. I'm using everywhere in my app time format like H:mm and I wolud like to see hours like 6, 7, 8, 9 in Time picker.
// DatetimeTimePicker.vue
computed: {
hours () {
return hours(this.hourStep).filter(hour => {
if (!this.use12Hour) {
return true
} else {
if (this.hour < 12) {
return hour < 12
} else {
return hour >= 12
}
}
}).map(hour => ({
number: pad(hour), // <-- here it is!
selected: hour === this.hour,
disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour)
}))
},
I understand that 0 is for visual formating of the hours. I suggest that maybe pad could have a second parameter?
// util.js
export function pad (number, padSymbol = '0') {
return number < 10 ? padSymbol + number : number
}
// DatetimeTimePicker.vue
props: {
// add this prop
padHours: {
type: Boolean,
default: true
}
hour: {
type: Number,
required: true
},
...
}).map(hour => ({
number: this.padHours ? pad(hour) : pad(hour, ' '), // <-- here it is!
selected: hour === this.hour,
disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour)
}))