【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例(完整代码+图文)

这篇具有很好参考价值的文章主要介绍了【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例(完整代码+图文)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、获取日期(基础)

uniapp日历可选日期,27.【uni-app】,uni-app,javascript,前端

<template>
	<view class="container">
		<picker mode="date" @change="onDateChange" :value="date">
			<view class="date-picker">{{date}}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '请选择日期'
			}
		},
		methods: {
			onDateChange: function(e) {
				this.date = e.detail.value;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.date-picker {
		line-height: 80rpx;
		border: 1px solid #ccc;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
	}
</style>

二、获取日期和时间(改进)

uniapp日历可选日期,27.【uni-app】,uni-app,javascript,前端

 文章来源地址https://www.toymoban.com/news/detail-516463.html

<template>
	<view>
			<!--日期选择-->
			<view class="SelectDate">
				<view class="DateLabel">
					预定日期
				</view>
				<view class="DateText">
					<picker mode="date" @change="onDateChange" :value="DateValue">
						<view class="date-picker">{{DateValue}}</view>
					</picker>
				</view>
			</view>

			<view class="SelectTime">
				<view class="TimeLabel">
					预定时间
				</view>
				<view class="TimeText">
					<picker mode="time" @change="onTimeChange" :value="TimeValue">
						<view class="Time-picker">{{TimeValue}}</view>
					</picker>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DateValue: "点击选择日期",
				TimeValue: "点击选择时间",
			}
		},
		methods: {
			
			onDateChange: function(e) {
				this.DateValue = e.detail.value;
			},

			onTimeChange: function(e) {
				this.TimeValue = e.detail.value;
			},
			}
	}
</script>

<style scoped>

	/* ## 日期 ## */

	.SelectDate {
		height: 40px;
		wdith: 100%;
		display: flex;
		flex-direction: grow;
		/* background-color: red; */
	}

	.DateLabel {
		width: 0;
		flex-grow: 3;
		background-color: #eaeaea;
		line-height: 40px;
		text-align: left;
		padding-left: 40px;
		border: 1px solid #f3f3f3;
	}

	.DateText {
		width: 0;
		flex-grow: 7;
	}

	.date-picker {
		background-color: aquamarine;
		height: 40px;
		line-height: 25px;
		width: 100%;

		border: 1px solid #f3f3f3;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
		color: #8f8f8f;
	}

	/* ## 时间 ## */

	.SelectTime {
		height: 40px;
		wdith: 100%;
		margin-top: 10px;
		display: flex;
		flex-direction: grow;
		/* background-color: red; */
	}

	.TimeLabel {
		width: 0;
		flex-grow: 3;
		background-color: #eaeaea;
		line-height: 40px;
		text-align: left;
		padding-left: 40px;
		border: 1px solid #f3f3f3;
	}

	.TimeText {
		width: 0;
		flex-grow: 7;
	}

	.Time-picker {
		background-color: aquamarine;
		height: 40px;
		line-height: 25px;
		width: 100%;
		border: 1px solid #f3f3f3;
		padding: 10rpx;
		text-align: center;
		background-color: #fff;
		color: #8f8f8f;
	}
</style>

到了这里,关于【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例(完整代码+图文)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 使用v-model封装picker组件和自定义样式

    1、v-model封装picker组件 (1)封装组件myPicker.vue (2)组件调用 (3)属性说明 属性名 类型 默认值 说明 options Object 数据选项,默认[{ name: \\\"办公\\\", value: \\\"1\\\" }]格式 rangeKey String label 数据选项的属性名 rangeValue String value 数据选项的属性值 placeholoder String 请选择 未选择数据时的默认

    2024年02月09日
    浏览(53)
  • uni-app 解决钉钉小程序日期组件uni-datetime-picker不兼容ios问题

    最近在使用uni-app开发 钉钉小程序 ,遇到一个ios的兼容性问题 uni-datetime-picker 组件在模拟器上可以使用,在真机上不生效问题 就是自定义一个 view 然后通过click事件触发dd.datePicker。 在优化一下自定义的日期组件的样式 样式跟uni-ui的 uni-datetime-picker 组件样式一样。

    2024年02月03日
    浏览(71)
  • uni-app基础详解(组件、弹窗、数据缓存、页面跳转)

    uni-app组件 scroll-view 回到顶部 swiper text 文本 属性 说明 selectable 是否选中 decode 解码 例如: lt; , gt; 等 space 是否显示空格 space的参数值 参数 说明 emsp 中文字符空格大小 ensp 中文字符空格一半大小 nbsp 根据字体设置的空格大小 button 按钮 input 输入框 属性名 类型 默认值 说明

    2024年01月18日
    浏览(44)
  • 【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

    官方帮助文档:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 进行一些简单的配置 Uniapp提供的位置相关的服务: https://uniapp.dcloud.net.cn/api/location/location.html UniApp提供的地图组件 https://uniapp.dcloud.net.cn/component/map.html 文档针对微信小程序进行设置,其他端使用这些组件还需要参

    2023年04月26日
    浏览(63)
  • uni-app下拉框 可实现输入下拉框 搜索+选择组合框功能

    插件示例地址

    2024年02月11日
    浏览(54)
  • uni-app小程序父组件数据更新,实现自定义组件刷新视图

    之前错误的思路 新思路(忽略我的参数命名,写文章的时候方便。)

    2024年02月16日
    浏览(50)
  • 微信小程序uni-app uni-date-picker中的maskClick无效解决方法

    前段时间做小程序 我在调用uni-date-picker组件时候需要@maskClick方法  谁知道竟然无效,上网一查,看到也有其他小伙伴反应类似的问题,我就看了看源码,最终调成功了,记录一下,防止自己忘记。 ps:如果能帮助到大家,那就更开心了。 话不多说,进入正题: 调用uni-dateti

    2024年02月14日
    浏览(45)
  • uni-app 微信小程序中如何通过 canvas 画布实现电子签名?

    一、实际应用场景 电子签名软件应用场景:电子签名在金融、银行、贷款行业中可以用于对内日常办公流转的文档的盖章签字,对外涉及业务合作协议,采购合同,贷款申请、信用评估、贷款合同、贷款文件表、说明函等等。 可以说,只要是涉及纸质文档签字盖章的场景,

    2024年02月10日
    浏览(54)
  • uni-app日期选择器

    写个简单的日期选择器,还没搞样式,所以有点丑 大概长这样吧 首先是这个picker选择器,mode选择日期,end是写一个范围前日期,:end就是这个日期是动态变化的,还有change函数 然后是脚本,就默认显示当前日期,设计最后范围日期为今日日期,再有一个事件函数

    2024年02月12日
    浏览(45)
  • uni-app/vue封装车牌选择器

    先看下效果如下: 代码如下: 父组件: 子组件:(代码较长,css部分没有提供)

    2024年01月18日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包