1. Toy模板网首页
  2. > Toy博客

微信小程序格式化日期的几种方式

8月前 作者：嫣嫣细语 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序格式化日期的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

微信小程序日期格式化,微信小程序,微信小程序,小程序,es6,javascript

方式一

  1. wxml 文件
<view class="container">
  <view class="wrap">
    <view class="item" wx:for="{{list}}" wx:key="index">
      <view class="top">
        <view class="img">
          <image src="{{item.img[0]}}"></image>
        </view>
        <view class="desc">
          <view class="title">{{item.name}}</view>
          <view class="subtitle">{{item.subtitle}}</view>
          <view class="type">{{item.type}}</view>
          <view class="duration">{{item.producePlace}} / {{item.duration}}分钟</view>
          <view class="opentime">{{filter.format(item.releaseDate, 'YY-MM-DD')}} {{item.releasePlace}}</view>
          <view class="btn-group">
            <button class="btn" hover-class="btnhover">想看</button>
            <button class="btn" hover-class="btnhover">评分</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<wxs module="filter">
function format(ts, option) {
  var date = getDate(ts)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var week = date.getDay()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  
  //获取 年月日
  if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

  //获取 年
  if (option == 'YY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return  [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week')  return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh')  return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm')  return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 时分秒 年月日
  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
}

function getWeek(n) {
  switch(n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}
module.exports.format = format;
</wxs>

2.JS文件

//获取应用实例
const app = getApp()

Page({
  data: {
    list: [
		{
        name: '唐人街探案3',
        subtitle: 'Detective Chinatown 3',
        type: '喜剧 悬疑',
        duration: '136',
        producePlace: '中国大陆',
        releaseDate: 1601510400000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/b0e0d6ce9914f37e7f9f6ade13e096342721150.jpg@464w_644h_1e_1c'],
        plot: '继曼谷、纽约之后，东京再出大案。唐人街神探唐仁（王宝强 饰）、秦风（刘昊然 饰）受侦探野田昊（妻夫木聪 饰）的邀请前往破案。“CRIMASTER世界侦探排行榜”中的侦探们闻讯后也齐聚东京，加入挑战，而排名第一Q的现身，让这个大案更加扑朔迷离，一场亚洲最强神探之间的较量即将爆笑展开……'
      },
      {
        name: '我在时间尽头等你',
        subtitle: 'Love You Forever',
        type: '爱情 奇幻 喜剧',
        duration: '115',
        producePlace: '中国大陆',
        releaseDate: 1598313600000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/moviemachine/7e6118993dbf0f304ac1dad4667fddda207318.jpg@218w_300h_1e_1c'],
        plot: '林格（李鸿其 饰）一次次重启时空，只为与恋人邱倩（李一桐 饰）再次相遇。一生只爱一个人，希望开头是你，结尾也是你。2020年七夕最深情的告白: 我在时间尽头等你。'
      },
      {
        name: '我和我的家乡',
        subtitle: 'My Hometown And I',
        type: '剧情 喜剧',
        duration: '120',
        producePlace: '中国大陆',
        releaseDate: 1601510400000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/3e9c5b91940cd5c75a12916e66528a404269063.jpg@464w_644h_1e_1c'],
        plot: ''
      },
      {
        name: '八佰',
        subtitle: 'The Eight Hundred',
        type: '剧情 战争 历史',
        duration: '147',
        producePlace: '中国大陆',
        releaseDate: 1597968000000,
        releasePlace: '中国大陆上映',
        img: ['https://p1.meituan.net/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg@464w_644h_1e_1c'],
        plot: '1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。'
      },
      {
        name: '姜子牙',
        subtitle: 'JIANG ZIYA：Legend Of Deification',
        type: '动画 动作 冒险',
        duration: '110',
        producePlace: '中国大陆',
        releaseDate: 1601510400000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/3dc44919f0917b5823c867813f29fba42625689.jpg@464w_644h_1e_1c'],
        plot: '昆仑弟子姜子牙（郑希 配音）率领众神伐纣，赢得封神大战胜利。即将受封成为众神之长的他，却因一时过失引得昆仑大乱，从此被贬北海，为世人所唾弃。十年后，因一个契机，姜子牙踏上重回昆仑的旅途。在战后的废墟之上，他重新找到自我，也洞悉了十年前的一切真相。'
      },
      {
        name: '小妇人',
        subtitle: 'Little Women',
        type: '爱情 剧情',
        duration: '135',
        producePlace: '美国',
        releaseDate: 1598313600000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/cdb164c203fc0c2465278ddd165e91c84503798.jpg@464w_644h_1e_1c'],
        plot: '马奇夫人和四个多才多艺但性格各异的女儿一起过着平凡又温馨的生活。梅格贤惠温柔，是为爱痴狂的浪漫主义者；贝丝聪慧娴静，擅长钢琴；艾米年纪最小，有漂亮的外表和现实的头脑；而最特立独行的是乔，她有些男孩子气，热爱写作，在女孩都以嫁人为目标的年代，她立志成为一名独立女性。富有又帅气的青年劳里和乔青梅竹马两小无猜，对乔一见钟情，但乔面对劳里的表白却心烦意乱，决定独自前往纽约追求写作事业。经历了现实的洗礼后，乔逐渐明白了自己对于劳里的心意，却发现劳里即将迎娶妹妹艾米……'
      }
	]
  },
  /**
   * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {},
  /**
   * 生命周期函数--监听页面显示
  */
  onShow: function () {}
})

方式二

  1. 在 wxml 文件 引入 wxs 文件 
    <wxs src="./index.wxs" module="filter" />
<view class="container">
  <view class="wrap">
    <view class="item" wx:for="{{list}}" wx:key="index">
      <view class="top">
        <view class="img">
          <image src="{{item.img[0]}}"></image>
        </view>
        <view class="desc">
          <view class="title">{{item.name}}</view>
          <view class="subtitle">{{item.subtitle}}</view>
          <view class="type">{{item.type}}</view>
          <view class="duration">{{item.producePlace}} / {{item.duration}}分钟</view>
          <view class="opentime">{{filter.format(item.releaseDate, 'YY-MM-DD')}} {{item.releasePlace}}</view>
          <view class="btn-group">
            <button class="btn" hover-class="btnhover">想看</button>
            <button class="btn" hover-class="btnhover">评分</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

    2.wxs 文件文章来源地址https://www.toymoban.com/news/detail-720782.html

    function format(ts, option) {
  var date = getDate(ts)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var week = date.getDay()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  
  //获取 年月日
  if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

  //获取 年
  if (option == 'YY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return  [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week')  return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh')  return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm')  return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 时分秒 年月日
  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
}

