小程序获取时间格式

女爷i 2021-09-17 05:30 397阅读 0赞

标题图

小程序获取时间格式

效果图片:

效果

效果

效果

.wxml

  1. <view class='date'>
  2. <picker mode="date" value="{
  3. {date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1" fields="month">
  4. <view>
  5. <{
  6. {util.sub1(date1)}}> 统计
  7. </view>
  8. </picker>
  9. </view>

.wxss

  1. .date {
  2. padding-top: 20rpx;
  3. padding-bottom: 20rpx;
  4. text-align: center;
  5. color: #fff;
  6. background-color: #21c7dc;
  7. }

.js

  1. // .js
  2. var util = require('../../utils/util.js');
  3. var dateTimePicker = require('../../utils/dateTimePicker.js');
  4. Page({
  5. /**
  6. * 页面的初始数据
  7. */
  8. data: {
  9. date1: '',
  10. startYear: 2018,
  11. endYear: 2300,
  12. },
  13. changeDate1(e) {
  14. var that = this;
  15. that.setData({
  16. date1: e.detail.value
  17. });
  18. },
  19. /**
  20. * 生命周期函数--监听页面加载
  21. */
  22. onLoad: function(options) {
  23. var that = this;
  24. // 获取当天时间
  25. var todaytime = util.formatTime(new Date());
  26. that.setData({
  27. date1: todaytime,
  28. });
  29. // var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  30. // var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  31. // var lastArray = obj1.dateTimeArray.pop();
  32. // var lastTime = obj1.dateTime.pop();
  33. // console.log(lastArray)
  34. // console.log(lastTime)
  35. },
  36. /**
  37. * 生命周期函数--监听页面初次渲染完成
  38. */
  39. onReady: function() {
  40. },
  41. /**
  42. * 生命周期函数--监听页面显示
  43. */
  44. onShow: function() {
  45. },
  46. /**
  47. * 生命周期函数--监听页面隐藏
  48. */
  49. onHide: function() {
  50. },
  51. /**
  52. * 生命周期函数--监听页面卸载
  53. */
  54. onUnload: function() {
  55. },
  56. /**
  57. * 页面相关事件处理函数--监听用户下拉动作
  58. */
  59. onPullDownRefresh: function() {
  60. },
  61. /**
  62. * 页面上拉触底事件的处理函数
  63. */
  64. onReachBottom: function() {
  65. },
  66. /**
  67. * 用户点击右上角分享
  68. */
  69. onShareAppMessage: function() {
  70. }
  71. })

效果

效果

util.js

  1. const formatTime = date => {
  2. const year = date.getFullYear()
  3. const month = date.getMonth() + 1
  4. const day = date.getDate()
  5. const hour = date.getHours()
  6. const minute = date.getMinutes()
  7. const second = date.getSeconds()
  8. return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  9. }
  10. const formatNumber = n => {
  11. n = n.toString()
  12. return n[1] ? n : '0' + n
  13. }
  14. module.exports = {
  15. formatTime: formatTime,
  16. }
  17. // .js
  18. var util = require('../../utils/util.js');
  19. Page({
  20. /**
  21. * 页面的初始数据
  22. */
  23. data: {
  24. date1: '',
  25. },
  26. changeDate1(e) {
  27. var that = this;
  28. that.setData({
  29. date1: e.detail.value
  30. });
  31. },
  32. /**
  33. * 生命周期函数--监听页面加载
  34. */
  35. onLoad: function(options) {
  36. var that = this;
  37. // 获取当天时间
  38. var todaytime = util.formatTime(new Date());
  39. that.setData({
  40. date1: todaytime,
  41. });
  42. },
  43. /**
  44. * 生命周期函数--监听页面初次渲染完成
  45. */
  46. onReady: function() {
  47. },
  48. /**
  49. * 生命周期函数--监听页面显示
  50. */
  51. onShow: function() {
  52. },
  53. /**
  54. * 生命周期函数--监听页面隐藏
  55. */
  56. onHide: function() {
  57. },
  58. /**
  59. * 生命周期函数--监听页面卸载
  60. */
  61. onUnload: function() {
  62. },
  63. /**
  64. * 页面相关事件处理函数--监听用户下拉动作
  65. */
  66. onPullDownRefresh: function() {
  67. },
  68. /**
  69. * 页面上拉触底事件的处理函数
  70. */
  71. onReachBottom: function() {
  72. },
  73. /**
  74. * 用户点击右上角分享
  75. */
  76. onShareAppMessage: function() {
  77. }
  78. })

达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

发表评论

表情:
评论列表 (有 0 条评论,397人围观)

还没有评论,来说两句吧...

相关阅读