请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

AESP: uni-app 酒店日期选择插件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

AESP

开源软件地址:

https://gitee.com/TOM-EX/AESP

开源软件介绍:


uni-app-date-picker

uni-app 酒店日期选择插件

功能基本参照美团APP来实现的,期间因uniapp框架限制,判断代码只能长串写在标签上,导致元素也增了许多,性能和操控受影响,因而将滑动固定月份标题功能砍掉了,后续再考虑加入。

说明:目前支持APP、微信小程序和H5平台。其他平台未测试,理论支持

大更新:新增支持无界面、纯弹窗模式。
代码如:

html<calendar :modal="true" :show="showCaledar"></calendar>

使用方式:modal设为true,通过属性show来控制显示/隐藏

部分代码来源于:https://github.com/zrxisme/date-for-wx

反馈问题请描述所使用的平台和重现步骤,谢谢~~


回调函数示例:

<!-- 组件模式(有界面)  --><calendar @change="change"></calendar>      <!-- 弹窗模式(无界面) --><calendar @change="change2" :modal="true" :show="showCaledar"></calendar><text class="text-center dateStr">{{ dateStr }}</text><button class="btn" @tap="showCaledar = !showCaledar">显示/隐藏</button>
export default {	data() {		return {			showCaledar: false,			dateStr: ''		};	},	components: {		calendar	},	methods: {		change({ choiceDate, dayCount }) {			//参数解释			//1.choiceDate 时间区间(开始时间和结束时间)			//2.dayCount 共多少晚			console.log(choiceDate, dayCount);			console.log('入住从 ' + choiceDate[0].re + '' + choiceDate[1].re + '' + dayCount + '');		},		change2({ choiceDate, dayCount }) {			this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '' + dayCount + '';		}	}}

参数示例:

属性名类型默认值说明
modalBooleanfalse是否为弹窗模式,默认为false
showBooleanfalse是否显示弹窗(与modal一起使用),默认为false
singleDateBooleanfalse表示是否只选择一个日期,默认为false
startDateString今天开始时间,默认为今天
endDateString明天开始时间,默认为明天
daysCountString150天显示的天数范围: 60 < x < 360(从今天算起)
changeEventHandle选择日期后的回调事件,event.detail = {choiceDate: value1,dayCount:value2}

效果图:

效果图

TODO

  • 选中的日期可能会被挡掉
  • 语种
  • nvue版本
  • 历史时间选择(优先级低)

弹窗模式上,不能根据show变量来显示/隐藏


更新历史说明:

v1.0.19(20200110)

  • 增加法定节假日和补班的显示,替换之前的假日显示,更符合国情
  • 优化dayCount为从今天开始算起

v1.0.18(20191107)

  • 修复单个日期显示错误
  • 修复app平台上弹窗模式,没有完成按钮

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap