修改iview中的日期组件

日期组件如下： 

/*
组件中的属性有  
type，value,placeholder,placement,options,width 属性值和iview中相对应的
方法有 onChange, onClear, onOk


*/



<template>
 <div>
  <DatePicker
   :open="open"
   :options="options"
   :value="value"
   confirm
   :type="type"
   :placement="placement"
   :placeholder="placeholder"
   @on-change="handleChange"
   @on-clear="handleClear"
   @on-ok="handleOk">
   <a href="javascript:void(0)" @click="handleClick">
    <Icon type="ios-calendar-outline"></Icon>
    <template v-if="value === ''||value===null||value[0]===''||value.length===0">{{placeholder}}</template>
    <template v-else-if="typeof value !== 'string'">{{ value[0] }}至{{value[1]}}</template>
    <template v-else>{{ value }}</template>
    <Icon type="md-arrow-dropdown" />
   </a>
  </DatePicker>
 </div>
</template>
<script>
 export default {
   data () {
     return {
       open: false
     }
   },
   props: {
     value: {
       type: [Array, String],
       default: ''
     },
     placeholder: {
       type: String,
       default: '请选择日期'
     },
     type: {
       type: String,
       default: 'date'
     },
     width: {
       type: Number,
       default: 200
     },
     options: {
       type: Object
     },
     placement: {
       type: String,
       default: 'bottom-start'
     }
   },
   watch: {
     value (val) {
       console.log(val)
     }
   },
   methods: {
     handleClick () {
       this.open = !this.open
     },
     handleChange (date) {
       this.$emit('onChange', date)
    // this.value = date
     },
     handleClear () {
       this.open = false
       this.$emit('onClear', '')
     },
     handleOk () {
       this.open = false
       this.$emit('onOk', this.value)
     }
   }
 }
</script>
<style lang="stylus">
 .ivu-date-picker
   padding 0 16px
 .ivu-icon-ios-calendar-outline:before
  content:''
 .ivu-date-picker-rel
  a
   color #8590a6
</style>

 

使用举例

1、import dropdatePicker from '@/components/DropDatePicker'

2、注册使用：

components: {
  dropdatePicker
}

3、使用

<dropdate-picker
     :value="nextContactTimeShow"
     type="daterange"
     placeholder="下次联系时间"
     @onChange="nextContactTimeChange"
     @onClear="ContactTimeSearch('next', 'CLEAR')"
     @onOk="ContactTimeSearch('next', 'SEARCH')"
     :options="optionsNextTime"
     placement="left-start"
    ></dropdate-picker>

 效果如图所示：