基于jQuery的时间戳与日期间的转化

1. 时间戳与日期互转

我们可以通过Date()函数和getTime()方法来实现时间戳和日期的互转。

将时间戳转为日期：

//获取当前时间戳
var timestamp = new Date().getTime();
//利用Date()函数将时间戳转为日期
var date = new Date(timestamp);
//格式化日期，常用格式如下
var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
console.log(dateStr);

将日期转为时间戳：

//将日期字符串转为Date对象
var dateStr = '2021-10-01 12:30:00';
var date = new Date(dateStr);
//获取时间戳
var timestamp = date.getTime();
console.log(timestamp);

1. jQuery实现时间戳和日期格式化的插件

我们可以将上述互转功能封装成一个jQuery插件，方便在项目中的调用。

//定义一个工具函数对象
var dateTools = {
  //将时间戳转为日期字符串
  formatTimestamp: function(timestamp, fmt) {
    var date = new Date(timestamp);
    var o = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      "S": date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  },
  //将日期字符串转为时间戳
  formatDateString: function(dateStr) {
    var timestamp = Date.parse(new Date(dateStr));
    return timestamp / 1000;
  }
};

//将工具函数封装为jQuery插件
$.fn.dateTools = function(options) {
  var defaultOptions = {
    timeFormat: 'yyyy-MM-dd hh:mm:ss', //时间格式
    inputFormat: 'yyyy-MM-dd hh:mm:ss' //输入框格式
  };
  var settings = $.extend(defaultOptions, options);

  this.each(function() {
    var input = $(this);
    var isTimestamp = input.attr('data-timestamp');
    var format = isTimestamp ? settings.timeFormat : settings.inputFormat;

    input.on('blur', function() {
      //获取输入值
      var value = input.val();
      //判断值是否为空
      if (value.length == 0) {
        return;
      }
      //根据isTimestamp判断是转为时间戳还是日期字符串
      var result = isTimestamp ? dateTools.formatDateString(value) : dateTools.formatTimestamp(value, format);
      //将结果输出
      input.val(result);
    });
  });

  return this;
};

使用示例：

将时间戳转为日期

<input type="text" class="timestamp-input" data-timestamp="true">
<script>
  $('.timestamp-input').dateTools({
    timeFormat: 'yyyy-MM-dd hh:mm:ss'
  });
</script>

将日期转为时间戳

<input type="text" class="date-input">
<script>
$('.date-input').dateTools({
  inputFormat: 'yyyy-MM-dd'
});
</script>