uni-app日期选择器

这篇具有很好参考价值的文章主要介绍了uni-app日期选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写个简单的日期选择器,还没搞样式,所以有点丑

大概长这样吧

uni-app日期选择器,腾讯-智慧养殖-前端组,uni-app,vue.js

首先是这个picker选择器,mode选择日期,end是写一个范围前日期,:end就是这个日期是动态变化的,还有change函数

<template>
	<view>
		<view>发生时间</view>
		<picker mode="date" :end="endDate"@change="bindDateChange">
			<view>{{date}}</view>
		</picker>

	</view>
</template>

然后是脚本,就默认显示当前日期,设计最后范围日期为今日日期,再有一个事件函数文章来源地址https://www.toymoban.com/news/detail-651359.html

<script>
	export default {
		data() {
			return {
				date: this.getDate()
			}
		},
		computed:{
			endDate(){
				return this.getDate();
			}
		},
		methods: {
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value;
			}
		}
	}
</script>

到了这里,关于uni-app日期选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【备忘录】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日
    浏览(64)
  • uni-app根据腾讯地图接口三级联动组件

    有时候很懵逼,因为需要用到腾讯地图接口的三级联动,习惯问问度娘,结果出来了我几年前用JQ写的,好吧,还是自己撸一个现在用的吧 组件使用得是uni-popup弹窗,picker-view 滑动选择地址 访问腾讯地图接口使用的是 vue-jsonp  在main.js引入 组件address.vue 组件只需要填写你自

    2024年01月20日
    浏览(59)
  • uni-app 小程序使用腾讯地图完成搜索功能

    前言 使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下。 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用。 由于uni-app内置地图就是腾讯,所以获取位置的api,uni.getLocation坐标不用转换,直接使用。

    2024年02月08日
    浏览(64)
  • uni-app优雅的实现时间戳转换日期格式

    现在显示的格式如下图: 我期望统一格式,所以不妨前端处理一下,核心代码如下 使用方法如下: 代码结构如下:

    2024年02月16日
    浏览(47)
  • Uni-app 小程序使用腾讯云IM实时通讯

    // IM 小程序 SDK npm install tim-wx-sdk --save // 发送图片、文件等消息需要的 COS SDK  如果不需要发送图片等文件不需要下载 在APP.vue中配置好你的腾讯云配置 我测试了一下如果直接引入:import TIM from \\\'tim-wx-sdk\\\'的话在添加好友的地方会有错误 所以我找到了这种引入方式 :import TIM

    2024年02月15日
    浏览(58)
  • uni-app 小程序使用什么地图好(百度,高德,腾讯)

    前言 在开发小程序的时候我们会发现经常需要地图的使用,但是市面上主流的地图有腾讯,高德,百度。哪个好了 其实在我看来这个3地图没有好坏之分,各有所长。只是说哪个地图写小程序更加轻便,更加低耦合。 后面我把他们都试了一下发现,他们的使用方式都差不多,

    2024年02月09日
    浏览(90)
  • 使用 uni-app 开发项目,日期和时间如何格式化?

    功能需求描述 在开发项目时,往往需要对从后端查询到的时间进行格式化,查到的时间格式一般都是 时间戳 ,一堆数字,这时候怎么转化成类似于  2023年8月15日 08:12:10  这样的格式? 在组件显示格式化后的日期 其实 uni-app 的官方拓展组件  uni-dateformat  就能实现这个需求

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

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

    2024年01月18日
    浏览(54)
  • uni-app开发小程序使用uni.chooseMedia选择图片,安卓手机无法选择图片

    一、在小程序中,选择图片并上传,是一个很常见的功能; 二、最近在开发中,使用 uni.chooseMedia 来做选择图片功能时,苹果手机是正常的,安卓手机打不开!!!代码如下: 就这点屁代码,苹果手机可以正常打开选择图片的功能,安卓手机没法打开!!! !!!! 我百思

    2024年02月16日
    浏览(46)
  • uni-app-使用tkiTree组件实现树形结构选择

    前言 在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况 往往需要把这个树结构当成条件来查询数据,在PC端可以使用Tree,table,Treeselect等组件展示 在uni-app的内置组件中似乎没有提供这样组件来展示,但是是有第三方包tkiTree组件来解决这个

    2024年02月14日
    浏览(72)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包