ElementUI的DateTimePicker组件修改时间格式

红太狼 2023-10-18 11:32 32阅读 0赞

### 场景 ###

ElementUI的dateTimePicker组件是一个日期和时间共存的选择器。

有时我们需要规定选择时的时间格式，这时就要用这个组件的format属性。

### 使用 ###

<el-form-item label="支付截止日期:" prop="finalPayTime">
                  <el-date-picker
                    v-model="demandBid.finalPayTime" format="yyyy-MM-dd HH:mm"
                    type="datetime"
                    placeholder="支付截止日期" :picker-options="pickerOptions5">
    </el-date-picker>

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 日期时间格式参照 ###

使用format指定输入框的格式；使用value-format指定绑定值的格式。

请注意大小写

<table> 
 <thead> 
  <tr> 
   <th>格式</th> 
   <th>含义</th> 
   <th>备注</th> 
   <th>举例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>yyyy</code></td> 
   <td>年</td> 
   <td>&nbsp;</td> 
   <td>2017</td> 
  </tr> 
  <tr> 
   <td><code>M</code></td> 
   <td>月</td> 
   <td>不补0</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><code>MM</code></td> 
   <td>月</td> 
   <td>&nbsp;</td> 
   <td>01</td> 
  </tr> 
  <tr> 
   <td><code>W</code></td> 
   <td>周</td> 
   <td>仅周选择器的&nbsp;<code>format</code>&nbsp;可用；不补0</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><code>WW</code></td> 
   <td>周</td> 
   <td>仅周选择器的&nbsp;<code>format</code>&nbsp;可用</td> 
   <td>01</td> 
  </tr> 
  <tr> 
   <td><code>d</code></td> 
   <td>日</td> 
   <td>不补0</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><code>dd</code></td> 
   <td>日</td> 
   <td>&nbsp;</td> 
   <td>02</td> 
  </tr> 
  <tr> 
   <td><code>H</code></td> 
   <td>小时</td> 
   <td>24小时制；不补0</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><code>HH</code></td> 
   <td>小时</td> 
   <td>24小时制</td> 
   <td>03</td> 
  </tr> 
  <tr> 
   <td><code>h</code></td> 
   <td>小时</td> 
   <td>12小时制，须和&nbsp;<code>A</code>&nbsp;或&nbsp;<code>a</code>&nbsp;使用；不补0</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><code>hh</code></td> 
   <td>小时</td> 
   <td>12小时制，须和&nbsp;<code>A</code>&nbsp;或&nbsp;<code>a</code>&nbsp;使用</td> 
   <td>03</td> 
  </tr> 
  <tr> 
   <td><code>m</code></td> 
   <td>分钟</td> 
   <td>不补0</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td><code>mm</code></td> 
   <td>分钟</td> 
   <td>&nbsp;</td> 
   <td>04</td> 
  </tr> 
  <tr> 
   <td><code>s</code></td> 
   <td>秒</td> 
   <td>不补0</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td><code>ss</code></td> 
   <td>秒</td> 
   <td>&nbsp;</td> 
   <td>05</td> 
  </tr> 
  <tr> 
   <td><code>A</code></td> 
   <td>AM/PM</td> 
   <td>仅&nbsp;<code>format</code>&nbsp;可用，大写</td> 
   <td>AM</td> 
  </tr> 
  <tr> 
   <td><code>a</code></td> 
   <td>am/pm</td> 
   <td>仅&nbsp;<code>format</code>&nbsp;可用，小写</td> 
   <td>am</td> 
  </tr> 
  <tr> 
   <td><code>timestamp</code></td> 
   <td>JS时间戳</td> 
   <td>仅&nbsp;<code>value-format</code>&nbsp;可用；组件绑定值为<code>number</code>类型</td> 
   <td>1483326245000</td> 
  </tr> 
 </tbody> 
</table>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181121153517429.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70