微信小程序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和CSS速查手册
Aug 20 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
Angular表单验证实例详解
Oct 20 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
Vue实现选择城市功能
May 27 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
zend framework文件上传功能实例代码
2013/12/25 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python处理中文标点符号大集合
2018/05/14 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
在Python中增加和插入元素的示例
2018/11/01 Python
基于FME使用Python过程图解
2020/05/13 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
教师产假请假条范文
2014/04/10 职场文书
大学生个人求职信
2014/06/02 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