更新记录

0.0.1（2021-04-28）

1

平台兼容性

日期区间选择器 DatePicker

介绍

一款高颜值的日期区间选择器，提供自定义颜色、文案等。 该插件采用scss编译，如遇到样式/层级问题可以到源码修改。 如果对您有帮助，可以评论或赞赏一下，谢谢！

属性说明

format

示例：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>