Browse Source

优化 `util.toDateString`, 更多格式化占位符支持

优化 `util.toDateString`, 更多格式化占位符支持
pull/1315/head
贤心 1 year ago committed by GitHub
parent
commit
3deca33c1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 43
      docs/util/index.md
  2. 18
      examples/util.html
  3. 80
      src/modules/util.js

43
docs/util/index.md

@ -97,15 +97,56 @@ var result = util.timeAgo(1672531200000); // 2023-01-01 00:00:00
<h3 id="toDateString" class="ws-anchor ws-bold">转换日期格式字符</h3>
`var result = util.toDateString(time, format);`
`var result = util.toDateString(time, format, options);`
- 参数 `time` : 毫秒数或日期对象
- 参数 `format` : 日期字符格式。默认格式:`yyyy-MM-dd HH:mm:ss` 。可自定义,如: `yyyy年MM月dd日`
- 参数 `options` <sup>2.8.13+</sup> : 该方法的属性可选项,详见下表:
| 属性名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| customMeridiem | 自定义 meridiem 格式 | Function | - |
```
var result = util.toDateString(1672531200000, 'yyyy-MM-dd'); // 2023-01-01
// 中括号中的字符会原样保留 2.8.13+
var result2 = util.toDateString(new Date('2023-01-01 11:35:25'), 'ss[s]'); // 25s
// 自定义 meridiem
var result3 = util.toDateString(
'2023-01-01 11:35:25',
'hh:mm:ss A'
{
customMeridiem: function(hours, minutes){
return (hours < 12 ? 'AM' : 'PM')
//.split('').join('.') // 有句点,A.M.
//.toLowerCase() // 小写,a.m.
}
); // 11:35:25 AM
```
所有可用的格式列表
| 格式 | 示例 | 描述 |
| --- | --- | --- |
| yy <sup>2.8.13+</sup> | 23 | 年,两位数 |
| yyyy | 2023 | 年,四位数 |
| M <sup>2.8.13+</sup> | 1-12 | 月 |
| MM | 01-12 | 月,两位数 |
| d <sup>2.8.13+</sup> | 1-31 | 日 |
| dd | 01-31 | 日,两位数 |
| H <sup>2.8.13+</sup> | 0-23 | 小时 |
| HH | 00-23 | 小时,两位数 |
| h <sup>2.8.13+</sup> | 1-12 | 小时,12 小时制 |
| hh <sup>2.8.13+</sup> | 01-12 | 小时,12 小时制,两位数 |
| A <sup>2.8.13+</sup> | 凌晨/早上/上午/中午/下午/晚上 | meridiem |
| m <sup>2.8.13+</sup> | 0-59 | 分钟 |
| mm | 00-59 | 分钟,两位数 |
| s <sup>2.8.13+</sup> | 0-59 | 秒 |
| ss | 00-59 | 秒,两位数 |
| SSS <sup>2.8.13+</sup> | 000-999 | 毫秒,三位数 |
<h3 id="digit" class="ws-anchor ws-bold">数字前置补零</h3>
`util.digit(num, length);`

18
examples/util.html

@ -29,6 +29,14 @@ body{padding: 50px;}
<hr>
请编辑格式:
<div class="layui-inline">
<input type="text" value="yyyy-MM-dd HH:mm:ss" class="layui-input" id="test2"/>
</div>
<span class="layui-word-aux" id="test3"></span>
<hr>
<div id="target-test" style1="position: relative; height: 300px; overflow: auto;">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>
@ -121,6 +129,16 @@ layui.use(['util', 'layer'], function(){
alert(othis.html())
}
});
// 转换日期格式
var timer = null
var toDateString = function (format) {
var dateString = util.toDateString(new Date(), format);
$('#test3').html(dateString)
}
timer = setInterval(() => {
toDateString($('#test2').val())
}, 50)
});
</script>

80
src/modules/util.js

@ -254,35 +254,71 @@ layui.define('jquery', function(exports){
},
// 转化为日期格式字符
toDateString: function(time, format){
//若 null 或空字符,则返回空字符
toDateString: function(time, format, options){
// 若 null 或空字符,则返回空字符
if(time === null || time === '') return '';
var that = this
,date = new Date(function(){
// 引用自 dayjs
// https://github.com/iamkun/dayjs/blob/v1.11.9/src/constant.js#L30
var REGEX_FORMAT = /\[([^\]]+)]|y{1,4}|M{1,2}|d{1,2}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|SSS/g;
var that = this;
var date = new Date(function(){
if(!time) return;
return isNaN(time) ? time : (typeof time === 'string' ? parseInt(time) : time)
}() || new Date())
,ymd = [
that.digit(date.getFullYear(), 4)
,that.digit(date.getMonth() + 1)
,that.digit(date.getDate())
]
,hms = [
that.digit(date.getHours())
,that.digit(date.getMinutes())
,that.digit(date.getSeconds())
];
if(!date.getDate()) return hint.error('Invalid Msec for "util.toDateString(Msec)"'), '';
var years = date.getFullYear();
var month = date.getMonth();
var days = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliseconds = date.getMilliseconds();
var defaultMeridiem = function(hours, minutes){
var hm = hours * 100 + minutes;
if (hm < 600) {
return '凌晨';
} else if (hm < 900) {
return '早上';
} else if (hm < 1100) {
return '上午';
} else if (hm < 1300) {
return '中午';
} else if (hm < 1800) {
return '下午';
}
return '晚上';
};
var meridiem = (options && options.customMeridiem) || defaultMeridiem;
var matches = {
yy: function(){return String(years).slice(-2);},
yyyy: function(){return that.digit(years, 4);},
M: function(){return String(month + 1);},
MM: function(){return that.digit(month + 1);},
d: function(){return String(days);},
dd: function(){return that.digit(days);},
H: function(){return String(hours);},
HH: function(){return that.digit(hours);},
h: function(){return String(hours % 12 || 12);},
hh: function(){return that.digit(hours % 12 || 12);},
A: function(){return meridiem(hours, minutes);},
m: function(){return String(minutes);},
mm: function(){return that.digit(minutes);},
s: function(){return String(seconds);},
ss: function(){return that.digit(seconds);},
SSS: function(){return that.digit(milliseconds, 3);}
}
format = format || 'yyyy-MM-dd HH:mm:ss';
return format.replace(/yyyy/g, ymd[0])
.replace(/MM/g, ymd[1])
.replace(/dd/g, ymd[2])
.replace(/HH/g, hms[0])
.replace(/mm/g, hms[1])
.replace(/ss/g, hms[2]);
return format.replace(REGEX_FORMAT, function(match, $1) {
return $1 || (matches[match] && matches[match]()) || match;
});
},
// 转义 html

Loading…
Cancel
Save