小程序获取时间格式

本文详细介绍了如何在小程序中实现时间选择器,包括日期范围设置、时间格式化及时间选择事件处理,通过实例展示了wxml、wxss和js代码的具体应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

标题图

小程序获取时间格式

效果图片:

效果

效果

效果

.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() {

  }
})

效果

效果

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 点赞
### 微信小程序获取当前日期时间方法 在微信小程序中,可以通过自定义工具函数来实现获取格式化当前的日期和时间。具体做法是在项目中的`utils/util.js`文件里编写一个用于处理时间和日期格式化的辅助函数。 ```javascript // utils/util.js 文件内的部分代码片段 function 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(':') } function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n } ``` 上述代码展示了如何创建一个名为`formatTime`的功能函数[^3]。此功能接受JavaScript `Date`对象作为输入参数,并按照指定格式返回字符串形式的时间表示法。 为了使页面能够展示最新的时间信息,在对应的JS逻辑层文件内调用该工具函数并将结果赋给页面数据属性: ```javascript var util = require('../../utils/util.js'); Page({ data: {}, onLoad: function () { let currentTime = util.formatTime(new Date()); this.setData({ time: currentTime }); } }) ``` 这段脚本说明了当页面加载(`onLoad`)时会执行的操作——即取得当前系统的日期与时刻并通过`setData()`更新至视图层以便呈现给用户查看。 对于WXML模板而言,则只需简单地绑定这个变量即可完成数据显示工作: ```html <view>{{time}}</view> ``` 这样就实现了从服务器端到客户端完整的流程:先由后台计算好确切的时间戳或日期时间串;再经前端渲染引擎解析后最终呈现在用户的屏幕上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值