vue-datetime icon indicating copy to clipboard operation
vue-datetime copied to clipboard

[Feature Request] Allow non-zero-padded hours in time picker

Open smamczak opened this issue 5 years ago • 0 comments

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)
}))


smamczak avatar Dec 02 '18 09:12 smamczak