快捷導(dǎo)航

微信小程序pinker組件使用實(shí)現(xiàn)自動(dòng)相減日期

更新時(shí)間：2020年05月07日 09:08:17 作者：Rayong有分享

這篇文章主要介紹了微信小程序pinker組件使用實(shí)現(xiàn)自動(dòng)相減日期,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

首先，我這里使用pinker組件代碼為

<view class="section">
   <view class="section__title">開(kāi)始時(shí)間</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">結(jié)束時(shí)間</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屬性有五個(gè)，我這里用到的是日期選擇器–data，開(kāi)始時(shí)間的默認(rèn)選擇時(shí)間為當(dāng)前日期，通過(guò)js時(shí)時(shí)獲取當(dāng)天的日期

獲取當(dāng)天日期的代碼為：

  //獲取當(dāng)前時(shí)間戳 
  var timestamp = Date.parse(new Date());
  timestamp = timestamp / 1000;
  console.log("當(dāng)前時(shí)間戳為：" + timestamp);

  //獲取當(dāng)前時(shí)間 
  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(); 
  //時(shí) 
  var m = date.getMinutes(); 
  //分 
  var time = Y + "-" + M + "-" + D;
  var time2 = Y + "-" + M + "-" + D + "-" + H + ":" + m;
  console.log(time)
  console.log(time2)

其次，pinker組件選擇的開(kāi)始時(shí)間與結(jié)束時(shí)間，通過(guò)js來(lái)相減得到相差的日期

// 獲取開(kāi)始時(shí)間、結(jié)束時(shí)間,相減
  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:''
   })
  }
 },

這里的知識(shí)點(diǎn)是，replace(/-/g, “/”)一般用于格式化日期，如2020-5-5 格式化為 2020/5/5，然后js 可以直接操作這個(gè)時(shí)間，/g 代表全局，所有的- 都替換。

實(shí)現(xiàn)思路：把日期格式化再轉(zhuǎn)成毫秒數(shù)，用結(jié)束日期的毫秒數(shù)減去開(kāi)始日期的毫秒數(shù)，最終轉(zhuǎn)換成天數(shù)。

然后再wxml頁(yè)面的計(jì)算時(shí)間差的代碼為:

 <view class="infoDiv">
   <text>請(qǐng)假時(shí)長(zhǎng)</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>

這里通過(guò)wx：if來(lái)判斷日期相差數(shù)顯示對(duì)應(yīng)的效果。在js傳數(shù)據(jù)的時(shí)候，通過(guò)+“”來(lái)拼接變量，如圖中我在計(jì)算出日期后，自動(dòng)加上單位：天。{{num+“天”}}

實(shí)現(xiàn)效果圖為：