docs(laydate): 优化农历预览显示 (#1855)

docs/laydate/examples/cell.md

@@ -93,13 +93,20 @@
       btns: ['now'],
       theme: 'lunar',
       autoConfirm: false,
-      ready: function () {
+      ready: function (date) {
         if (!this._previewEl) {
           var key = this.elem.attr('lay-key');
           var panelEl = $('#layui-laydate' + key);
           this._previewEl = panelEl.find('.layui-laydate-preview');
+          this.cellRender(date);
         }
       },
+      change: function(value, date) {
+        this.cellRender(date);
+      },
+      onNow: function(value, date) {
+        this.cellRender(date);
+      },
       cellRender: function (ymd, render, info) {
         var that = this;
         var y = ymd.year;
@@ -112,6 +119,30 @@
         var displayHoliday = holiday && holiday.getTarget() === holiday.getDay() ? holiday.getName() : undefined;
         var displayHolidayBadge = holiday && holiday.getTarget() ? (holiday.isWork() ? '班' : '休') : undefined;
         var isHoliday = holiday && holiday.getTarget() && !holiday.isWork();
+        // 在预览区显示自定义农历相关信息
+        if (that._previewEl && (!info || (info && info.type === "date"))) {
+          var holidayBadgeStyle = [
+            'color:#fff',
+            'background-color:' + (isHoliday ? '#eb3333' : '#333'),
+            'display:' + (displayHolidayBadge ? 'inline-block' : 'none')
+          ].join(';')
+          var festivalBadgeStyle = [
+            'color:#fff',
+            'background-color:#1e9fff',
+            'display:' + (displayHoliday || jieQi ? 'inline-block' : 'none')
+          ].join(';')
+          var tipsText = [
+            '<div class="preview-inner">',
+              '<div style="color:#333;">农历' + lunarDate.getMonthInChinese() + '月' + lunarDate.getDayInChinese() + '</div>',
+              '<div style="font-size:10px">' + lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao() + '年</div>',
+              '<div style="font-size:10px">' + lunarDate.getMonthInGanZhi() + '月 ' + lunarDate.getDayInGanZhi() + '日</div>',
+              '<div class="badge" style="' + holidayBadgeStyle  +'">' + displayHolidayBadge + '</div>',
+              '<div class="badge" style="'+ festivalBadgeStyle +'">' + (displayHoliday || jieQi) + '</div>',
+            '</div>'
+          ].join('');
+          that._previewEl.html(tipsText);
+        };
+        if (!render) return;
         // 面板类型
         if (info.type === 'date') {
           var clazz = [
@@ -136,28 +167,6 @@
               zIndex: 999999999,
             });
           });
-          contentEl.on('click', function () {
-            var holidayBadgeStyle = [
-              'color:#fff',
-              'background-color:' + (isHoliday ? '#eb3333' : '#333'),
-              'display:' + (displayHolidayBadge ? 'inline-block' : 'none')
-            ].join(';')
-            var festivalBadgeStyle = [
-              'color:#fff',
-              'background-color:#1e9fff',
-              'display:' + (displayHoliday || jieQi ? 'inline-block' : 'none')
-            ].join(';')
-            var tipsText = [
-              '<div class="preview-inner">',
-                '<div style="color:#333;">农历' + lunarDate.getMonthInChinese() + '月' + lunarDate.getDayInChinese() + '</div>',
-                '<div style="font-size:10px">' + lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao() + '年</div>',
-                '<div style="font-size:10px">' + lunarDate.getMonthInGanZhi() + '月 ' + lunarDate.getDayInGanZhi() + '日</div>',
-                '<div class="badge" style="' + holidayBadgeStyle  +'">' + displayHolidayBadge + '</div>',
-                '<div class="badge" style="'+ festivalBadgeStyle +'">' + (displayHoliday || jieQi) + '</div>',
-              '</div>'
-            ].join('');
-            that._previewEl.html(tipsText);
-          });
           render(contentEl);
         } else if (info.type === 'year') {
           var lunarDate = Lunar.fromDate(new Date(y + 1, 0));