前端——》ant-design-vue组件的使用之四（DatePicker 日期选择框和Calendar日历的使用）

日期选择器的赋值与取值

效果

实现方式

如图所示日期选择框的实现代码如下所示
html代码如下：

<a-date-picker v-model="form.taskStartAt" :format="dateFormat"  style="width: 100%" />

js代码如下

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
	data () {
    return {
      form: {
          taskStartAt: null
      }
    }
  },
  methods: {
  	async init (record) {
  		// ...
  		// 赋值
  		this.form.taskStartAt = moment(record.taskStartAt, 'YYYY-MM-DD')
  	},
  	submit () {
		//取值
		const taskStartAt = this.form.taskStartAt.format('YYYY-MM-DD')
	}
  }
}

日历的实现

效果

实现方式

html

<a-calendar>
   <ul slot="dateCellRender" slot-scope="value" class="events">
     <li v-for="item in getListData(value)" :key="item.date">
       <template v-if="item != null&&item.status === 'WORK'">
          <span>
             <a-tag color="green">上班</a-tag>
          </span>
       </template>
       <template v-if="item != null&&item.status === 'REST'">
          <span>
             <a-tag color="red">休息</a-tag>
          </span>
       </template>
     </li>
   </ul>
</a-calendar>

js

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
  data () {
	   return {
	     calendarDataList: []
	   }
  },
  methods: {
  	async init () {
  		// 以下的值是模拟的，真实的值可以从后台取
		const scheduleList = [
		  {scheduleDate: "2021-07-01", status: "WORK"},
		  {scheduleDate: "2021-07-02", status: "WORK"},
		  {scheduleDate: "2021-07-03", status: "REST"},
		  {scheduleDate: "2021-07-04", status: "REST"},
		  {scheduleDate: "2021-07-05", status: "WORK"}
		]
        this.calendarDataList = scheduleList
      })
	},
	getListData (value) {
        const listData = []
        this.calendarDataList.forEach(node => {
            if (node.date === value.format('YYYY-MM-DD')) {
                listData.push(node)
            }
        })
        return listData || []
    }
  }
}