微信小程序日历插件

2022-12-15

在小程序后台,设置->第三方设置->插件管理->添加插件,我使用了 “天天预约日历”

小程序中样式如下:

在输入框中点击,如下:

wxml代码:

<input type="text" name="date" value='{{date}}' maxlength="20" placeholder="请输入日期时间" placeholder-style="color:#c9c9c9;" bindfocus = "getdate"/>
<yycalendar
title="{{title}}"
show = '{{isShow}}'
themeColor="{{themeColor}}"
monthCount="{{monthCount}}"
calendarType="{{calendarType}}"
beginTime="{{beginTime}}"
endTime="{{endTime}}"
timeGap="{{timeGap}}"
days="{{days}}"
confirmBtnColor="{{confirmBtnColor}}"
bind:yybindchange="_yybindchange"
bind:yybindhide="_yybindhide"
/>
<input type="text" name="date" value='{{date}}' maxlength="20" placeholder="请输入日期时间" placeholder-style="color:#c9c9c9;" bindfocus = "getdate"/> <yycalendar title="{{title}}" show = '{{isShow}}' themeColor="{{themeColor}}" monthCount="{{monthCount}}" calendarType="{{calendarType}}" beginTime="{{beginTime}}" endTime="{{endTime}}" timeGap="{{timeGap}}" days="{{days}}" confirmBtnColor="{{confirmBtnColor}}" bind:yybindchange="_yybindchange" bind:yybindhide="_yybindhide" />
 <input type="text" name="date" value='{{date}}' maxlength="20" placeholder="请输入日期时间" 	placeholder-style="color:#c9c9c9;" 	bindfocus = "getdate"/>
        <yycalendar
            title="{{title}}"
            show = '{{isShow}}'
            themeColor="{{themeColor}}" 
            monthCount="{{monthCount}}"
            calendarType="{{calendarType}}"
            beginTime="{{beginTime}}" 
            endTime="{{endTime}}" 
            timeGap="{{timeGap}}" 
            days="{{days}}"
            confirmBtnColor="{{confirmBtnColor}}"
            bind:yybindchange="_yybindchange" 
            bind:yybindhide="_yybindhide"
        />

js代码:

getdate:function(){
this.setData({
isShow:true,
themeColor:'#3c82fc',
monthCount:1,
calendarType:"yytime",
beginTime: '8:00',
endTime: '22:00',
timeGap: 60,
days:0,
confirmBtnColor:'#fff',
title:"选择预约日期时间"
})
},
_yybindchange: function (e) {
var data = e.detail
this.setData({
date:data.date
})
},
_yybindhide: function () {
console.log('隐藏')
},
getdate:function(){ this.setData({ isShow:true, themeColor:'#3c82fc', monthCount:1, calendarType:"yytime", beginTime: '8:00', endTime: '22:00', timeGap: 60, days:0, confirmBtnColor:'#fff', title:"选择预约日期时间" }) }, _yybindchange: function (e) { var data = e.detail this.setData({ date:data.date }) }, _yybindhide: function () { console.log('隐藏') },
    getdate:function(){
        this.setData({
            isShow:true,
            themeColor:'#3c82fc',
            monthCount:1,
            calendarType:"yytime",
            beginTime: '8:00',
            endTime: '22:00',
            timeGap: 60,
            days:0,
            confirmBtnColor:'#fff',
            title:"选择预约日期时间"
        })
    },
    _yybindchange: function (e) {
        var data = e.detail
        this.setData({
            date:data.date
        })
      },

      _yybindhide: function () {
        console.log('隐藏')
      },

其他使用参见天天预约日历开发文档

相关内容
最新

坚持的力量

wordpress建站,视频剪辑拍摄,动画制作