在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:uni-app日期时间选择器开源软件地址:https://gitee.com/nullfeng/uniapp_date_and_time_selector开源软件介绍:日期时间选择器 DatePicker介绍一款高颜值、多场景的日期时间选择器,提供自定义颜色/格式/文案等。 属性说明
format
示例:yyyy/mm/dd hh:ii:ss => 2019/03/26 23:39:59 ConfirmObject{ value: ..., //当前选择的值(String/Array) date: ..., //当前所选值的原始Date对象} 使用示例<template> <view> <view class="test"> <view>日期选择 - 示例</view> {{date}} <button type="primary" @click="onShowDatePicker('date')">选择日期</button> {{time}} <button type="primary" @click="onShowDatePicker('time')">选择时间</button> {{datetime}} <button type="primary" @click="onShowDatePicker('datetime')">选择日期时间</button> {{range[0]}} - {{range[1]}} <button type="primary" @click="onShowDatePicker('range')">选择日期范围</button> {{rangetime[0]}} - {{rangetime[1]}} <button type="primary" @click="onShowDatePicker('rangetime')">选择日期时间范围</button> </view> <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" /> </view></template><script> import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"; export default { components: { MxDatePicker }, data() { return { showPicker: false, date: '2019/01/01', time: '15:00:12', datetime: '2019/01/01 15:00:12', range: ['2019/01/01','2019/01/06'], rangetime: ['2019/01/08 14:00','2019/01/16 13:59'], type: 'rangetime', value: '' } }, methods: { onShowDatePicker(type){//显示 this.type = type; this.showPicker = true; this.value = this[type]; }, onSelected(e) {//选择 this.showPicker = false; if(e) { this[this.type] = e.value; //选择的值 console.log('value => '+ e.value); //原始的Date对象 console.log('date => ' + e.date); } } } }</script><style> .test{ text-align: center; padding: 10px 0; } button{ margin: 20upx; font-size: 28upx; }</style> 动画演示特别说明测试的可能不是很全面,如果有BUG或者更好的建议请在评论区反馈,谢谢支持! 更新日志v2.1.0
v2.0.0
v1.0.3
v1.0.1
v1.0.0
v0.0.7
|
请发表评论