diff --git a/components/cron-expression/cron-expression-input.component.ts b/components/cron-expression/cron-expression-input.component.ts
index 0d9c3c9271a..9f493e12bf8 100644
--- a/components/cron-expression/cron-expression-input.component.ts
+++ b/components/cron-expression/cron-expression-input.component.ts
@@ -11,7 +11,7 @@ import { CronChangeType, TimeType } from './typings';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cron-expression-input',
-  exportAs: 'nzCronExpression',
+  exportAs: 'nzCronExpressionInput',
   template: `
     <div class="ant-cron-expression-input">
       <input
diff --git a/components/cron-expression/cron-expression-label.component.ts b/components/cron-expression/cron-expression-label.component.ts
index be98dfd1e87..b3e2a8449dc 100644
--- a/components/cron-expression/cron-expression-label.component.ts
+++ b/components/cron-expression/cron-expression-label.component.ts
@@ -13,7 +13,7 @@ import { TimeType, TimeTypeError } from './typings';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cron-expression-label',
-  exportAs: 'nzCronExpression',
+  exportAs: 'nzCronExpressionLabel',
   template: `
     <div
       class="ant-cron-expression-label"
diff --git a/components/cron-expression/cron-expression-preview.component.ts b/components/cron-expression/cron-expression-preview.component.ts
new file mode 100644
index 00000000000..ddaf14c764f
--- /dev/null
+++ b/components/cron-expression/cron-expression-preview.component.ts
@@ -0,0 +1,68 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  TemplateRef
+} from '@angular/core';
+
+import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  selector: 'nz-cron-expression-preview',
+  exportAs: 'nzCronExpressionPreview',
+  template: `<div class="ant-collapse ant-collapse-borderless ant-cron-expression-preview">
+    <div class="ant-cron-expression-preview-dateTime" [class.ant-cron-expression-preview-dateTime-center]="!isExpand">
+      <ng-container *ngIf="visible; else cronError">
+        <ng-container *ngIf="!nzSemantic; else semanticTemplate">
+          {{ TimeList[0] | date: 'YYYY-MM-dd HH:mm:ss' }}
+        </ng-container>
+        <ng-template #semanticTemplate [ngTemplateOutlet]="nzSemantic"></ng-template>
+      </ng-container>
+      <ng-template #cronError>{{ locale.cronError }}</ng-template>
+    </div>
+    <div *ngIf="visible" class="ant-cron-expression-preview-content">
+      <div class="ant-cron-expression-preview-content-date">
+        <ng-container *ngIf="!isExpand">
+          <ul class="ant-cron-expression-preview-list">
+            <li *ngFor="let item of TimeList">
+              {{ item | date: 'YYYY-MM-dd HH:mm:ss' }}
+            </li>
+            <li><a (click)="loadMorePreview.emit()">···</a></li>
+          </ul>
+        </ng-container>
+      </div>
+      <ul class="ant-cron-expression-preview-icon">
+        <li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
+        <li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
+      </ul>
+    </div>
+  </div>`
+})
+export class NzCronExpressionPreviewComponent {
+  @Input() TimeList: Date[] = [];
+  @Input() @InputBoolean() visible: boolean = true;
+  @Input() locale!: NzCronExpressionCronErrorI18n;
+  @Input() nzSemantic: TemplateRef<void> | null = null;
+  @Output() readonly loadMorePreview = new EventEmitter<void>();
+
+  isExpand: boolean = true;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  setExpand(): void {
+    this.isExpand = !this.isExpand;
+    this.cdr.markForCheck();
+  }
+}
diff --git a/components/cron-expression/cron-expression.component.ts b/components/cron-expression/cron-expression.component.ts
index 78c59bfacb9..d0dea31f5d7 100644
--- a/components/cron-expression/cron-expression.component.ts
+++ b/components/cron-expression/cron-expression.component.ts
@@ -45,9 +45,9 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
     <div class="ant-cron-expression">
       <div class="ant-cron-expression-content">
         <div
