ElementFE/ElementUI TimePicker - 12 hour format

Question

I have a element UI timepicker and I'm trying to switch from the default 24 hour format to a 12 hour format. I recently saw that a PR allowed people to do this through i8n, but i don't know how. You can see the discussion here https://github.com/ElemeFE/element/issues/6537

My code is as followed

            <div class ="container">
                <el-time-select
                    placeholder="Start time"
                    value="HH"
                    v-model="startTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                      format : 'HH'
                    }">
                  </el-time-select>
                  <el-time-select
                    placeholder="End time"
                    v-model="endTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                      minTime: startTime
                    }">
                  </el-time-select>

I also set the locale like so in my html file.

  ELEMENT.locale(ELEMENT.lang.en)

Any ideas?

Answer 1

As of today, you can see in the url below there is no options as such for el-time-select: http://element.eleme.io/#/en-US/component/time-picker#time-select-options

But, there is format option available for el-time-picker and you can check it here: http://element.eleme.io/#/en-US/component/time-picker#time-picker-options

<template lang="pug">
  el-time-picker(
    format="hh:mm:ss A",
    value-format="hh:mm:ss A",
    placeholder="Start time",
    v-model="timeVal"
  )
</template>

<script>
  export default {
    data() {
      return {
        timeVal: '10:30 AM' // This works only if "value-format" is used, if not used then do like below
        timeVal: new Date(2018, 9, 10, 8, 40) // year, month, day, hour, and minute
      };
    }
  };
</script>

If you are specific about using el-time-select then the hack could be to use el-select and do some custom stuff. Good Luck.