uni-app和微信小程序 ----- 获取当前时间 (y-m-d h:i:s) && 获取明天,昨天等时间 && 日期段筛选

uni-app ----- 获取当前时间 && 获取明天,昨天等时间 && 日期段筛选

前言:借鉴一些大佬的代码 整合一下完成的。

1.新建一个getdateTime.js文件 封装一些函数。(当前时间函数 和 获取昨天明天函数)

/**
 * @param {String} str (y-m-d h:i:s) y:年 m:月 d:日 h:时 i:分 s:秒
 */


function dateTimeStr(str){
	var date = new Date(),
	year = date.getFullYear(), //年
	month = date.getMonth() + 1, //月
	day = date.getDate(), //日
	hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
	minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
	second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	hour >= 0 && hour <= 9 ? hour : "";
	minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
	second >= 0 && second <= 9 ? (second = "0" + second) : "";
	if(str.indexOf('y') != -1){
		str = str.replace('y', year)
	}
	if(str.indexOf('m') != -1){
		str = str.replace('m', month)
	}
	if(str.indexOf('d') != -1){
		str = str.replace('d', day)
	}
	if(str.indexOf('h') != -1){
		str = str.replace('h', hour)
	}
	if(str.indexOf('i') != -1){
		str = str.replace('i', minute)
	}
	if(str.indexOf('s') != -1){
		str = str.replace('s', second)
	}
	return str;
}
 
 //获取日期的今天,明天,后天 -1是昨天,0是今天,1是后一天
function getDateStr(today, addDayCount) {
     let date;
     if (today) {
       date = new Date(today);
     } else {
       date = new Date();
     }
     date.setDate(date.getDate() + addDayCount); //获取AddDayCount天后的日期 
     let y = date.getFullYear();
     let m = date.getMonth() + 1; //获取当前月份的日期 
     let d = date.getDate();
     if (m < 10) {
       m = '0' + m;
     };
     if (d < 10) {
       d = '0' + d;
     };
     console.log(y + "-" + m + "-" + d)
     return y + "-" + m + "-" + d;
   }
module.exports = {
	dateTimeStr: dateTimeStr,
	getDateStr:getDateStr
}

2.在所用页面引用上:

import getDateTime from '@/config/getdateTime.js';

	export default {
		onLoad(options) {
				this.start_time = getDateTime.getDateStr(null, -1); //昨天
				this.end_time = getDateTime.dateTimeStr('y-m-d'); //今天
		},
	},
	

日期段筛选(样式可以在uniapp样式集合中看到 https://editor.csdn.net/md/?articleId=127384820)

uniapp:

	<view class="display widP100">
		<picker class="widP47" mode="date" :value="start_time" @change="bindPickerChange($event,1)">
			<view class="paddingA20  boxSize boRadius60 display bgColorF6F7FB">
				<text class="iconfont icon-tubiao_riqi iconSize20">text>
				<view class="fontSize14 marL20">
					{{start_time}}
				view>
				<text class="iconfont icon-arrow-right-copy-copy iconSize14 marL20">text>
			view>
		picker>
		<picker class="widP47 marL40" mode="date" :value="end_time" @change="bindPickerChange($event,2)">
			<view class="paddingA20 boxSize boRadius60 display bgColorF6F7FB">
				<text class="iconfont icon-tubiao_riqi iconSize20">text>
				<view class="fontSize14 marL20">
					{{end_time}}
				view>
				<text class="iconfont icon-arrow-right-copy-copy iconSize14 marL20">text>
			view>
		picker>
	view>
import getDateTime from '@/config/getdateTime.js';
	export default {
		data() {
			return {
				start_time: '', //起始日期
				end_time: '', //终止日期			};
		},
		onLoad(options) {
			this.start_time = getDateTime.getDateStr(null, -1); //昨天
			this.end_time = getDateTime.dateTimeStr('y-m-d'); //今天
		},
		methods: {
			// 选择日期
			bindPickerChange(e, tag) {
				let val = e.detail.value;
				if (tag == 1) { //开始时间
					if (val > this.end_time) return this.$alert('开始日期不能大于结束日期!')
					this.start_time = val;
				} else { //结束时间
					if (val < this.start_time) return this.$alert('结束日期不能小于开始日期!')
					this.end_time = val;
				}
			},
			
		}
	};

在这里插入图片描述

微信小程序:

<view class="display martb">
		<picker class="widP47" mode="date" value="{{start_time}}" data-tag="1" bindchange="bindPickerChange">
			<view class="paddingA20 display">
        <image class="imgz" src="/static/images/icon/wait-128.png" mode="aspectFill"> image>
				<view class="fontSize14">
					{{start_time}}
				view>
				<image class="imgz1" src="/static/images/right.png" mode="aspectFill">image>
			view>
		picker>
		<picker class="widP47 marL40" mode="date" value="{{end_time}}" data-tag="2" bindchange="bindPickerChange">
			<view class="paddingA20 display">
        <image class="imgz" src="/static/images/icon/wait-128.png" mode="aspectFill"> image>
				<view class="fontSize14 ">
					{{end_time}}
				view>
				<image class="imgz1" src="/static/images/right.png" mode="aspectFill">image>
			view>
		picker>
	view>
import getDateTime from "../../utils/getdateTime.js";
Page({
  data: {
   		start_time: '', //起始日期
    	end_time: '', //终止日期	
  },
  onLoad(){
     this.setData({
      start_time: getDateTime.getDateStr(null, -1), //昨天
      end_time: getDateTime.dateTimeStr('y-m-d'), //今天
    })
    },
     // 选择日期
  bindPickerChange(e) {
    let val = e.detail.value;
    let tag = e.currentTarget.dataset.tag;
    if (tag == 1) { //开始时间
      if (val > this.data.end_time) return wx.showToast({
        title: '开始日期不能大于结束日期!',
        icon: 'none'
      })
      this.setData({
        start_time: val
      })
    } else { //结束时间
      if (val < this.data.start_time) return wx.showToast({
        title: '结束日期不能小于开始日期!',
        icon: 'none'
      })
      this.setData({
        end_time: val
      })
    }
  },
  })
.display{
  width: 100%;
  display: flex;
}
.widP47{
  width: 47%;
}
.paddingA20{
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 24rpx;
  border: 1px solid #eee;
}
.imgz{
  width: 50rpx;
  height: 50rpx;
}
.fontSize14{
  font-size: 28rpx;
  line-height: 50rpx;
  margin-left: 20rpx;
}
.imgz1{
  width: 30rpx;
  height: 30rpx;
  transform: rotate(90deg);
  margin-left: 20rpx;
  margin-top: 6rpx;
}
.marL40{
  margin-left: 40rpx;
}
.martb{
  margin-bottom: 40rpx;
}

在这里插入图片描述

你可能感兴趣的:(uni-app,微信小程序,uni-app,javascript,前端)