-          class="ant-cron-expression-input-group"
-          [class.ant-cron-expression-input-group-lg]="nzSize === 'large'"
-          [class.ant-cron-expression-input-group-sm]="nzSize === 'small'"
+          class="ant-input ant-cron-expression-input-group"
+          [class.ant-input-lg]="nzSize === 'large'"
+          [class.ant-input-sm]="nzSize === 'small'"
           [class.ant-cron-expression-input-group-focus]="focus"
           [class.ant-cron-expression-input-group-error]="!validateForm.valid"
           [class.ant-cron-expression-input-group-error-focus]="!validateForm.valid && focus"
@@ -62,7 +62,12 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
             ></nz-cron-expression-input>
           </ng-container>
         </div>
-        <div class="ant-cron-expression-label-group">
+        <div
+          class="ant-cron-expression-label-group"
+          [class.ant-input-lg]="nzSize === 'large'"
+          [class.ant-cron-expression-label-group-default]="nzSize === 'default'"
+          [class.ant-input-sm]="nzSize === 'small'"
+        >
           <ng-container *ngFor="let label of labels">
             <nz-cron-expression-label
               [type]="label"
@@ -72,29 +77,18 @@ import { CronChangeType, CronType, NzCronExpressionSize, TimeType } from './typi
             ></nz-cron-expression-label>
           </ng-container>
         </div>
-        <nz-collapse *ngIf="!nzCollapseDisable" [nzBordered]="false">
-          <nz-collapse-panel [nzHeader]="nextDate">
-            <ng-container *ngIf="validateForm.valid">
-              <ul class="ant-cron-expression-preview-date">
-                <li *ngFor="let dateItem of nextTimeList">
-                  {{ dateItem | date: 'YYYY-MM-dd HH:mm:ss' }}
-                </li>
-                <li><a (click)="loadMorePreview()">···</a></li>
-              </ul>
-            </ng-container>
-            <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
-          </nz-collapse-panel>
-        </nz-collapse>
+        <nz-cron-expression-preview
+          *ngIf="!nzCollapseDisable"
+          [TimeList]="nextTimeList"
+          [visible]="validateForm.valid"
+          [locale]="locale"
+          [nzSemantic]="nzSemantic"
+          (loadMorePreview)="loadMorePreview()"
+        ></nz-cron-expression-preview>
       </div>
       <div class="ant-cron-expression-map" *ngIf="nzExtra">
         <ng-template [ngTemplateOutlet]="nzExtra"></ng-template>
       </div>
