十、uni-app小程序时间戳

已于 2023-04-11 15:55:59 修改
阅读量4.2k 收藏 7
点赞数
分类专栏： # uni-app 文章标签： javascript 微信小程序 小程序 前端
于 2022-07-28 11:57:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Start_Simple/article/details/126030699
版权

目录

1、动态 年-月-日-时-分-秒

请添加图片描述

<template>
	<view class="">
		<view>{
   {
   dateFormat(date)}}</view>
	</view>
</template>

<script>
	export default{
   
		data(){
   		
			return{
   
				date: new Date().toISOString(),	
			}
		},
		onLoad(){
   	
			let _this = this;
			setInterval(function() {
   
			_this.date = Date.parse(new Date());
			}, 1000);
		},
		methods:{
   	
			dateFormat(time) {
   
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
		}
	}
</script>

2、定格时间（自动回显且下拉可选）

			<view class="uni-form-item">
				<view class="title">检测时间</view>
				<view class="input_box">
					<picker mode="multiSelector" @change="changeDateTime"  @columnchange="changeDateTimeColumn" :value="dateTime" :range="dateTimeArray">
						<view class='lableBox'>
							<view class="choose-value">{
   {
   timeStr}}</view>
						</view> 
					</picker>
				</view>
			</view>

<script>
	// 时间戳
	const {
   dateTimePicker,getMonthDay} = require('../../utils/dateTimePicker')
	export default{
   
		data(){
   
			return{
   
				timeStr:'',
				dateTime: null,
				dateTimeArray: null,
			}
		},
		
		onLoad() {
   
			this.initTime();
		},
		
		methods:{
   
			// 时间戳
			initTime(){
   
				let date = new Date();
				let endYear = date.getFullYear();
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				this.dateTimeArray=obj.dateTimeArray
				this.dateTime=obj.dateTime
				this.timeStr= this.createTimeStr(this.dateTimeArray,this.dateTime);
				this.form.testingTime = this.timeStr;
			},
			changeDateTime(e) {
   
			    this.dateTime = e.detail.value;
			    this.timeStr= this.createTimeStr(this.dateTimeArray,this.dateTime);
			    //ios时间不能用'-'解析成时间戳
				this.form.testingTime = this.timeStr;
			 },
			/*年,月切换时重新更新计算*/
			changeDateTimeColumn(e) {
   
				//let {id} = e.target;
				let {
   column,value} = e.detail;
				if(column==0 || column==1){
   
			        //直接修改数组下标视图不更新,用深拷贝之后替换数组
					let dateTime = JSON.parse(JSON.stringify(this.dateTime));
			        let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
					dateTime[column] = value;
					dateTimeArray[2] = getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
			        this.dateTime = dateTime;
			        this.dateTimeArray = dateTimeArray;
				}
			},
			createTimeStr(dateTimeArray,dateTime){
   
				let timeStr = dateTimeArray[0][dateTime[0]]+'-'+dateTimeArray[1][dateTime[1]]+'-'+dateTimeArray[2][dateTime[2]]+' '+dateTimeArray[3][dateTime[3]]+":"+dateTimeArray[4][dateTime[4]]+":"+dateTimeArray[5][dateTime[5]];
				console.log(timeStr)
				return timeStr
			},
		}
	}
</script>

3、可以同时选择日期和时间的选择器

请添加图片描述

源码

<template>
	<view class="page container">
		<uni-card is-full>
			<text class="uni-h6">可以同时选择日期和时间的选择器</text>
		</uni-card>
		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
		</view>
		<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
		</view>
		<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
		</view>
		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		</view>
		<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="single" />
		</view>
		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker returnType="timestamp" v-model="single" @change="changeLog($event)" />
		</view>
		<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
		</view>
		<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
		</view>
		<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="single" :border="false" />
		</view>
		<uni-section :title="'隐藏清除按钮用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="single" :clearIcon="false" />
		</view>
		<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="single" disabled />
		</view>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				single: '',
				datetimesingle: '',
				range: ['2021-02-1', '2021-3-28'],
				datetimerange: [],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000
			}
		},

		watch: {
   
			datetimesingle(newval) {
   
				console.log('单选:', this.datetimesingle);
			},
			range(newval) {
   
				console.log('范围选:', this.range);
			},
			datetimerange(newval) {
   
				console.log('范围选:', this.datetimerange);
			}
		},
		mounted() {
   
			setTimeout(() => {
   
				this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
				this.single = '2021-2-12'
				// this.range = ['2021-03-1', '2021-4-28']
				this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
				// this.start = '2021-07-10'
				// this.end = '2021-07-20'
			}, 3000)
		},

		methods: {
   
			change(e) {
   
				this.single = e
				console.log('----change事件:', this.single = e);
			},
			changeLog(e) {
   
				console.log('----change事件:', e);
			},
			maskClick(e) {
   
				console.log('----maskClick事件:', e);
			}
		}
	}
