微信小程序pinker组件使用实现自动相减日期


Posted in Javascript onMay 07, 2020

首先,我这里使用pinker组件代码为

<view class="section">
   <view class="section__title">开始时间</view>
   <picker mode="date" value="{{date}}" start="{{startTime}}" end="2020-09-01" bindchange="bindDateChange">
    <view class="picker">
     <text>{{date}}</text>
     <image src="/images/three.png"></image>
    </view>
   </picker>
  </view>

  <view class="section">
   <view class="section__title">结束时间</view>
   <picker mode="date" value="{{date2}}" start="{{date}}" end="2050-09-01" bindchange="bindDate2Change">
    <view class="picker">
     <text>{{date2}}</text>
     <image src="/images/three.png"></image>
    </view>
   </picker>
  </view>

在这里先声明一下,mode属性有五个,我这里用到的是日期选择器?data,开始时间的默认选择时间为当前日期,通过js时时获取当天的日期

微信小程序pinker组件使用实现自动相减日期

获取当天日期的代码为:

//获取当前时间戳 
  var timestamp = Date.parse(new Date());
  timestamp = timestamp / 1000;
  console.log("当前时间戳为:" + timestamp);

  //获取当前时间 
  var n = timestamp * 1000;
  var date = new Date(n);
  //年 
  var Y = date.getFullYear();
  //月 
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  //日 
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  //天
  var H = date.getHours(); 
  //时 
  var m = date.getMinutes(); 
  //分 
  var time = Y + "-" + M + "-" + D;
  var time2 = Y + "-" + M + "-" + D + "-" + H + ":" + m;
  console.log(time)
  console.log(time2)

其次,pinker组件选择的开始时间与结束时间,通过js来相减得到相差的日期

// 获取开始时间、结束时间,相减
  var start_date = new Date(this.data.date.replace(/-/g, "/"));
  var end_date = new Date(this.data.date2.replace(/-/g, "/"));
  var days = end_date.getTime() - start_date.getTime();
  var day = parseInt(days / (1000 * 60 * 60 * 24));
  console.log(day);
  if (day > 0) {
   this.setData({
    num: day
   })
  } else if (day == 0) {
   this.setData({
    num: 1
   })
  } else if (day < 0) {
   this.setData({
    date2:''
   })
  }
 },

这里的知识点是,replace(/-/g, “/”)一般用于格式化日期,如2020-5-5 格式化为 2020/5/5,然后js 可以直接操作这个时间,/g 代表全局,所有的- 都替换。

实现思路:把日期格式化再转成毫秒数,用结束日期的毫秒数减去开始日期的毫秒数,最终转换成天数。

然后再wxml页面的计算时间差的代码为:

<view class="infoDiv">
   <text>请假时长</text>
   <view wx:if="{{date2&&date}}">
    <input auto-focus placeholder="" type="text" value="{{num+'天'}}" disabled="disabled" bindchange="num_data" />
   </view>
   <view wx:else="">
    <input auto-focus placeholder="" type="text" value="" bindchange="num_data" disabled="disabled" />
   </view>

  </view>

这里通过wx:if来判断日期相差数显示对应的效果。在js传数据的时候,通过+“”来拼接变量,如图中我在计算出日期后,自动加上单位:天。{{num+“天”}}

实现效果图为:

微信小程序pinker组件使用实现自动相减日期

微信小程序pinker组件使用实现自动相减日期

好了,这就是简单的使用微信小程序中的自定义组件pinker进行时间选择以及自动进行日期相减。

到此这篇关于微信小程序pinker组件使用实现自动相减日期的文章就介绍到这了,更多相关小程序pinker组件日期内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
简单了解JavaScript弹窗实现代码
May 07 #Javascript
angular组件间传值测试的方法详解
May 07 #Javascript
Node.js API详解之 timer模块用法实例分析
May 07 #Javascript
JS面试题中深拷贝的实现讲解
May 07 #Javascript
javascript 代码是如何被压缩的示例代码
May 06 #Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 #Javascript
Vue SSR 即时编译技术的实现
May 06 #Javascript
You might like
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
js资料prototype 属性
2007/03/13 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
基于node实现websocket协议
2016/04/25 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
用python实现对比两张图片的不同
2018/02/05 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
在python3中实现更新界面
2020/02/21 Python
Python远程linux执行命令实现
2020/11/11 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
公务员政审材料
2014/12/23 职场文书
求职自我评价范文
2015/03/09 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
安全主题班会教案
2015/08/12 职场文书
公司岗位说明书
2015/10/08 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL