vue 时间组件

image.png

今天在自己写时间组件时遇见的问题
1 如何设置时间

var d2 = new Date(2008, 10 - 1, 1);
     console.log(d2.toLocaleString() + "<br>");
      2008/10/1 上午12:00:00<br>

2正则的运用

input_str.split(/[\s\n]/)

let reg =/[\u4e00-\u9fa5]/g;
    let comm=alldatas
    let tm=comm.split(reg)

3 原文代码

<template>
       <div>
            <div id="data">
                <p>
                    <span id="prevnain" @click="prevnain">上一年</span>
                    <span id="prev" @click="prev">上一月</span>
                    <span id="nian">{{nian}}年{{arr[yue]}}{{tian}}日</span>
                    <span id="next" @click="next">下一月</span>
                    <span id="nextnian" @click="nextnian">下一年</span>
                </p>
                <ul id="title">
                    <li>日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                </ul>
                <ul id="date" :title="mom.length">
                        <li 
                            v-for="(idata,ind) in mom" :key="ind" :title="idata"
                            :class="[onebtn(idata,ind)]"
                            @click="clickdate(idata,ind)"
                        >{{oneclass(idata,ind)}}</li>
                </ul>
            </div>
                
         </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'

export default {
    name:"datas",
    props:{
          alldatas:{
                type: String,
                default: ""
            }
    },
    data(){
        return{
            dat:"",
            nianD:"",
            tian:"",
            yueD:"",
            tianD:"",
            nian:"",
            yue:"",
            textdom:"",
            mom:[],
            ends:[],
            star:[],
            arr:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
        }
    },
    created () {
    
    },
    mounted() {
        //添加数据
        this.alldatas&&this.judges(this.alldatas)
        //初始化时间
        this.Initialization(this.alldatas)
        this.add()
    },
    methods: {
        add() {
                var nian = this.dat.getFullYear();//当前年份
                var yue = this.dat.getMonth(); //当前月
                var tian = this.dat.getDate(); //当前天
                        this.nian=nian,
                        this.yue=yue,
                        this.tian=tian
                //把时间设为下个月的1号 然后天数减去1 就可以得到 当前月的最后一天; ${setDat}+"最后一天"+
                var setDat = new Date(nian,yue + 1,1 - 1); 
                var setTian = setDat.getDate(); //获取 当前月最后一天
                var setZhou = new Date(nian,yue,1).getDay(); //获取当前月第一天 是 周几
                console.log(setDat,setTian,setZhou)
                this.textdom=`${setTian}+"最后一天"+${setZhou}+"周几"`
                let sque=[];//渲染空白 与 星期 对应上
                for(var i=0;i<setZhou ;i++){sque.push(i)}
                this.ends=sque
                let sall=[];//利用获取到的当月最后一天 把  前边的 天数 都循环 出来
                for(var i=1;i<=setTian;i++){sall.push(i)}
                this.star=sall
                this.mom=[...sque,...sall]
        },
        prev(){
            this.dat.setMonth(this.dat.getMonth() - 1); //当点击下一个月时 对当前月进行加1;
            this.add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;
        },
        next(){
            this.dat.setMonth(this.dat.getMonth() + 1); //当点击下一个月时 对当前月进行加1;
            this.add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;
        },
        prevnain(){
            this.dat.setMonth(this.dat.getMonth() - (11+this.yue+1)); //当点击下一个月时 对当前月进行加1;
            let cv=this.dat.setDate(1)
            this.add();  //重新执行渲染 获取去 改变后的  年月日  进行渲染;
        },
        nextnian(){
            this.dat.setMonth(this.dat.getMonth() + (11-this.yue+1)); //当点击下一个月时 对当前月进行加1;
            let cv=this.dat.setDate(1)
            this.add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;
        },
        clickdate(idata,ind){
            let cv=this.dat.setDate(idata)
            this.tianD=idata
            this.yueD =this.yue
            this.add(); //重
            let dom=this.nian+"年"+(this.yue+1)+"月"+this.tian+"日"
            this.$emit('somDate',dom)
        },
        Initialization(){
            this.alldatas?this.dat:(this.dat = new Date())//当前时间
            this.nianD = this.dat.getFullYear(); //当前年份
            this.yueD = this.dat.getMonth(); //当前月
            this.tianD = this.dat.getDate();//当前天    这保存的年月日 是为了 当到达当前日期 有对比
        },
        //判断是否传值
        judges(alldatas){
            let longnian="";
            let longyue="";
            let longri="";
            let reg =/[\u4e00-\u9fa5]/g;
            let tm=alldatas.split(reg)
            tm.pop();
            longnian=tm[0].length==4?tm[0]:1978
            longyue=tm[1].length==2?tm[1]:"0"+tm[1]
            longri=tm[2].length==2?tm[2]:"0"+tm[2]
            this.dat=new Date(longnian,longyue-1,longri)
        },
        oneclass(idata,ind){
            return  (ind>=this.ends.length)?idata:""
        },
        onebtn(idata,ind){
            return  this.nian == this.nianD && this.yue == this.yueD && idata== this.tianD?
             "active":"hover"
        }
    },
    computed:{
    
    },
    watch:{
        
    },
    components:{
        
  }
    
}

</script>

<style  scoped >
    * {
        margin: 0px;
        padding: 0px;
    }
    
    #data {
        width: 280px;
        border: 1px solid #000000;
        margin: 20px auto;
    }
    
    #data>p {
        display: flex;
        color: #fff;
    }
    
    #yue{
        color: #fff;
    }
    
    #data>h5 {
        text-align: center;
    }
    
    #data>p>span {
        display: block;
        height: 30px;
        line-height: 30px;
    }
    
    #prev,
    #next {
        cursor: pointer;
    }
    
    #nian {
        flex: 1;
        text-align: center;
    }
    
    #title {
        overflow: hidden;
        list-style: none;
        background: #ccc;
    }
    
    #title>li {
        float: left;
        width: 40px;
        height: 26px;
        line-height: 26px;
        text-align: center;
    }
    
    #date {
        overflow: hidden;
        list-style: none;
    }
    
    #date>li {
        float: left;
        width: 34px;
        height: 34px;
        margin: 1px 1px;
        border: 2px solid rgba(0, 0, 0, 0);
        line-height: 34px;
        text-align: center;
        cursor: pointer;
    }
    
    #date>.hover:hover {
        border: 2px solid red;
    }
    
    .active {
        color: red;
    }

</style>

参考文章
正则地址
js时间的几种设置方式
原文地址
1 https://www.cnblogs.com/durenlong/p/7754862.html
2https://blog.csdn.net/u011043843/article/details/29435497
3https://blog.csdn.net/lanseyuanwei2/article/details/51956520
4https://blog.csdn.net/LXY_Fighting/article/details/79294237
6纯数字键盘H5文章
https://wuwhs.github.io