vue的日历插件vue-hash-calendar

雨点打透心脏的1/2处 2022-11-18 13:47 954阅读 0赞

**效果图：**

![calendar.gif][]

vue-hash-calendar的github地址

[https://github.com/TangSY/vue-hash-calendar][https_github.com_TangSY_vue-hash-calendar]

**cdn方式引入：**

js CDN：https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.umd.min.js
    css CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.css
    
    version可以是1.3.2

** 使用：**

<input type="text" v-model="appointmentdate" @click="timeshow"/><img class="icon2" src="http://imagesouth.xxlimageim.com/GM/icon2.png" @click="timeshow"/>
    
        <vue-hash-calendar
    
        @confirm="calendarconfirm" 
    
        :visible.sync="isShowCalendar" 
    
        :default-datetime="defaultTime"
    
        model="dialog" 
    
        format="MM DD,YY"
    
        picker-type="date"
    
        :min-date="minDate"
    
        :max-date="maxDate"
    
        :disabled-date="disabledDate"
        >
    
    </div>

**js部分： **

new Vue({
    
            el: "#appointment",
    
            components: {},
    
            data: {
              defaultTime: new Date(),
              appointmentdate:"2021年    05月    18日",//回显上次选中预约日期
              isShowCalendar:false,
              disDate:[],//禁止日期
              minDate:new Date(),
              maxDate:new Date('2022-12-31'),设置日历最大日期
            },
    
            computed:{
    
            },
    
            created() {
              var that = this;  
              let disDate = ["2021-03-28", "2021-04-25", "2021-03-29"];//设置不可用日期
              this.disDate = disDate.reduce((coll,item)=>{coll[item]=1;return coll;},{});
    
              if(that.appointmentdate){//把文本日期 转换成date日期对象
                let timestr=that.appointmentdate.replace(/年\s+/,":").replace(/月\s+/,":").replace(/日/,"").split(":");            
                console.info("timestr",timestr)
                this.defaultTime=new Date(timestr[0],parseInt(timestr[1])-1,timestr[2],0);
    
                console.info("this.defaultTime",this.defaultTime);
    
              }
    
            },
    
            methods: {
    
            //禁用日期
    
            disabledDate(date){
    
              //console.info("disabledDate",date)
    
              var year  = date.getFullYear(); 
    
              var month  =("0"+(date.getMonth()+1)).slice(-2); 
    
              var day   = ("0"+date.getDate()).slice(-2);
    
              return 1==this.disDate[year+"-"+month+"-"+day];
    
            },
            timeshow(){
    
              this.isShowCalendar=true;
    
            },
    
            calendarconfirm(res){
              console.info("日历确认",res)
    
              let all =  res.split(" ");
              
    
              let monthAndDay = all[1].split(",");
    
              this.appointmentdate = monthAndDay[1]+'年    '+all[0]+'月    '+monthAndDay[0]+'日';
    
              console.info("this.appointmentdate",this.appointmentdate)
    
            },
            }
    
          })

[calendar.gif]: /images/20221022/65a3a180ffcd4044ae562f5c85260e9e.png
[https_github.com_TangSY_vue-hash-calendar]: https://github.com/TangSY/vue-hash-calendar