vue项目中 日期组件的使用 常用的方法

转换接口中返回的日期格式

例如： 后台返回的时间格式是一串数字。
则：可以使用以下的转换方法。

方法一、

/*时间进行格式化*/
      // ISO标准时间格式  转换为  年月日 时分秒
dateFormat(time) {
  if (time != null) {
    var date = new Date(time);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始，11结束，因此要加0
      * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      * */
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    // return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return year + "-" + month + "-" + day;
  }
},

方法二、

      // 下面 是时间转换的 三目写法 
      timeFomate(date) {
      // 字符串的要转换一下数字类型。
      // console.log(Number(date))
      let dateTime = new Date(Number(date));
      let Y = dateTime.getFullYear()
      let M = dateTime.getMonth() + 1 - 0 >= 10 ? Number(dateTime.getMonth()) + 1 : '0' + (Number(dateTime.getMonth()) + 1)
      let D = dateTime.getDate()
      let h = dateTime.getHours() >= 10 ? dateTime.getHours() : '0' + dateTime.getHours()
      let m = dateTime.getMinutes() >= 10 ? dateTime.getMinutes() : '0' + dateTime.getMinutes()
      let s = dateTime.getSeconds() >= 10 ? dateTime.getSeconds() : '0' + dateTime.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
      // return Y + '-' + M + '-' + D 
      },

方法三、

//  时间戳转换为  年月日 时分秒
timestampToTime(timestamp) {
  var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

  let strDate = Y + M + D + h + m + s;
  console.log(strDate) //2020-05-08 17:44:56　
  return strDate;
},

element 日期组件做一个选择限制，如下：

	  <!-- 时间选择器 -->
      <span class="demonstration">创建日期：</span>
      <el-date-picker
        v-model="startTime"
        type="date"
        :picker-options="pickerOptionsStart"
        placeholder="选择日期">
      </el-date-picker>
      <span>至</span>
      <el-date-picker
        v-model="endTime"
        type="date"
        :picker-options="pickerOptionsEnd"
        placeholder="选择日期">
      </el-date-picker>

        // 限制结束日期不能早于开始日期，开始日期不能晚于结束日期。
        pickerOptionsStart: {
          disabledDate: time => {
            if (this.endTime) {
              return time.getTime() > new Date(this.endTime).getTime()
            }
            // 做一个 只能选择今日之前的日期  的限制
            return  time.getTime() > Date.now();
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            if (this.startTime) {
              return time.getTime() < new Date(this.startTime).getTime()
            }
          }
        }

iview 日期组件 做一个选择限制，如下：

        <span >创建日期：</span>
        <Row>
          <Col span="12">
            <DatePicker 
              type="date"
              v-model="startTime"
              :options="startOption"
              placeholder="请选择日期" 
              style="width: 150px">
            </DatePicker>
          </Col>
        </Row>
        <span style="margin-left:0.5%;margin-right:0.5%;">至</span>
        <Row>
          <Col span="12">
            <DatePicker 
              type="date" 
              v-model="endTime"
              :options="endOption"
              placeholder="请选择日期" 
              style="width: 150px">
            </DatePicker>
          </Col>
        </Row>

	  // 限制结束日期不能早于开始日期
      // 开始结束日期限制
      startOption: {
        // 指定开始限制时间
        disabledDate: (date) => {
          let data = this.endTime == '' ? Date.now() : this.endTime
          return date > data
        }
      },
      endOption: {
        // 指定终止日期
        disabledDate: (date) => {
          let data = this.startTime == '' ? '' : this.startTime
          return date < data
          // 这个是设置不能大于当前日期并且不能大于所选的开始时间
          // return date >= Date.now() || date < data  
        }
      },

有一些问题可能没有考虑到，愿和码农们一起探讨，一起进步。新人求关注。

最后，愿大家一起进步，朝着高薪出发，。