-      <ng-template #nextDate>
-        <ng-container *ngIf="validateForm.valid">
-          {{ dateTime | date: 'YYYY-MM-dd HH:mm:ss' }}
-        </ng-container>
-        <ng-container *ngIf="!validateForm.valid">{{ locale.cronError }}</ng-container>
-      </ng-template>
     </div>
   `,
   providers: [
@@ -115,6 +109,7 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
   @Input() nzType: 'linux' | 'spring' = 'linux';
   @Input() @InputBoolean() nzCollapseDisable: boolean = false;
   @Input() nzExtra?: TemplateRef<void> | null = null;
+  @Input() nzSemantic: TemplateRef<void> | null = null;
 
   locale!: NzCronExpressionI18nInterface;
   focus: boolean = false;
@@ -123,7 +118,6 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
   labels: TimeType[] = [];
   interval!: CronExpression<false>;
   nextTimeList: Date[] = [];
-  dateTime: Date = new Date();
   private destroy$ = new Subject<void>();
 
   validateForm!: UntypedFormGroup;
@@ -202,7 +196,6 @@ export class NzCronExpressionComponent implements OnInit, ControlValueAccessor,
   previewDate(value: CronType): void {
     try {
       this.interval = parseExpression(Object.values(value).join(' '));
-      this.dateTime = this.interval.next().toDate();
       this.nextTimeList = [
         this.interval.next().toDate(),
         this.interval.next().toDate(),
diff --git a/components/cron-expression/cron-expression.module.ts b/components/cron-expression/cron-expression.module.ts
index 7904478b960..93d5f164d03 100644
--- a/components/cron-expression/cron-expression.module.ts
+++ b/components/cron-expression/cron-expression.module.ts
@@ -15,10 +15,16 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 import { NzCronExpressionInputComponent } from './cron-expression-input.component';
 import { NzCronExpressionLabelComponent } from './cron-expression-label.component';
+import { NzCronExpressionPreviewComponent } from './cron-expression-preview.component';
 import { NzCronExpressionComponent } from './cron-expression.component';
 
 @NgModule({
-  declarations: [NzCronExpressionComponent, NzCronExpressionLabelComponent, NzCronExpressionInputComponent],
+  declarations: [
+    NzCronExpressionComponent,
+    NzCronExpressionLabelComponent,
+    NzCronExpressionInputComponent,
+    NzCronExpressionPreviewComponent
+  ],
   imports: [
     CommonModule,
     ReactiveFormsModule,
diff --git a/components/cron-expression/demo/semantic.md b/components/cron-expression/demo/semantic.md
new file mode 100644
index 00000000000..7008dd9a929
--- /dev/null
+++ b/components/cron-expression/demo/semantic.md
@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 自定义渲染 cron 时间
+  en-US: Custom rendering cron time
+---
+
+## zh-CN
+
+自定义渲染下次执行时间
+
+## en-US
+
+Custom rendering next execution time.
diff --git a/components/cron-expression/demo/semantic.ts b/components/cron-expression/demo/semantic.ts
new file mode 100644
index 00000000000..31529dda1ef
--- /dev/null
+++ b/components/cron-expression/demo/semantic.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+import { parseExpression } from 'cron-parser';
+
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+@Component({
+  selector: 'nz-demo-cron-expression-semantic',
+  template: ` <nz-cron-expression
+      [nzSemantic]="semanticTemplate"
+      [(ngModel)]="value"
+      (ngModelChange)="getValue($event)"
+    ></nz-cron-expression>
+    <ng-template #semanticTemplate>Next Time: {{ semantic | date: 'YYYY-MM-dd HH:mm:ss' }}</ng-template>`
+})
+export class NzDemoCronExpressionSemanticComponent {
+  value: string = '10 * * * *';
+  semantic?: Date;
+
+  getValue(value: string): void {
+    try {
+      const interval = parseExpression(value);
+      this.semantic = interval.next().toDate();
+    } catch (err: NzSafeAny) {
+      return;
+    }
+  }
+}
diff --git a/components/cron-expression/demo/use.md b/components/cron-expression/demo/use.md
index 4fbb2a4fcd8..0cb855218da 100644
--- a/components/cron-expression/demo/use.md
+++ b/components/cron-expression/demo/use.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 结合表单使用
   en-US: Basic
diff --git a/components/cron-expression/doc/index.en-US.md b/components/cron-expression/doc/index.en-US.md
index 5d3a9b7514d..b4baad3d655 100644
--- a/components/cron-expression/doc/index.en-US.md
+++ b/components/cron-expression/doc/index.en-US.md
@@ -37,4 +37,5 @@ npm install cron-parser
 | `[nzType]` | Cron rule type                                   | `'linux'｜'spring'`          | `linux`  |
 | `[nzSize]`   | The size of the input box.                       | `'large'｜'small'｜'default'` | `default` |
 | `[nzCollapseDisable]`  | Hide collapse                                    | `boolean`                   | `false`  |
