日期选择器的赋值与取值
效果
实现方式
如图所示日期选择框的实现代码如下所示
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: "-07-01", status: "WORK"},{scheduleDate: "-07-02", status: "WORK"},{scheduleDate: "-07-03", status: "REST"},{scheduleDate: "-07-04", status: "REST"},{scheduleDate: "-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 || []}}}
