15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 uinapp

uniapp日期时间组件

王少铮| 发布于 2021-10-09 10:28:55| 525阅读| 1点赞| 0评论
举报

一款非常好用且美观的uniapp选择年月日时分秒的组件

文档地址:https://ext.dcloud.net.cn/plugin?id=112

示例:

<template>
	    <view>
	        <view class="test">
	            <view>日期选择 - 示例</view>
	            {{date}}
	            <button type="primary" @click="DatePicker('date')">选择日期</button>
	            {{time}}
	            <button type="primary" @click="DatePicker('time')">选择时间</button>
	            {{datetime}}
	            <button type="primary" @click="DatePicker('datetime')">选择日期时间</button>
	            {{range[0]}} - {{range[1]}}
	            <button type="primary" @click="DatePicker('range')">选择日期范围</button>
	            {{rangetime[0]}} - {{rangetime[1]}}
	            <button type="primary" @click="DatePicker('rangetime')">选择日期时间范围</button>
	        </view>
	        <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" ></mx>
	    </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: {
	            DatePicker(type){//显示
	                this.type = type;
	                this.showPicker = true;
	                this.value = this[type];
	            },
	            ed(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>


比如只需要使用日期时间功能
修改之后
template部分
	<view class="cont2-3" @click="DatePicker('datetime')">

	</view>
	//此标签一定要放在点击事件的外面,不然会无法关闭组件
	<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true" @confirm="ed" @cancel="ed" ></mx>

js部分
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
    export default {
        components: {
            MxDatePicker
        },
        data():{
        	return {
				showPicker: false,
			    datetime: new Date().toISOString().slice(0, 10) + ' 00:00:00', //此变量是显示和最终需要传递的值,也可以使用下方的value存结果
			    type: 'rangetime',
			    value: ''
        	}
        },


		method:{
			DatePicker(type){//显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) {//选择
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					//选择的值
					console.log('value => '+ e.value);
					//将值赋给显示的变量
					this.datetime = e.value;
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
		}
1

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王少铮
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部