1. 程式人生 > >小程式獲取時間格式

小程式獲取時間格式

標題圖

小程式獲取時間格式

效果圖片:

效果

效果

效果

.wxml

<view class='date'>
  <picker mode="date" value="{{date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1" fields="month">
    <view>
      <{{util.sub1(date1)}}> 統計
    </view>
  </picker>
</view>

.wxss

.date {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  text-align: center;
  color: #fff;
  background-color: #21c7dc;
}

.js

// .js
var util = require('../../utils/util.js');
var dateTimePicker = require('../../utils/dateTimePicker.js');
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    date1: '',
    startYear: 2018,
    endYear: 2300,
  },
  changeDate1(e) {
    var that = this;
    that.setData({
      date1: e.detail.value
    });
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    var that = this;
    // 獲取當天時間
    var todaytime = util.formatTime(new Date());
    that.setData({
      date1: todaytime,
    });
    // var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
    // var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
    // var lastArray = obj1.dateTimeArray.pop();
    // var lastTime = obj1.dateTime.pop();
    // console.log(lastArray)
    // console.log(lastTime)
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function() {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function() {

  }
})

效果

[效果]](https://upload-images.jianshu.io/upload_images/11158618-e5f894397a370757.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime,
}
// .js
var util = require('../../utils/util.js');
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    date1: '',
  },
  changeDate1(e) {
    var that = this;
    that.setData({
      date1: e.detail.value
    });
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    var that = this;
    // 獲取當天時間
    var todaytime = util.formatTime(new Date());
    that.setData({
      date1: todaytime,
    });
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function() {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function() {

  }
})

達叔小生:往後餘生,唯獨有你
You and me, we are family !
90後帥氣小夥,良好的開發習慣;獨立思考的能力;主動並且善於溝通
簡書部落格: 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

  • 下面我將繼續對 其他知識 深入講解 ,有興趣可以繼續關注
  • 小禮物走一走 or 點贊