</script>

<style>
	.example-body {
   
		background-color: #fff;
		padding: 10px;
	}
</style>

4、个性设置 时分秒 / 年月日时分秒 / 时分秒-时分秒 / 年月日时分秒-年月日时分秒

请添加图片描述

源码

<template>
	<view>
		<view class="test">
			<view>日期选择 - 示例</view>
			{
   {
   date}}
			<button type="primary" @click="onShowDatePicker('date')">选择日期<
最低0.47元/天 解锁文章
Uniapp-小程序简单的时间选择组件-年月日时分
Bruce__taotao的博客
02-24 5786
uniapp小程序开发系列。本文实现一个简单时间选择控件。uniapp用个心仪时间控件真的麻烦。官方给得要么年月日，要么时分。产品只要年月日时分。这该怎么玩。旧项目没有引入ui框架，我也不想去引入，不然高低整一个vant 小程序版的。uniapp生态中，有个插件市场，找了一通，是有时间控件。但是引入也是麻烦。没必要。下文基于网友给的案例再稍微改了改。对了 这是vue2 的。以上就是今天要讲的内容，本文讨论了用uniapp 实现小程序时间选择组件 仅仅支持 年月日时分 的简单版本。
uni-app picker 选择时间戳
izhuoo的博客
12-30 5226
html： <picker mode="date" data-value="formData.dateBirth" start="1970-01-01" end="2030-01-01" @change="DateChange"> <view class="picker">{{ formData.dateBirth | formatDate5 }}</vi...
uniapp、vue2/3封装时间戳转换日期，获取当前时间
m0_71513265的博客
07-03 2125
const customFormat = 'yyyy年MM月dd日 hh时mm分ss秒';// 输出当前时间的自定义格式，例如：2024年07月03日 09时15分30秒在这个例子中，我们提供了一个自定义的格式字符串，将当前时间按照这个格式进行格式化，并将结果打印出来。
微信小程序 时间戳与日期格式的转换
最新发布
qq_36158551的博客
04-19 773
微信小程序中的时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。例如现在北京时间2015-12-31 17:00:00的时间戳是1451552400，就是指从北京时间1970-01-01 08:00:00到2015-12-31 17:00:00已经过去了1451552400秒。
uniapp 时间戳 获取问题
I`m a little coder
04-29 4174
最近uniapp 试水 差点溺水 简单粗暴分享给大家 ： 一、获取时间戳 正常浏览器new Date(） uniapp 中 let time=new Date() console.log(time,"time") // {} time let time1=new Date().getTime() console.log(time1,"time1") // 1.6512e+12 time1 1.6512e+12 是科学计数法 new Date().getTime().toFixed
js基本数据获取
T1871qqq的博客
09-02 664
js获取日期相关信息 var date = new Date(); date .getYear(); //获取当前年份(2位) date .getFullYear(); //获取完整的年份(4位) date .getMonth(); //获取当前月份(0-11,0代表1月) date .getDate(); //获取当前日(1-31) date .getDay(); //获取当前星期X(0-6,0代表星期天) date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
uni-app时间戳
weixin_60641464的博客
02-15 2514
const happenTime = (num) => { // 时间戳转换成 “yyyy-MM-dd hh:mm:ss”格式 let date = new Date(num); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 //年 let year = date.getFullYear(); // 月 let month = date.getMonth() + 1; month = month < 10 ? ('0' + month) : month; /.
uniapp 获取时间戳、日期
BlizzardWu的博客
10-29 7339
let date = new Date(); //Fri Oct 29 2021 16:37:56 GMT+0800 (CST) let timestamp = new Date().getTime(); //1635496676223 (毫秒级) let y= date.getFullYear(); //获取完整的年份(4位) let m= date.getMonth(); //获取当前月份(0-11,0代表1月) let d= date.getDate(); //获取当前日(1-31) let w=
Uni-app时间戳
qq_36926045的博客
01-03 3980
创建time.js文件 export function formatDate (value) { let date = new Date(value) let y = date.getFullYear() let MM = date.getMonth() + 1 MM = MM < 10 ? ('0' + MM) : MM let d = date.getDate()...
[uni-app] 小程序码转为二维码, 小程序解析此码获取数据
iOSTianNan的博客
03-15 1003
小程序码缩小后太细, 不好扫, 还是改成二维码扫记录解析该二维码直接看第三个elsee.q 就是扫码后, 必须接受的参数, 也是判断依据。
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
1. **uni-app**：uni-app 是一个使用 Vue.js 开发的多端框架，它允许开发者编写一次代码，部署到多个平台，包括微信小程序、H5、Android 和 iOS 等。uni-app 提供了丰富的组件和 API，方便开发者构建各种类型的移动...
uni-app录制视频插件，视频压缩，支持设置分辨率和视频名称
09-10
在IT行业中，尤其是在移动应用开发领域，uni-app是一款广受欢迎的多端开发框架，它允许开发者用一套代码实现跨平台的应用程序开发，包括iOS、Android、H5、小程序等。本话题聚焦于uni-app的一个重要功能——视频录制...
uniapp 获取时间戳
热门推荐
zaijiandeai的博客
07-31 1万+
Math.round(new Date() / 1000)
uniapp 获取当前的时间戳 2021-06-01
u012922417的专栏
06-01 192
祝福大家六一儿童节健康快乐。 a0auu-zk6rq.png 获取当前的时间戳： let timestamp = new Date().getTime(); let tenM = 20*60000; this.single = timestamp + tenM; this.single2 = ...
uniapp时间戳转时间
weixin_59527403的博客
07-25 826
【代码】uniapp时间戳转时间。
uniapp时间戳转换为日期格式（年月日 时分秒）
weixin_57792130的博客
04-28 3591
uniapp后台返回时间戳显示为日期格式 年月日时分秒
uni中获取时间戳和转换时间
yqh的博客
04-16 6355
最近在自学uni，需要判断时间。 这个好像是vue的函数： this.useTime 的格式为 2020-4-16 14:20:56 格式转换： var chooseTime = (new Date(this.useTime)).getTime(); 获取当前时间： var nowTime = (new Date()).getTime(); 注：getTime()是精确到毫秒的。 ...
uniapp 如何获取当前时间,自定义时间格式（根据时间戳转换成时间，判断当前是上午还是下午）
SLife4599的博客
05-18 4247
废话不多说直接上代码 methods: { //获取当前时间 getNewTime() { //new Date().getTime() 可以直接获取当前的时间戳 console.log(this.traversalTime(new Date().getTime()),'当前时间') }, addTimes(m){return m<10?'0'+m:m }, traversalTime(timestamp) {
uniapp开发小程序—— 获取当前时间、比较两个时间/日期的大小
weixin_48596030的博客
04-14 5060
【代码】uniapp开发小程序—— 获取当前时间、比较两个时间/日期的大小。
uni-app项目中如何配置文件自动增加版本号与时间戳
uni-app是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台。" 在uni-app项目中，vue.config.js文件是一个非常重要的配置文件，它允许开发者覆盖项目中的一些默认配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值