Wednesday 25 March 2020

Vue Element dateoptions to filter dates

   
    <template>
        <el-date-picker
        v-model="row.transaction_date"
        type="date"
        style="width:80%;"
        :picker-options="expireTimeOption"
        >
        </el-date-picker>
     </template>

     ....
       computed : {
     /*
     * VUE ELEMEENT picker-options (https://element.eleme.io/#/en-US/component/datetime-picker#datetimepicker)
     */
    expireTimeOption: function () {
        // Current cutoff date PST string
        var current_date = this.cutoff // date from backend
        return  {
            /*
            * Whether to Disable date in the date picker
            * @param DateObject  Date      The date supplied from date picker in PST  Sat May 02 2020 00:00:00 GMT-0700 (Pacific Daylight Time)
            */
            disabledDate(date) {
              // PST
              console.log('Cut off date is ' + current_date)
              if ( ! current_date) {
                return false
              }
              // Make cut off Date into Date()
              var current_cut_off_date = new Date(current_date)
              // Get Today's date
              var today = new Date()
              // Find out last month of current date
              var resulting_date = new Date(current_date) // current date
              resulting_date.setDate(1) // going to 1st of the month
              resulting_date.setHours(-1) // going to last hour before this date even started.
             
              // If Today is less than cutoff date do nothing
              if (today.getTime() <= current_cut_off_date.getTime()) {
                // Allow transaction date to be last month but not the month before that
                // // Find out last month of resulting_date
                var prev_resulting_date = resulting_date // current date
                prev_resulting_date.setDate(1) // going to 1st of the month
                prev_resulting_date.setHours(-1) // going to last hour before this date even started.
                return date.getTime() <= prev_resulting_date.getTime()
              }

              return date.getTime() <= resulting_date.getTime()
            }
        }

      }
  },


Other references :
https://www.cnblogs.com/steamed-twisted-roll/p/9755651.html
  <el-date-picker
    v-model="exCheckDate"
    type="date"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd"
    placeholder="Please select">
  </el-date-picker>

  // js中定义范围
  // picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期,有一个参数是当前选择的日期
  data () {
    return {
      pickerOptions: {}, // 日期设置对象
    }
  },

  created {
   // disabledDate 为true表示不可选,false表示可选
   this.pickerOptions.disabledDate = disabledDate (time) {
      // 设置可选择的日期为今天之后的一个月内
      let curDate = (new Date()).getTime()
      // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
      let day = 30 * 24 * 3600 * 1000
      let dateRegion = curDate + day
      return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion

      // 设置选择的日期小于当前的日期,小于返回true,日期不可选
      // return time.getTime() < Date.now() - 8.64e7
    },
  }

No comments:

Post a Comment