Vue 日期控制的改造（只能选择年月）

最新推荐文章于 2024-08-09 07:46:44 发布

蔚蓝色天空sky

最新推荐文章于 2024-08-09 07:46:44 发布

阅读量2w

点赞数 4

分类专栏： vue 文章标签： Vue 只选年月日期控件 Vue 日期控件只选年月

本文链接：https://blog.csdn.net/ytangdigl/article/details/78988067

版权

在Vue移动端项目中，作者发现缺少只选择年月的日期控件，因此对datepicker.vue进行了改造，实现了只显示年月的选择功能。改造后的效果良好，并推荐了另一个日期控件vue-datepicker-local，提供了示例演示链接。

摘要由CSDN通过智能技术生成

1、前言
学习Vue已经有很长一段时间了，也刚刚完成了一个Vue移动端项目，后面会陆续将个人在刚刚完成的这个Vue项目中碰到的坑进行汇总，然后以blog的形式分享出来。
2、vue的日期控制，第三方有很多，但只有年月选择的就很少，我在网上找，就没找到，然后自已就动改直接改造了，改造后的效果如下：
这里写图片描述

3、我选择的第三方控件是datepicker.vue

<template>
    <div class="vue-datepicker">
        <input @click.stop="selectYear=!selectYear" :value="current | dateFormat" type="text" readonly>
        <div v-if="selectYear" class="vue-datepicker-wrap">
            <div class="vue-datepicker-header" @click.stop="">
                <span @click.stop="switchMonth(-1)" class="vue-datepicker-header-btn vue-datepicker-header-btn-pre">&lt;</span>
                <span @click.stop="selectYear=!selectYear"
                     class="vue-datepicker-header-btn vue-datepicker-header-btn-day">
                    {
   {
   select.year}} 年 {
   {
   select.month}} 月
                </span>
                <span @click.stop="switchMonth(1)" class="vue-datepicker-header-btn vue-datepicker-header-btn-next">&gt;</span>
            </div>
            <div class="vue-datepicker-content">
                <table>
                    <thead>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </thead>
                    <tbody>
                        <tr v-for="week of list">
                            <!--<td v-for="weekday of week" @click="pick(weekday)"-->
                            <td v-for="weekday of week"
                                :class="{
                                    'flag': weekday.flag,
                                    'active': !weekday.flag && weekday.text == current.date
                                         && select.month == current.month && select.year == current.year}">
                                {
   {
   weekday.text}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div v-if="selectYear" class="vue-date-picker-year-panel">
                    <ul ref="year">
                        <li v-for="y of years" @click.stop="pickYear(y)" :class="{'active': y == select.year}">{
   {
   y}}</li>
                    </ul>
                    <ul ref="month">
                        <li v-for="(m, $index) of months"
                            @