-| `[nzExtra]`     | Render the content on the right                  | `TemplateRef<void>`         | -        |
\ No newline at end of file
+| `[nzExtra]`     | Render the content on the right                  | `TemplateRef<void>`         | -        |
+| `[nzSemantic]`     | Custom rendering next execution time | `TemplateRef<void>`         | -        |
\ No newline at end of file
diff --git a/components/cron-expression/doc/index.zh-CN.md b/components/cron-expression/doc/index.zh-CN.md
index b17ea22a71c..c49ee66f5d3 100644
--- a/components/cron-expression/doc/index.zh-CN.md
+++ b/components/cron-expression/doc/index.zh-CN.md
@@ -37,4 +37,5 @@ npm install cron-parser
 | `[nzType]` | cron 规则类型      | `'linux'｜'spring'`          | `linux`  |
 | `[nzSize]`     | 设置输入框大小        | `'large'｜'small'｜'default'` | `default` |
 | `[nzCollapseDisable]`  | 隐藏折叠面板         | `boolean`                   | `false`  |
-| `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
\ No newline at end of file
+| `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
+| `[nzSemantic]`     | 自定义渲染下次执行时间 | `TemplateRef<void>`         | -        |
\ No newline at end of file
diff --git a/components/cron-expression/style/index.less b/components/cron-expression/style/index.less
index 620b511d639..d039f7f7aac 100644
--- a/components/cron-expression/style/index.less
+++ b/components/cron-expression/style/index.less
@@ -13,18 +13,10 @@
     .@{cron-expression-prefix-cls}-input-group-error {
       border-color: @error-color;
       box-shadow: none;
-
-      &:hover {
-        border-color: @error-color;
-        box-shadow: none;
-      }
     }
 
     .@{cron-expression-prefix-cls}-input-group-error-focus {
-      box-shadow: 0 0 0 2px @error-color-outline;
-      &:hover {
-        box-shadow: 0 0 0 2px @error-color-outline;
-      }
+      box-shadow: 0 0 0 @outline-width @error-color-outline;
     }
   }
 
@@ -36,13 +28,6 @@
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    border: @border-width-base solid @border-color-base;
-    padding: @padding-xss @padding-sm;
-    border-radius: @border-radius-base;
-
-    &:hover {
-      border-color: @primary-color;
-    }
 
     input {
       border: none !important;
@@ -54,19 +39,9 @@
     }
   }
 
-  &-input-group-lg {
-    padding: 6.5px @padding-sm;
-    font-size: @font-size-lg;
-  }
-
-  &-input-group-sm {
-    padding: 0 @padding-sm;
-  }
-
   &-input-group-focus {
     border-color: @primary-color;
-    box-shadow: 0 0 0 2px @primary-color-outline;
-    border-right-width: @border-width-base;
+    box-shadow: 0 0 0 @outline-width @primary-color-outline;
     outline: 0;
   }
 
@@ -79,7 +54,11 @@
     width: 100%;
     flex-wrap: nowrap;
     justify-content: space-around;
-    padding: 0 @padding-sm;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    &-default {
+      padding: 0 @padding-sm;
+    }
   }
 
   &-label-foucs {
@@ -90,16 +69,50 @@
     margin-left: @margin-sm;
   }
 
-  &-preview-date {
-    overflow-y: scroll;
-    height: 132px;
-    margin: 0;
-    padding: 0;
-     li {
-       list-style: none;
-       margin: 0;
-       padding: 0;
-     }
+  &-preview {
+    display: flex;
+    padding: @padding-sm;
+
+    &-dateTime {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+
+      &-center {
+        justify-content: center;
+      }
+    }
+
+    &-content {
+      flex: 0 0 220px;
+      display: flex;
+      align-items: center;
+      padding-left: @padding-md;
+
+      &-date {
+        flex: 1 1 auto;
+      }
+    }
+
+    &-list, &-icon {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    &-list {
+      overflow-y: scroll;
+      height: 132px;
+    }
+
+    &-icon {
+      height: 100%;
+    }
   }
 
   &-error {
@@ -115,12 +128,4 @@
       min-width: 40px;
     }
   }
-}
-
-.ant-collapse > .ant-collapse-item > .ant-collapse-header {
-  padding: @padding-sm;
-}
-
-.ant-collapse-content > .ant-collapse-content-box {
-  padding: @padding-md @padding-lg+@padding-sm;
 }
\ No newline at end of file