function getWeek(n) {
  switch(n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}

module.exports.format = format

    方式三

  2. wxml 文件 
    <view class="container">
  <view class="wrap">
    <view class="item" wx:for="{{list}}" wx:key="index">
      <view class="top">
        <view class="img">
          <image src="{{item.img[0]}}"></image>
        </view>
        <view class="desc">
          <view class="title">{{item.name}}</view>
          <view class="subtitle">{{item.subtitle}}</view>
          <view class="type">{{item.type}}</view>
          <view class="duration">{{item.producePlace}} / {{item.duration}}分钟</view>
          <view class="opentime">{{item.releaseDate}} {{item.releasePlace}}</view>
          <view class="btn-group">
            <button class="btn" hover-class="btnhover">想看</button>
            <button class="btn" hover-class="btnhover">评分</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
  3. 在 JS 文件引入 util 文件 
    var util = require('../../utils/util')
//获取应用实例
const app = getApp()

Page({
  data: {
    list: [
		{
        name: '唐人街探案3',
        subtitle: 'Detective Chinatown 3',
        type: '喜剧 悬疑',
        duration: '136',
        producePlace: '中国大陆',
        releaseDate: 1601510400000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/b0e0d6ce9914f37e7f9f6ade13e096342721150.jpg@464w_644h_1e_1c'],
        plot: '继曼谷、纽约之后，东京再出大案。唐人街神探唐仁（王宝强 饰）、秦风（刘昊然 饰）受侦探野田昊（妻夫木聪 饰）的邀请前往破案。“CRIMASTER世界侦探排行榜”中的侦探们闻讯后也齐聚东京，加入挑战，而排名第一Q的现身，让这个大案更加扑朔迷离，一场亚洲最强神探之间的较量即将爆笑展开……'
      },
      {
        name: '我在时间尽头等你',
        subtitle: 'Love You Forever',
        type: '爱情 奇幻 喜剧',
        duration: '115',
        producePlace: '中国大陆',
        releaseDate: 1598313600000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/moviemachine/7e6118993dbf0f304ac1dad4667fddda207318.jpg@218w_300h_1e_1c'],
        plot: '林格（李鸿其 饰）一次次重启时空，只为与恋人邱倩（李一桐 饰）再次相遇。一生只爱一个人，希望开头是你，结尾也是你。2020年七夕最深情的告白: 我在时间尽头等你。'
      },
      {
        name: '我和我的家乡',
        subtitle: 'My Hometown And I',
        type: '剧情 喜剧',
        duration: '120',
        producePlace: '中国大陆',
        releaseDate: 1601510400000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/3e9c5b91940cd5c75a12916e66528a404269063.jpg@464w_644h_1e_1c'],
        plot: ''
      },
      {
        name: '八佰',
        subtitle: 'The Eight Hundred',
        type: '剧情 战争 历史',
        duration: '147',
        producePlace: '中国大陆',
        releaseDate: 1597968000000,
        releasePlace: '中国大陆上映',
        img: ['https://p1.meituan.net/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg@464w_644h_1e_1c'],
        plot: '1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。'
      },
      {
        name: '姜子牙',
        subtitle: 'JIANG ZIYA：Legend Of Deification',
        type: '动画 动作 冒险',
        duration: '110',
        producePlace: '中国大陆',
        releaseDate: 1601510400000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/3dc44919f0917b5823c867813f29fba42625689.jpg@464w_644h_1e_1c'],
        plot: '昆仑弟子姜子牙（郑希 配音）率领众神伐纣，赢得封神大战胜利。即将受封成为众神之长的他，却因一时过失引得昆仑大乱，从此被贬北海，为世人所唾弃。十年后，因一个契机，姜子牙踏上重回昆仑的旅途。在战后的废墟之上，他重新找到自我，也洞悉了十年前的一切真相。'
      },
      {
        name: '小妇人',
        subtitle: 'Little Women',
        type: '爱情 剧情',
        duration: '135',
        producePlace: '美国',
        releaseDate: 1598313600000,
        releasePlace: '中国大陆上映',
        img: ['https://p0.meituan.net/movie/cdb164c203fc0c2465278ddd165e91c84503798.jpg@464w_644h_1e_1c'],
        plot: '马奇夫人和四个多才多艺但性格各异的女儿一起过着平凡又温馨的生活。梅格贤惠温柔，是为爱痴狂的浪漫主义者；贝丝聪慧娴静，擅长钢琴；艾米年纪最小，有漂亮的外表和现实的头脑；而最特立独行的是乔，她有些男孩子气，热爱写作，在女孩都以嫁人为目标的年代，她立志成为一名独立女性。富有又帅气的青年劳里和乔青梅竹马两小无猜，对乔一见钟情，但乔面对劳里的表白却心烦意乱，决定独自前往纽约追求写作事业。经历了现实的洗礼后，乔逐渐明白了自己对于劳里的心意，却发现劳里即将迎娶妹妹艾米……'
      }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面显示
  */
  onShow: function () {
    this.data.list.forEach((item) => {
      item.releaseDate = util.formatTime(item.releaseDate, 'YY-MM-DD')
      item.flag = false
    })
    this.setData({
      list: this.data.list
    })
  }
})
  4. util 文件 
    const formatTime = (time, option) => {
  const date = new Date(time)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const week = date.getDay()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  
  //获取 年月日
  if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

  //获取 年
  if (option == 'YY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return  [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week')  return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh')  return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm')  return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 时分秒 年月日
  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
}

const getWeek = n => {
  switch(n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}

module.exports = {
  formatTime: formatTime
}

到了这里，关于微信小程序格式化日期的几种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Oracle格式化日期

    Oracle格式化日期

    将oralce中时间格式为XXX年XX月XX日，如下图: 需要给年月日 添加引号 ，如to_char(sysdate,\\\'yyyy \\\"年\\\" mm \\\"月\\\" dd \\\"日\\\" \\\' )；

    2024年02月15日
    浏览(39)

  • C# 格式化日期

    除去string.Format()可以对日期进行格式化之外，*.ToString()也可以实现相同的效果： 另一种写法：

    2024年02月15日
    浏览(44)
  • js实现日期格式化

    js实现日期格式化

    获取到的是1970年1月1日至今的毫秒数 月份从0开始的所以要加1 实现日期格式化效果图 日期格式化实现效果图 其中包含封装一个不够两位数就补零的函数 一个不够两位数就补零的函数

    2024年02月13日
    浏览(71)

  • 【Java】SimpleDateFormat格式化日期

    SimpleDateFormat 是用于以区域设置敏感的方法格式化和解析日期。它允许格式化（日期文本），解析（文本日期） 对时间日期进行格式化处理 把Date对象转换为年月日时分秒格式字符串 把字符串转换为Date对象 常用的模式字母及对应关系如下：yyyy年MM月dd日HH时mm分ss秒 y 年，M 月

    2024年04月16日
    浏览(38)

  • SQL Server日期格式化

    一、时间戳的生成 使用dateDiff方法，运算当前时间到标准时间之间的秒数。 DATEDIFF(s,‘1970-01-01 00:00:00’, getdate()) 二、日期格式转换 使用convert(data_type,source_data,style)进行格式转换。利用style控制转换格式。 结果： CONVERT(nvarchar(80),getdate(),0)----07 27 2022 8:33AM CONVERT(nvarchar(80),getd

    2024年02月06日
    浏览(46)

  • MySQL中日期格式化详解

    日期在数据库中是一个常见且重要的数据类型，在MySQL中，我们可以使用各种函数和格式化选项来处理和显示日期。本文将详细介绍MySQL中的日期格式化方法，并提供相应的源代码示例。 DATE_FORMAT函数 DATE_FORMAT函数是MySQL中用于格式化日期的常用函数。它接受两个参数：日期值

    2024年02月06日
    浏览(40)
  • Spring Boot 日期格式化

    Spring Boot 日期格式化

    我们先了解下，为什么需要配置日期格式化？ 通常情况下，发起一个 Http 请求，Spring Boot 会根据请求路径映射到指定 Controller 上的某个方法的参数上，接着，Spring 会 自动进行类型转换 。 对于日期类型的参数，Spring 默认是没有配置如何将字符串转换成日期类型的 我们新建一

    2024年02月08日
    浏览(36)

  • SQL SERVER 中日期格式化

    目录 1.date和datetime类型的区别 2. GETDATE()函数，返回当前日期时间（datetime类型） 3. CONVERT()函数，格式化日期 4. DATEPART() 函数  date是SQL Server 2008新引进的数据类型。它表示一个日期，不包含时间部分，可以表示的日期范围从公元元年1月1日到9999年12月31日。只需要3个字节的存

    2024年02月04日
    浏览(45)
  • Excel TEXT函数格式化日期

    Excel TEXT函数格式化日期

    ⏹Excel 的 TEXT 函数用于将数值或日期格式化为指定的文本格式

    2024年02月21日
    浏览(45)
  • Java格式化日期，时间（三种方法）

    Java格式化日期，时间（三种方法）

    在java中String类格式化的方法，是静态format()用于创建格式化的字符串。 format(String format, Object... args) 新字符串使用本地语言环境，制定字符串格式和参数生成格式化的新字符串。 format(Locale locale, String format, Object... args) 使用指定的语言环境，制定字符串格式和参数生成格式化

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包