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

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

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);`

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>
@@ -122,6 +130,16 @@ layui.use(['util', 'layer'], function(){
     }
   });
 
+  // 转换日期格式
+  var timer = null
+  var toDateString = function (format) {
+    var dateString = util.toDateString(new Date(), format);
+    $('#test3').html(dateString)
+  }
+  timer = setInterval(() => {
+    toDateString($('#test2').val())
+  }, 50)
+  
 });
 </script>
 </body>

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