快捷導(dǎo)航

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

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

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

首先，我這里使用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">結(jié)束時間</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，開始時間的默認(rèn)選擇時間為當(dāng)前日期，通過js時時獲取當(dāng)天的日期

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

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

  //獲取當(dāng)前時間 
  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組件選擇的開始時間與結(jié)束時間，通過js來相減得到相差的日期

// 獲取開始時間、結(jié)束時間,相減
  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 代表全局，所有的- 都替換。

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

然后再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來判斷日期相差數(shù)顯示對應(yīng)的效果。在js傳數(shù)據(jù)的時候，通過+“”來拼接變量，如圖中我在計算出日期后，自動加上單位：天。{{num+“天”}}

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