标签：DatePicker status vue 07 scheduleDate ant moment 2021 taskStartAt

日期选择器的赋值与取值

效果

实现方式

如图所示日期选择框的实现代码如下所示
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 || []
    }
  }
}

标签：DatePicker,status,vue,07,scheduleDate,ant,moment,2021,taskStartAt
来源： https://blog.csdn.net/nienianzhi1744/article/details/118486904

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。