更新记录
0.0.3(2021-04-19)
下载此版本
第二版
0.0.2(2021-02-07)
下载此版本
首次上传
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
日期区间选择器 DatePicker
介绍
一款高颜值的日期区间选择器,提供自定义颜色、文案等。
该插件采用scss编译,如遇到样式/层级问题可以到源码修改。 如果对您有帮助,可以评论或赞赏一下,谢谢!
属性说明
属性 |
类型 |
默认值 |
说明 |
show |
Boolean |
false |
是否显示选择器 |
beforeDateDisable |
Boolean |
false |
今日之前日期是否置灰和不可点击 |
monthNum |
Number |
6 |
显示未来几个月的日历 |
color |
String |
rgb(230,86,86) |
选择控件的颜色 |
value |
String, Array |
无 |
设置选中日期的区间值,格式为标准的日期格式,设置value那么将会从value起始的年月开始展示日历,再根据monthNum展示后几个月的日历,如果为空则展示当前月,示例:yyyy/mm/dd或者yyyy-mm-dd |
showTips |
Boolean |
false |
是否显示提示文字 |
beginText |
String |
开始 |
开始日期提示文字 |
endText |
String |
结束 |
结束日期提示文字 |
[@confirm] () |
无 |
无 |
确认选择事件,返回选中的日期区间值 |
[@cancel] () |
无 |
无 |
取消选择事件,返回false |
format |
String |
yyyy/mm/dd |
返回日期格式,参考下方格式说明 |
format
格式 |
说明 |
y |
年 |
m |
月 |
d |
日 |
h |
时 |
i |
分 |
s |
秒 |
示例:yyyy/mm/dd hh:ii:ss => 2021/02/06 18:00
使用示例
<template>
<view class="content">
<view class="content">
<view>日期区间选择 - 示例</view>
{{date||'请选择'}}
<button type="primary" @click="onShowDatePicker()">选择日期</button>
</view>
<tn-date-picker :beforeDateDisable="false" color="rgb(230,86,86)" :show="showPicker" :format="'yyyy-mm-dd'" :monthNum="6" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" @confirm="ed" @cancel="ed" />
</view>
</template>
<script>
import TnDatePicker from "@/components/tn-datepicker/tn-datepicker.vue";
export default {
components: {
TnDatePicker,
},
data() {
return {
showPicker: false,
date: '',
value: ['2018/01/01','2018/01/06'],
}
},
methods: {
onShowDatePicker(){//显示
this.showPicker = true;
},
ed(e) {//选择
this.showPicker = false;
if(e) {
this.date = e.value;
//选择的值
console.log('value => '+ e.value);
//原始的Date对象
console.log('date => ' + e.date);
}
}
}
}
</script>
<style>
.content{
text-align: center;
padding: 10px 0;
}
button{
margin: 20upx;
font-size: 28upx;
}
</style>