diff --git a/src/packages/calendar/__tests__/calendar.spec.tsx b/src/packages/calendar/__tests__/calendar.spec.tsx
index b4788aa577..a21f11c3c4 100644
--- a/src/packages/calendar/__tests__/calendar.spec.tsx
+++ b/src/packages/calendar/__tests__/calendar.spec.tsx
@@ -1,14 +1,10 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { CalendarDay } from '@/packages/calendar/types'
 
 import { Calendar } from '../calendar'
 
-interface Day {
-  day: string | number
-  type: string
-}
-
 test('show-title prop', async () => {
   const { container, rerender } = render(
     <Calendar
@@ -93,11 +89,11 @@ test('should render slot correctly', async () => {
     return <div className="d_div"> 最近七天</div>
   }
 
-  const renderDay = (date: Day) => {
+  const renderDay = (date: CalendarDay) => {
     return <span>custom{date.day}</span>
   }
 
-  const renderDayBottom = (date: Day) => {
+  const renderDayBottom = (date: CalendarDay) => {
     return <span>{Number(date.day) <= 10 ? '上旬' : '下旬'}</span>
   }
 
diff --git a/src/packages/calendar/calendar.taro.tsx b/src/packages/calendar/calendar.taro.tsx
index 91cbbac05b..f4fd74bd35 100644
--- a/src/packages/calendar/calendar.taro.tsx
+++ b/src/packages/calendar/calendar.taro.tsx
@@ -3,13 +3,9 @@ import Popup from '@/packages/popup/index.taro'
 import CalendarItem from '@/packages/calendaritem/index.taro'
 import { Utils } from '@/utils/date'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
-import type { CalendarDay, CalendarType } from './types'
+import type { CalendarDay, CalendarType, CalendarRef } from './types'
 import { ComponentDefaults } from '@/utils/typings'
 
-type CalendarRef = {
-  scrollToDate: (date: string) => void
-}
-
 export interface CalendarProps {
   type?: CalendarType
   autoBackfill?: boolean
diff --git a/src/packages/calendar/calendar.tsx b/src/packages/calendar/calendar.tsx
index 829df9ec34..f17ed9ad5c 100644
--- a/src/packages/calendar/calendar.tsx
+++ b/src/packages/calendar/calendar.tsx
@@ -3,13 +3,9 @@ import Popup from '@/packages/popup'
 import CalendarItem from '@/packages/calendaritem'
 import { Utils } from '@/utils/date'
 import { useConfig } from '@/packages/configprovider'
-import type { CalendarDay, CalendarType } from './types'
+import type { CalendarDay, CalendarType, CalendarRef } from './types'
 import { ComponentDefaults } from '@/utils/typings'
 
-type CalendarRef = {
-  scrollToDate: (date: string) => void
-}
-
 export interface CalendarProps {
   type?: CalendarType
   autoBackfill?: boolean
diff --git a/src/packages/calendar/demo.taro.tsx b/src/packages/calendar/demo.taro.tsx
index 4377695196..7bee1cfbf3 100644
--- a/src/packages/calendar/demo.taro.tsx
+++ b/src/packages/calendar/demo.taro.tsx
@@ -1,42 +1,23 @@
-import React, { useState, useRef } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import { Cell, Calendar, DatePicker } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
-import { Utils } from '@/utils/date'
 import '@/packages/calendar/demo.scss'
-import { padZero } from '@/utils/pad-zero'
 
-interface Day {
-  day: string | number
-  type: string
-}
-interface T {
-  ce5c5446: string
-  c38a08ef: string
-  b840c88f: string
-  a74a1fd4: string
-  '8dab2f66': string
-  '8dab2f67': string
-  '8dab2f68': string
-  cfbdc781: string
-  c3a3a1d2: string
-  e51e4582: string
-  '7db1a8b2': string
-  '7db1a8b3': string
-  '7db1a8b4': string
-  '7db1a8b5': string
-  a52bef0c: string
-  d04fcbda: string
-  '0aaad620': string
-  '60a53514': string
-  '781b07fd': string
-  '1076d771': string
-  '6ab47cd2': string
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
+import Demo10 from './demos/taro/demo10'
+import Demo11 from './demos/taro/demo11'
 
 const CalendarDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       ce5c5446: '基础用法',
       c38a08ef: '选择单个日期',
@@ -107,522 +88,40 @@ const CalendarDemo = () => {
       '6ab47cd2': 'This Month',
     },
   })
-  const d = new Date()
-  const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
-  const [date, setDate] = useState(currDay)
-  const [date1, setDate1] = useState(['2023-01-23', '2023-11-26'])
-  const [date3, setDate3] = useState('')
-  const [date4, setDate4] = useState<string[]>([])
-  const [date40, setDate40] = useState<string[]>([])
-  const [date41, setDate41] = useState<string[]>([])
-  const [date42, setDate42] = useState<string[]>([])
-  const [date5, setDate5] = useState<string[]>(['2023-03-23', '2023-11-26'])
-  const [date6, setDate6] = useState<string[]>(['2023-06-12', '2023-06-16'])
-  const [date7, setDate7] = useState<string[]>(['2023-07-10', '2023-07-19'])
-  const [date8, setDate8] = useState<string[]>(['2023-06-03', '2023-06-16'])
-  const [dateWeek, setDateWeek] = useState('')
-  const [isVisible, setIsVisible] = useState(false)
-  const [isVisible1, setIsVisible1] = useState(false)
-  const [isVisible3, setIsVisible3] = useState(false)
-  const [isVisible4, setIsVisible4] = useState(false)
-  const [isVisible40, setIsVisible40] = useState(false)
-  const [isVisible41, setIsVisible41] = useState(false)
-  const [isVisible42, setIsVisible42] = useState(false)
-  const [isVisible5, setIsVisible5] = useState(false)
-  const [isVisible6, setIsVisible6] = useState(false)
-  const [isVisible7, setIsVisible7] = useState(false)
-
-  const calendarRef = useRef<any>(null)
-
-  const openSwitch = () => {
-    setIsVisible(true)
-  }
-
-  const openSwitch1 = () => {
-    setIsVisible1(true)
-  }
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-  const openSwitch4 = () => {
-    setIsVisible4(true)
-  }
-  const openSwitch40 = () => {
-    setIsVisible40(true)
-  }
-  const openSwitch41 = () => {
-    setIsVisible41(true)
-  }
-  const openSwitch42 = () => {
-    setIsVisible42(true)
-  }
-  const openSwitch5 = () => {
-    setIsVisible5(true)
-  }
-  const openSwitch6 = () => {
-    setIsVisible6(true)
-  }
-  const openSwitch7 = () => {
-    setIsVisible7(true)
-  }
-  const closeSwitch = () => {
-    setIsVisible(false)
-  }
-
-  const closeSwitch1 = () => {
-    setIsVisible1(false)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const closeSwitch4 = () => {
-    setIsVisible4(false)
-  }
-  const closeSwitch40 = () => {
-    setIsVisible40(false)
-  }
-  const closeSwitch41 = () => {
-    setIsVisible41(false)
-  }
-  const closeSwitch42 = () => {
-    setIsVisible42(false)
-  }
-  const closeSwitch5 = () => {
-    setIsVisible5(false)
-  }
-
-  const closeSwitch6 = () => {
-    setIsVisible6(false)
-  }
-
-  const closeSwitch7 = () => {
-    setIsVisible7(false)
-  }
-
-  const setChooseValue = (param: string) => {
-    setDate(param[3])
-    setDateWeek(param[4])
-  }
-
-  const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]])
-  }
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  const setChooseValue4 = (chooseData: any) => {
-    const dateArr = chooseData.map((item: any) => {
-      return item[3]
-    })
-    setDate4([...dateArr])
-  }
-  const setChooseValue40 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate40([...dateArr])
-  }
-  const setChooseValue41 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate41([...dateArr])
-  }
-
-  const setChooseValue42 = (chooseData: any) => {
-    console.log(
-      'setChooseValue42',
-      [...[chooseData[0][3], chooseData[1][3]]],
-      chooseData
-    )
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate42([...dateArr])
-  }
-  const setChooseValue5 = (param: string) => {
-    setDate5([...[param[0][3], param[1][3]]])
-  }
-
-  const setChooseValue6 = (param: string) => {
-    setDate6([...[param[0][3], param[1][3]]])
-  }
 
-  const setChooseValue7 = (param: string) => {
-    setDate7([...[param[0][3], param[1][3]]])
-  }
+  return (
+    <>
+      <Header />
+      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <h2>{translated.ce5c5446}</h2>
 
-  const setChooseValue8 = (param: string) => {
-    setDate8([...[param[0][3], param[1][3]]])
-  }
-  const select = (param: string) => {
-    console.log(param)
-  }
+        <Demo1 />
 
-  const yearMonthChange = (param: string) => {
-    console.log(param)
-  }
+        <Demo2 />
 
-  const goDate = () => {
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate('2023-04-01')
-    }
-  }
+        <Demo3 />
 
-  const clickBtn = () => {
-    const date = [Utils.date2Str(new Date()), Utils.getDay(6)]
-    setDate7(date)
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(date[0])
-    }
-  }
+        <Demo4 />
 
-  const clickBtn1 = () => {
-    const date = new Date()
-    const year = date.getFullYear()
-    let month: any = date.getMonth() + 1
-    month = month < 10 ? `0${month}` : `${month}`
-    const yearMonth = `${year}-${month}`
-    const currMonthDays = Utils.getMonthDays(`${year}`, `${month}`)
-    setDate7([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(`${yearMonth}-01`)
-    }
-  }
-  const disableDate = (date: Day) => {
-    return date.day === 25 || date.day === 20 || date.day === 22
-  }
+        <Demo5 />
 
-  const renderDay = (date: Day) => {
-    return <>{padZero(date.day)}</>
-  }
-  const renderDayTop = (date: Day) => {
-    let currDate = ''
-    if (date && date.day === 10) {
-      currDate = '☺'
-    }
-    return <span className="info">{currDate}</span>
-  }
+        <Demo6 />
 
-  const renderDayBottom = (date: Day) => {
-    let currDate = ''
-    if (date && date.day === 10) {
-      currDate = '纪念日'
-    }
-    return <span className="info">{currDate}</span>
-  }
+        <h2>{translated.cfbdc781}</h2>
 
-  const renderHeaderButtons = () => {
-    return (
-      <div className="wrapper">
-        <div className="d_div">
-          <span className="d_btn" onClick={goDate}>
-            {translated['781b07fd']}
-          </span>
-        </div>
-        <div className="d_div">
-          <span className="d_btn" onClick={clickBtn}>
-            {translated['1076d771']}
-          </span>
-        </div>
-        <div className="d_div">
-          <span className="d_btn" onClick={clickBtn1}>
-            {translated['6ab47cd2']}
-          </span>
-        </div>
-      </div>
-    )
-  }
+        <Demo7 />
 
-  const [show1, setShow1] = useState(false)
-  const [dpAbled, setDatePickerAbled] = useState([false, false])
-  const [desc1, setDesc1] = useState('10:00:00')
-  const [desc2, setDesc2] = useState('20:00:00')
-  const desc = useRef(0)
-  const confirm1 = (values: (string | number)[], options: any[]) => {
-    if (desc.current === 1) {
-      setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    } else {
-      setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    }
-  }
-  const showDatePicker = (e: any, index: number) => {
-    if (dpAbled[index - 1]) {
-      e.stopPropagation()
-      setShow1(true)
-      desc.current = index
-    }
-  }
-  return (
-    <>
-      <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.ce5c5446}</h2>
-        <Cell
-          title={translated.c38a08ef}
-          description={date ? `${date} ${dateWeek}` : translated.b840c88f}
-          onClick={openSwitch}
-        />
-        <Calendar
-          visible={isVisible}
-          showTitle={false}
-          defaultValue={date}
-          onClose={closeSwitch}
-          onConfirm={setChooseValue}
-          onDayClick={select}
-        />
-        <Cell
-          title={translated.a74a1fd4}
-          description={
-            date1
-              ? `${date1[0]}${translated['8dab2f66']}${date1[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch1}
-        />
-        <Calendar
-          visible={isVisible1}
-          defaultValue={date1}
-          type="range"
-          startDate="2022-12-22"
-          endDate="2024-01-08"
-          onClose={closeSwitch1}
-          onConfirm={setChooseValue1}
-          onDayClick={select}
-        />
-        <Cell
-          title={translated['7db1a8b2']}
-          description={
-            date4 && date4.length
-              ? `${translated.a52bef0c}${date4.length}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch4}
-        />
-        <Calendar
-          visible={isVisible4}
-          defaultValue={date4}
-          type="multiple"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          onClose={closeSwitch4}
-          onConfirm={setChooseValue4}
-        />
-        <Cell
-          title={translated['7db1a8b3']}
-          description={
-            date40 && date40.length
-              ? `${date40[0]}${translated['8dab2f66']}${date40[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch40}
-        />
-        <Calendar
-          visible={isVisible40}
-          defaultValue={date40}
-          type="week"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          firstDayOfWeek={1}
-          onClose={closeSwitch40}
-          onConfirm={setChooseValue40}
-        />
+        <Demo8 />
 
-        <Cell
-          title={translated['7db1a8b4']}
-          description={
-            date41 && date41.length
-              ? `${date41[0]}${translated['8dab2f66']}${date41[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch41}
-        />
-        <Calendar
-          visible={isVisible41}
-          defaultValue={date41}
-          type="week"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onClose={closeSwitch41}
-          onConfirm={setChooseValue41}
-        />
+        <h2>{translated.d04fcbda}</h2>
 
-        <Cell
-          title={translated['7db1a8b5']}
-          description={
-            <div className="desc-box">
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[0]} ${desc1}`
-                  : translated['8dab2f67']}
-              </div>
-              <div className="desc1">-</div>
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[1]} ${desc2}`
-                  : translated['8dab2f68']}
-              </div>
-            </div>
-          }
-        />
-        <Calendar
-          visible={isVisible42}
-          defaultValue={date42}
-          type="range"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onDayClick={(date) => {
-            let d = [false, false]
-            if (date.length > 1) {
-              d = [true, true]
-            } else if (date.length > 0) {
-              d = [true, false]
-            }
-            setDatePickerAbled(d)
-          }}
-          onClose={closeSwitch42}
-          onConfirm={setChooseValue42}
-        >
-          <div className="nut-calendar-btns">
-            <div
-              className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 1)
-              }}
-            >
-              开始时间：{desc1}
-            </div>
-            -
-            <div
-              className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 2)
-              }}
-            >
-              结束时间：{desc2}
-            </div>
-          </div>
-          <DatePicker
-            title="时间选择"
-            type="time"
-            visible={show1}
-            showChinese
-            onClose={() => setShow1(false)}
-            onConfirm={(options, values) => confirm1(values, options)}
-          />
-        </Calendar>
+        <Demo9 />
 
-        <h2>{translated.cfbdc781}</h2>
-        <Cell
-          title={translated.c3a3a1d2}
-          description={date3 ? `${date3}` : translated.b840c88f}
-          onClick={openSwitch3}
-        />
-        <Calendar
-          visible={isVisible3}
-          defaultValue={date3}
-          startDate=""
-          endDate=""
-          autoBackfill
-          onClose={closeSwitch3}
-          onConfirm={setChooseValue3}
-        />
-        <Cell
-          title={translated.a74a1fd4}
-          description={
-            date1
-              ? `${date5[0]}${translated['8dab2f66']}${date5[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch5}
-        />
-        <Calendar
-          visible={isVisible5}
-          defaultValue={date5}
-          type="range"
-          autoBackfill
-          startDate="2022-12-22"
-          endDate="2024-01-08"
-          onClose={closeSwitch5}
-          onConfirm={setChooseValue5}
-          onDayClick={select}
-        />
-        <h2>{translated.d04fcbda}</h2>
-        <Cell
-          title={translated['60a53514']}
-          description={
-            date6
-              ? `${date6[0]}${translated['8dab2f66']}${date6[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch6}
-        />
-        <Calendar
-          visible={isVisible6}
-          defaultValue={date6}
-          type="range"
-          startDate="2023-2-22"
-          endDate="2024-01-08"
-          confirmText="submit"
-          startText="enter"
-          endText="leave"
-          renderDay={renderDay}
-          renderDayTop={renderDayTop}
-          renderDayBottom={renderDayBottom}
-          showToday
-          onClose={closeSwitch6}
-          onConfirm={setChooseValue6}
-        />
+        <Demo10 />
 
-        <Cell
-          title={translated['0aaad620']}
-          description={
-            date7
-              ? `${date7[0]}${translated['8dab2f66']}${date7[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch7}
-        />
-        <Calendar
-          ref={calendarRef}
-          visible={isVisible7}
-          defaultValue={date7}
-          type="range"
-          startDate="2022-12-22"
-          endDate="2024-12-31"
-          renderHeaderButtons={renderHeaderButtons}
-          onClose={closeSwitch7}
-          onConfirm={setChooseValue7}
-        />
         <h2>{translated.e51e4582}</h2>
-        <div
-          className="test-calendar-wrapper"
-          style={{
-            display: 'flex',
-            width: '100%',
-            height: '613px',
-            overflow: 'hidden',
-          }}
-        >
-          <Calendar
-            popup={false}
-            defaultValue={date8}
-            type="range"
-            startDate="2023-5-23"
-            endDate="2023-08-01"
-            startText={<div>test</div>}
-            endText="leave"
-            autoBackfill
-            onConfirm={setChooseValue8}
-            onPageChange={yearMonthChange}
-          />
-        </div>
+
+        <Demo11 />
       </div>
     </>
   )
diff --git a/src/packages/calendar/demo.tsx b/src/packages/calendar/demo.tsx
index b5cd4081aa..03d93d8cb3 100644
--- a/src/packages/calendar/demo.tsx
+++ b/src/packages/calendar/demo.tsx
@@ -1,43 +1,20 @@
-import React, { useState, useRef } from 'react'
-import { Calendar } from './calendar'
-import { Cell } from '@/packages/cell/cell'
-import DatePicker from '@/packages/datepicker/index'
-import { Utils } from '@/utils/date'
-import { useTranslate } from '../../sites/assets/locale'
-
+import React from 'react'
+import { useTranslate } from '@/sites/assets/locale'
 import './demo.scss'
-import { padZero } from '@/utils/pad-zero'
-
-interface Day {
-  day: string | number
-  type: string
-}
-interface T {
-  ce5c5446: string
-  c38a08ef: string
-  b840c88f: string
-  a74a1fd4: string
-  '8dab2f66': string
-  '8dab2f67': string
-  '8dab2f68': string
-  cfbdc781: string
-  c3a3a1d2: string
-  e51e4582: string
-  '7db1a8b2': string
-  '7db1a8b3': string
-  '7db1a8b4': string
-  '7db1a8b5': string
-  a52bef0c: string
-  d04fcbda: string
-  '0aaad620': string
-  '60a53514': string
-  '781b07fd': string
-  '1076d771': string
-  '6ab47cd2': string
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
+import Demo10 from './demos/h5/demo10'
+import Demo11 from './demos/h5/demo11'
 
 const CalendarDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       ce5c5446: '基础用法',
       c38a08ef: '选择单个日期',
@@ -108,526 +85,39 @@ const CalendarDemo = () => {
       '6ab47cd2': 'This Month',
     },
   })
-  const d = new Date()
-  const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
-  const [date, setDate] = useState(currDay)
-  const [date1, setDate1] = useState(['2023-01-23', '2023-11-26'])
-  const [date3, setDate3] = useState('')
-  const [date4, setDate4] = useState<string[]>([])
-  const [date40, setDate40] = useState<string[]>([])
-  const [date41, setDate41] = useState<string[]>([])
-  const [date42, setDate42] = useState<string[]>([])
-  const [date5, setDate5] = useState<string[]>(['2023-03-23', '2023-11-26'])
-  const [date6, setDate6] = useState<string[]>(['2023-06-12', '2023-06-16'])
-  const [date7, setDate7] = useState<string[]>(['2023-07-10', '2023-07-19'])
-  const [date8, setDate8] = useState<string[]>(['2023-06-03', '2023-06-16'])
-  const [dateWeek, setDateWeek] = useState('')
-  const [isVisible, setIsVisible] = useState(false)
-  const [isVisible1, setIsVisible1] = useState(false)
-  const [isVisible3, setIsVisible3] = useState(false)
-  const [isVisible4, setIsVisible4] = useState(false)
-  const [isVisible40, setIsVisible40] = useState(false)
-  const [isVisible41, setIsVisible41] = useState(false)
-  const [isVisible42, setIsVisible42] = useState(false)
-  const [isVisible5, setIsVisible5] = useState(false)
-  const [isVisible6, setIsVisible6] = useState(false)
-  const [isVisible7, setIsVisible7] = useState(false)
-
-  const calendarRef = useRef<any>(null)
-
-  const openSwitch = () => {
-    setIsVisible(true)
-  }
-
-  const openSwitch1 = () => {
-    setIsVisible1(true)
-  }
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-  const openSwitch4 = () => {
-    setIsVisible4(true)
-  }
-  const openSwitch40 = () => {
-    setIsVisible40(true)
-  }
-  const openSwitch41 = () => {
-    setIsVisible41(true)
-  }
-  const openSwitch42 = () => {
-    setIsVisible42(true)
-  }
-  const openSwitch5 = () => {
-    setIsVisible5(true)
-  }
-  const openSwitch6 = () => {
-    setIsVisible6(true)
-  }
-  const openSwitch7 = () => {
-    setIsVisible7(true)
-  }
-  const closeSwitch = () => {
-    setIsVisible(false)
-  }
-
-  const closeSwitch1 = () => {
-    setIsVisible1(false)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const closeSwitch4 = () => {
-    setIsVisible4(false)
-  }
-  const closeSwitch40 = () => {
-    setIsVisible40(false)
-  }
-  const closeSwitch41 = () => {
-    setIsVisible41(false)
-  }
-  const closeSwitch42 = () => {
-    setIsVisible42(false)
-  }
-  const closeSwitch5 = () => {
-    setIsVisible5(false)
-  }
-
-  const closeSwitch6 = () => {
-    setIsVisible6(false)
-  }
-
-  const closeSwitch7 = () => {
-    setIsVisible7(false)
-  }
-
-  const setChooseValue = (param: string) => {
-    setDate(param[3])
-    setDateWeek(param[4])
-  }
-
-  const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]])
-  }
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  const setChooseValue4 = (chooseData: any) => {
-    const dateArr = chooseData.map((item: any) => {
-      return item[3]
-    })
-    setDate4([...dateArr])
-  }
-  const setChooseValue40 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate40([...dateArr])
-  }
-  const setChooseValue41 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate41([...dateArr])
-  }
-
-  const setChooseValue42 = (chooseData: any) => {
-    console.log(
-      'setChooseValue42',
-      [...[chooseData[0][3], chooseData[1][3]]],
-      chooseData
-    )
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate42([...dateArr])
-  }
-  const setChooseValue5 = (param: string) => {
-    setDate5([...[param[0][3], param[1][3]]])
-  }
 
-  const setChooseValue6 = (param: string) => {
-    setDate6([...[param[0][3], param[1][3]]])
-  }
-
-  const setChooseValue7 = (param: string) => {
-    setDate7([...[param[0][3], param[1][3]]])
-  }
-
-  const setChooseValue8 = (param: string) => {
-    setDate8([...[param[0][3], param[1][3]]])
-  }
-  const select = (param: string) => {
-    console.log(param)
-  }
-
-  const yearMonthChange = (param: string) => {
-    console.log(param)
-  }
-
-  const goDate = () => {
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate('2023-04-01')
-    }
-  }
-
-  const clickBtn = () => {
-    const date = [Utils.date2Str(new Date()), Utils.getDay(6)]
-    setDate7(date)
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(date[0])
-    }
-  }
-
-  const clickBtn1 = () => {
-    const date = new Date()
-    const year = date.getFullYear()
-    let month: any = date.getMonth() + 1
-    month = month < 10 ? `0${month}` : `${month}`
-    const yearMonth = `${year}-${month}`
-    const currMonthDays = Utils.getMonthDays(`${year}`, `${month}`)
-    setDate7([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(`${yearMonth}-01`)
-    }
-  }
-  const disableDate = (date: Day) => {
-    return date.day === 25 || date.day === 20 || date.day === 22
-  }
-
-  const renderDay = (date: Day) => {
-    return <>{padZero(date.day)}</>
-  }
-  const renderDayTop = (date: Day) => {
-    let currDate = ''
-    if (date && date.day === 10) {
-      currDate = '☺'
-    }
-    return <span className="info">{currDate}</span>
-  }
-
-  const renderDayBottom = (date: Day) => {
-    let currDate = ''
-    if (date && date.day === 10) {
-      currDate = '纪念日'
-    }
-    return <span className="info">{currDate}</span>
-  }
-
-  const renderHeaderButtons = () => {
-    return (
-      <div className="wrapper">
-        <div className="d_div">
-          <span className="d_btn" onClick={goDate}>
-            {translated['781b07fd']}
-          </span>
-        </div>
-        <div className="d_div">
-          <span className="d_btn" onClick={clickBtn}>
-            {translated['1076d771']}
-          </span>
-        </div>
-        <div className="d_div">
-          <span className="d_btn" onClick={clickBtn1}>
-            {translated['6ab47cd2']}
-          </span>
-        </div>
-      </div>
-    )
-  }
-
-  const [show1, setShow1] = useState(false)
-  const [dpAbled, setDatePickerAbled] = useState([false, false])
-  const [desc1, setDesc1] = useState('10:00:00')
-  const [desc2, setDesc2] = useState('20:00:00')
-  const desc = useRef(0)
-  const confirm1 = (values: (string | number)[], options: any[]) => {
-    if (desc.current === 1) {
-      setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    } else {
-      setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    }
-  }
-  const showDatePicker = (e: any, index: number) => {
-    if (dpAbled[index - 1]) {
-      e.stopPropagation()
-      setShow1(true)
-      desc.current = index
-    }
-  }
   return (
     <>
       <div className="demo">
         <h2>{translated.ce5c5446}</h2>
-        <Cell
-          title={translated.c38a08ef}
-          description={date ? `${date} ${dateWeek}` : translated.b840c88f}
-          onClick={openSwitch}
-        />
 
-        <Calendar
-          visible={isVisible}
-          showTitle={false}
-          defaultValue={date}
-          onClose={closeSwitch}
-          onConfirm={setChooseValue}
-          onDayClick={select}
-        />
+        <Demo1 />
 
-        <Cell
-          title={translated.a74a1fd4}
-          description={
-            date1
-              ? `${date1[0]}${translated['8dab2f66']}${date1[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch1}
-        />
-        <Calendar
-          visible={isVisible1}
-          defaultValue={date1}
-          type="range"
-          startDate="2022-12-22"
-          endDate="2024-01-08"
-          onClose={closeSwitch1}
-          onConfirm={setChooseValue1}
-          onDayClick={select}
-        />
+        <Demo2 />
 
-        <Cell
-          title={translated['7db1a8b2']}
-          description={
-            date4 && date4.length
-              ? `${translated.a52bef0c}${date4.length}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch4}
-        />
-        <Calendar
-          visible={isVisible4}
-          defaultValue={date4}
-          type="multiple"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          onClose={closeSwitch4}
-          onConfirm={setChooseValue4}
-        />
+        <Demo3 />
 
-        <Cell
-          title={translated['7db1a8b3']}
-          description={
-            date40 && date40.length
-              ? `${date40[0]}${translated['8dab2f66']}${date40[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch40}
-        />
-        <Calendar
-          visible={isVisible40}
-          defaultValue={date40}
-          type="week"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          firstDayOfWeek={1}
-          onClose={closeSwitch40}
-          onConfirm={setChooseValue40}
-        />
+        <Demo4 />
 
-        <Cell
-          title={translated['7db1a8b4']}
-          description={
-            date41 && date41.length
-              ? `${date41[0]}${translated['8dab2f66']}${date41[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch41}
-        />
-        <Calendar
-          visible={isVisible41}
-          defaultValue={date41}
-          type="week"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onClose={closeSwitch41}
-          onConfirm={setChooseValue41}
-        />
+        <Demo5 />
 
-        <Cell
-          title={translated['7db1a8b5']}
-          description={
-            <div className="desc-box">
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[0]} ${desc1}`
-                  : translated['8dab2f67']}
-              </div>
-              <div className="desc1">-</div>
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[1]} ${desc2}`
-                  : translated['8dab2f68']}
-              </div>
-            </div>
-          }
-        />
-        <Calendar
-          visible={isVisible42}
-          defaultValue={date42}
-          type="range"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onDayClick={(date) => {
-            let d = [false, false]
-            if (date.length > 1) {
-              d = [true, true]
-            } else if (date.length > 0) {
-              d = [true, false]
-            }
-            setDatePickerAbled(d)
-          }}
-          onClose={closeSwitch42}
-          onConfirm={setChooseValue42}
-        >
-          <div className="nut-calendar-btns">
-            <div
-              className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 1)
-              }}
-            >
-              开始时间：{desc1}
-            </div>
-            -
-            <div
-              className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 2)
-              }}
-            >
-              结束时间：{desc2}
-            </div>
-          </div>
-          <DatePicker
-            title="时间选择"
-            type="time"
-            visible={show1}
-            showChinese
-            onClose={() => setShow1(false)}
-            onConfirm={(options, values) => confirm1(values, options)}
-          />
-        </Calendar>
+        <Demo6 />
 
         <h2>{translated.cfbdc781}</h2>
-        <Cell
-          title={translated.c3a3a1d2}
-          description={date3 ? `${date3}` : translated.b840c88f}
-          onClick={openSwitch3}
-        />
-        <Calendar
-          visible={isVisible3}
-          defaultValue={date3}
-          startDate=""
-          endDate=""
-          autoBackfill
-          onClose={closeSwitch3}
-          onConfirm={setChooseValue3}
-        />
-        <Cell
-          title={translated.a74a1fd4}
-          description={
-            date1
-              ? `${date5[0]}${translated['8dab2f66']}${date5[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch5}
-        />
-        <Calendar
-          visible={isVisible5}
-          defaultValue={date5}
-          type="range"
-          autoBackfill
-          startDate="2022-12-22"
-          endDate="2024-01-08"
-          onClose={closeSwitch5}
-          onConfirm={setChooseValue5}
-          onDayClick={select}
-        />
+
+        <Demo7 />
+
+        <Demo8 />
+
         <h2>{translated.d04fcbda}</h2>
-        <Cell
-          title={translated['60a53514']}
-          description={
-            date6
-              ? `${date6[0]}${translated['8dab2f66']}${date6[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch6}
-        />
-        <Calendar
-          visible={isVisible6}
-          defaultValue={date6}
-          type="range"
-          startDate="2023-2-22"
-          endDate="2024-01-08"
-          confirmText="submit"
-          startText="enter"
-          endText="leave"
-          renderDay={renderDay}
-          renderDayTop={renderDayTop}
-          renderDayBottom={renderDayBottom}
-          showToday
-          onClose={closeSwitch6}
-          onConfirm={setChooseValue6}
-        />
 
-        <Cell
-          title={translated['0aaad620']}
-          description={
-            date7
-              ? `${date7[0]}${translated['8dab2f66']}${date7[1]}`
-              : translated.b840c88f
-          }
-          onClick={openSwitch7}
-        />
-        <Calendar
-          ref={calendarRef}
-          visible={isVisible7}
-          defaultValue={date7}
-          type="range"
-          startDate="2022-12-22"
-          endDate="2024-12-31"
-          renderHeaderButtons={renderHeaderButtons}
-          onClose={closeSwitch7}
-          onConfirm={setChooseValue7}
-        />
+        <Demo9 />
+
+        <Demo10 />
 
         <h2>{translated.e51e4582}</h2>
-        <div
-          className="test-calendar-wrapper"
-          style={{
-            display: 'flex',
-            width: '100%',
-            height: '613px',
-            overflow: 'hidden',
-          }}
-        >
-          <Calendar
-            popup={false}
-            defaultValue={date8}
-            type="range"
-            startDate="2023-5-23"
-            endDate="2023-08-01"
-            startText={<div>test</div>}
-            endText="leave"
-            autoBackfill
-            onConfirm={setChooseValue8}
-            onPageChange={yearMonthChange}
-          />
-        </div>
+
+        <Demo11 />
       </div>
     </>
   )
diff --git a/src/packages/calendar/demos/h5/demo1.tsx b/src/packages/calendar/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..a5235e190c
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo1.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  const d = new Date()
+  const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
+  const [date, setDate] = useState(currDay)
+  const [isVisible, setIsVisible] = useState(false)
+  const [dateWeek, setDateWeek] = useState('')
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate(param[3])
+    setDateWeek(param[4])
+  }
+
+  const select = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择单个日期"
+        description={date ? `${date} ${dateWeek}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        showTitle={false}
+        defaultValue={date}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+        onDayClick={select}
+      />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/calendar/demos/h5/demo10.tsx b/src/packages/calendar/demos/h5/demo10.tsx
new file mode 100644
index 0000000000..780b921c4d
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo10.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useRef } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+function isLeapYear(y: number): boolean {
+  return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
+}
+
+function getMonthDays(year: string, month: string): number {
+  if (/^0/.test(month)) {
+    month = month.split('')[1]
+  }
+  return (
+    [
+      0,
+      31,
+      isLeapYear(Number(month)) ? 29 : 28,
+      31,
+      30,
+      31,
+      30,
+      31,
+      31,
+      30,
+      31,
+      30,
+      31,
+    ] as number[]
+  )[month as any]
+}
+
+const padZero = (num: number | string, targetLength = 2) => {
+  let str = `${num}`
+  while (str.length < targetLength) {
+    str = `0${str}`
+  }
+  return str
+}
+
+function date2Str(date: Date, split?: string): string {
+  split = split || '-'
+  const y = date.getFullYear()
+  const m = padZero(date.getMonth() + 1)
+  const d = padZero(date.getDate())
+  return [y, m, d].join(split)
+}
+
+function getDay(i: number): string {
+  i = i || 0
+  let date = new Date()
+  const diff = i * (1000 * 60 * 60 * 24)
+  date = new Date(date.getTime() + diff)
+  return date2Str(date)
+}
+
+const Demo10 = () => {
+  const [date, setDate] = useState<string[]>(['2023-07-10', '2023-07-19'])
+
+  const [isVisible, setIsVisible] = useState(false)
+
+  const calendarRef = useRef<any>(null)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const goDate = () => {
+    if (calendarRef.current) {
+      calendarRef.current.scrollToDate('2023-04-01')
+    }
+  }
+
+  const clickBtn = () => {
+    const date = [date2Str(new Date()), getDay(6)]
+    setDate(date)
+    if (calendarRef.current) {
+      calendarRef.current.scrollToDate(date[0])
+    }
+  }
+
+  const clickBtn1 = () => {
+    const date = new Date()
+    const year = date.getFullYear()
+    let month: any = date.getMonth() + 1
+    month = month < 10 ? `0${month}` : `${month}`
+    const yearMonth = `${year}-${month}`
+    const currMonthDays = getMonthDays(`${year}`, `${month}`)
+    setDate([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
+    if (calendarRef.current) {
+      calendarRef.current.scrollToDate(`${yearMonth}-01`)
+    }
+  }
+
+  const renderHeaderButtons = () => {
+    return (
+      <div className="wrapper">
+        <div className="d_div">
+          <span className="d_btn" onClick={goDate}>
+            {/* {translated['781b07fd']} */}
+            去某个月
+          </span>
+        </div>
+        <div className="d_div">
+          <span className="d_btn" onClick={clickBtn}>
+            {/* {translated['1076d771']} */}
+            最近七天
+          </span>
+        </div>
+        <div className="d_div">
+          <span className="d_btn" onClick={clickBtn1}>
+            {/* {translated['6ab47cd2']} */}
+            当月
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Cell
+        title="自定义按钮"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        ref={calendarRef}
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2022-12-22"
+        endDate="2024-12-31"
+        renderHeaderButtons={renderHeaderButtons}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo10
diff --git a/src/packages/calendar/demos/h5/demo11.tsx b/src/packages/calendar/demos/h5/demo11.tsx
new file mode 100644
index 0000000000..ac63bea957
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo11.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Calendar } from '@nutui/nutui-react'
+
+const Demo11 = () => {
+  const [date, setDate] = useState<string[]>(['2023-06-03', '2023-06-16'])
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const yearMonthChange = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <div
+        className="test-calendar-wrapper"
+        style={{
+          display: 'flex',
+          width: '100%',
+          height: '613px',
+          overflow: 'hidden',
+        }}
+      >
+        <Calendar
+          popup={false}
+          defaultValue={date}
+          type="range"
+          startDate="2023-5-23"
+          endDate="2023-08-01"
+          startText={<div>test</div>}
+          endText="leave"
+          autoBackfill
+          onConfirm={setChooseValue}
+          onPageChange={yearMonthChange}
+        />
+      </div>
+    </>
+  )
+}
+export default Demo11
diff --git a/src/packages/calendar/demos/h5/demo2.tsx b/src/packages/calendar/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..03fe66f43e
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo2.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  const [date, setDate] = useState(['2023-01-23', '2023-11-26'])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const select = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择日期区间"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2022-12-22"
+        endDate="2024-01-08"
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+        onDayClick={select}
+      />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/calendar/demos/h5/demo3.tsx b/src/packages/calendar/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..98b634f31a
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo3.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = chooseData.map((item: any) => {
+      return item[3]
+    })
+    setDate([...dateArr])
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择多个日期"
+        description={date && date.length ? `已选择${date.length}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="multiple"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/calendar/demos/h5/demo4.tsx b/src/packages/calendar/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..4568248eb8
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo4.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+    setDate([...dateArr])
+  }
+  return (
+    <>
+      <Cell
+        title="选择周"
+        description={date && date.length ? `${date[0]}-${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="week"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        firstDayOfWeek={1}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo4
diff --git a/src/packages/calendar/demos/h5/demo5.tsx b/src/packages/calendar/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..db857934a6
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo5.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { Cell, Calendar, CalendarDay } from '@nutui/nutui-react'
+
+const Demo5 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+    setDate([...dateArr])
+  }
+
+  const disableDate = (date: CalendarDay) => {
+    return date.day === 25 || date.day === 20 || date.day === 22
+  }
+
+  return (
+    <>
+      <Cell
+        title="日期不可选"
+        description={date && date.length ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="week"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        disableDate={disableDate}
+        firstDayOfWeek={1}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+
+export default Demo5
diff --git a/src/packages/calendar/demos/h5/demo6.tsx b/src/packages/calendar/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..37ae07619b
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo6.tsx
@@ -0,0 +1,130 @@
+import React, { useRef, useState } from 'react'
+import { Cell, Calendar, DatePicker, CalendarDay } from '@nutui/nutui-react'
+
+const padZero = (num: number | string, targetLength = 2) => {
+  let str = `${num}`
+  while (str.length < targetLength) {
+    str = `0${str}`
+  }
+  return str
+}
+
+const Demo6 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const disableDate = (date: CalendarDay) => {
+    return date.day === 25 || date.day === 20 || date.day === 22
+  }
+
+  const [show, setShow] = useState(false)
+  const [dpAbled, setDatePickerAbled] = useState([false, false])
+  const [desc1, setDesc1] = useState('10:00:00')
+  const [desc2, setDesc2] = useState('20:00:00')
+  const desc = useRef(0)
+
+  const setChooseValue = (chooseData: any) => {
+    console.log(
+      'setChooseValue',
+      [...[chooseData[0][3], chooseData[1][3]]],
+      chooseData
+    )
+    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+    setDate([...dateArr])
+  }
+  const confirm = (values: (string | number)[], options: any[]) => {
+    if (desc.current === 1) {
+      setDesc1(
+        options.map((option) => padZero(parseInt(option.text))).join(':')
+      )
+    } else {
+      setDesc2(
+        options.map((option) => padZero(parseInt(option.text))).join(':')
+      )
+    }
+  }
+
+  const showDatePicker = (e: any, index: number) => {
+    if (dpAbled[index - 1]) {
+      e.stopPropagation()
+      setShow(true)
+      desc.current = index
+    }
+  }
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  return (
+    <>
+      <Cell
+        title="日期区间"
+        description={
+          <div className="desc-box">
+            <div className="desc" onClick={openSwitch}>
+              {date && date.length ? `${date[0]} ${desc1}` : '请选择起始时间'}
+            </div>
+            <div className="desc1">-</div>
+            <div className="desc" onClick={openSwitch}>
+              {date && date.length ? `${date[1]} ${desc2}` : '请选择截止时间'}
+            </div>
+          </div>
+        }
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        disableDate={disableDate}
+        firstDayOfWeek={1}
+        onDayClick={(date) => {
+          let d = [false, false]
+          if (date.length > 1) {
+            d = [true, true]
+          } else if (date.length > 0) {
+            d = [true, false]
+          }
+          setDatePickerAbled(d)
+        }}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      >
+        <div className="nut-calendar-btns">
+          <div
+            className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
+            onClick={(e) => {
+              showDatePicker(e, 1)
+            }}
+          >
+            开始时间：{desc1}
+          </div>
+          -
+          <div
+            className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
+            onClick={(e) => {
+              showDatePicker(e, 2)
+            }}
+          >
+            结束时间：{desc2}
+          </div>
+        </div>
+        <DatePicker
+          title="时间选择"
+          type="time"
+          visible={show}
+          showChinese
+          onClose={() => setShow(false)}
+          onConfirm={(options, values) => confirm(values, options)}
+        />
+      </Calendar>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/calendar/demos/h5/demo7.tsx b/src/packages/calendar/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..8024cd6362
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo7.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  const [date, setDate] = useState('')
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate(param[3])
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择日期"
+        description={date ? `${date}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        startDate=""
+        endDate=""
+        autoBackfill
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo7
diff --git a/src/packages/calendar/demos/h5/demo8.tsx b/src/packages/calendar/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..8b730b1e91
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo8.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+  const [date, setDate] = useState<string[]>(['2023-03-23', '2023-11-26'])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const select = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择日期区间"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        autoBackfill
+        startDate="2022-12-22"
+        endDate="2024-01-08"
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+        onDayClick={select}
+      />
+    </>
+  )
+}
+export default Demo8
diff --git a/src/packages/calendar/demos/h5/demo9.tsx b/src/packages/calendar/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..0a9d84415e
--- /dev/null
+++ b/src/packages/calendar/demos/h5/demo9.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import { Cell, Calendar, CalendarDay } from '@nutui/nutui-react'
+
+const padZero = (num: number | string, targetLength = 2) => {
+  let str = `${num}`
+  while (str.length < targetLength) {
+    str = `0${str}`
+  }
+  return str
+}
+
+const Demo9 = () => {
+  const [date, setDate] = useState<string[]>(['2023-06-12', '2023-06-16'])
+
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const renderDay = (date: CalendarDay) => {
+    return <>{padZero(date.day)}</>
+  }
+
+  const renderDayTop = (date: CalendarDay) => {
+    let currDate = ''
+    if (date && date.day === 10) {
+      currDate = '☺'
+    }
+    return <span className="info">{currDate}</span>
+  }
+
+  const renderDayBottom = (date: CalendarDay) => {
+    let currDate = ''
+    if (date && date.day === 10) {
+      currDate = '纪念日'
+    }
+    return <span className="info">{currDate}</span>
+  }
+
+  return (
+    <>
+      <Cell
+        title="自定义时间文案"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2023-2-22"
+        endDate="2024-01-08"
+        confirmText="submit"
+        startText="enter"
+        endText="leave"
+        renderDay={renderDay}
+        renderDayTop={renderDayTop}
+        renderDayBottom={renderDayBottom}
+        showToday
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo9
diff --git a/src/packages/calendar/demos/taro/demo1.tsx b/src/packages/calendar/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..baefc59d7d
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo1.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+const Demo1 = () => {
+  const d = new Date()
+  const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
+  const [date, setDate] = useState(currDay)
+  const [isVisible, setIsVisible] = useState(false)
+  const [dateWeek, setDateWeek] = useState('')
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate(param[3])
+    setDateWeek(param[4])
+  }
+
+  const select = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择单个日期"
+        description={date ? `${date} ${dateWeek}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        showTitle={false}
+        defaultValue={date}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+        onDayClick={select}
+      />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/calendar/demos/taro/demo10.tsx b/src/packages/calendar/demos/taro/demo10.tsx
new file mode 100644
index 0000000000..35f31a0c15
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo10.tsx
@@ -0,0 +1,144 @@
+import React, { useState, useRef } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+function isLeapYear(y: number): boolean {
+  return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
+}
+
+function getMonthDays(year: string, month: string): number {
+  if (/^0/.test(month)) {
+    month = month.split('')[1]
+  }
+  return (
+    [
+      0,
+      31,
+      isLeapYear(Number(month)) ? 29 : 28,
+      31,
+      30,
+      31,
+      30,
+      31,
+      31,
+      30,
+      31,
+      30,
+      31,
+    ] as number[]
+  )[month as any]
+}
+
+const padZero = (num: number | string, targetLength = 2) => {
+  let str = `${num}`
+  while (str.length < targetLength) {
+    str = `0${str}`
+  }
+  return str
+}
+
+function date2Str(date: Date, split?: string): string {
+  split = split || '-'
+  const y = date.getFullYear()
+  const m = padZero(date.getMonth() + 1)
+  const d = padZero(date.getDate())
+  return [y, m, d].join(split)
+}
+
+function getDay(i: number): string {
+  i = i || 0
+  let date = new Date()
+  const diff = i * (1000 * 60 * 60 * 24)
+  date = new Date(date.getTime() + diff)
+  return date2Str(date)
+}
+
+const Demo10 = () => {
+  const [date, setDate] = useState<string[]>(['2023-07-10', '2023-07-19'])
+
+  const [isVisible, setIsVisible] = useState(false)
+
+  const calendarRef = useRef<any>(null)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const goDate = () => {
+    if (calendarRef.current) {
+      calendarRef.current.scrollToDate('2023-04-01')
+    }
+  }
+
+  const clickBtn = () => {
+    const date = [date2Str(new Date()), getDay(6)]
+    setDate(date)
+    if (calendarRef.current) {
+      calendarRef.current.scrollToDate(date[0])
+    }
+  }
+
+  const clickBtn1 = () => {
+    const date = new Date()
+    const year = date.getFullYear()
+    let month: any = date.getMonth() + 1
+    month = month < 10 ? `0${month}` : `${month}`
+    const yearMonth = `${year}-${month}`
+    const currMonthDays = getMonthDays(`${year}`, `${month}`)
+    setDate([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
+    if (calendarRef.current) {
+      calendarRef.current.scrollToDate(`${yearMonth}-01`)
+    }
+  }
+
+  const renderHeaderButtons = () => {
+    return (
+      <div className="wrapper">
+        <div className="d_div">
+          <span className="d_btn" onClick={goDate}>
+            去某个月
+          </span>
+        </div>
+        <div className="d_div">
+          <span className="d_btn" onClick={clickBtn}>
+            最近七天
+          </span>
+        </div>
+        <div className="d_div">
+          <span className="d_btn" onClick={clickBtn1}>
+            当月
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Cell
+        title="自定义按钮"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        ref={calendarRef}
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2022-12-22"
+        endDate="2024-12-31"
+        renderHeaderButtons={renderHeaderButtons}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo10
diff --git a/src/packages/calendar/demos/taro/demo11.tsx b/src/packages/calendar/demos/taro/demo11.tsx
new file mode 100644
index 0000000000..cd73ba8365
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo11.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Calendar } from '@nutui/nutui-react-taro'
+
+const Demo11 = () => {
+  const [date, setDate] = useState<string[]>(['2023-06-03', '2023-06-16'])
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const yearMonthChange = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <div
+        className="test-calendar-wrapper"
+        style={{
+          display: 'flex',
+          width: '100%',
+          height: '613px',
+          overflow: 'hidden',
+        }}
+      >
+        <Calendar
+          popup={false}
+          defaultValue={date}
+          type="range"
+          startDate="2023-5-23"
+          endDate="2023-08-01"
+          startText={<div>test</div>}
+          endText="leave"
+          autoBackfill
+          onConfirm={setChooseValue}
+          onPageChange={yearMonthChange}
+        />
+      </div>
+    </>
+  )
+}
+export default Demo11
diff --git a/src/packages/calendar/demos/taro/demo2.tsx b/src/packages/calendar/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..8936f209be
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo2.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+const Demo2 = () => {
+  const [date, setDate] = useState(['2023-01-23', '2023-11-26'])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const select = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择日期区间"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2022-12-22"
+        endDate="2024-01-08"
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+        onDayClick={select}
+      />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/calendar/demos/taro/demo3.tsx b/src/packages/calendar/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..f9683f6c13
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo3.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+const Demo3 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = chooseData.map((item: any) => {
+      return item[3]
+    })
+    setDate([...dateArr])
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择多个日期"
+        description={date && date.length ? `已选择${date.length}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="multiple"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/calendar/demos/taro/demo4.tsx b/src/packages/calendar/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..f6b2e549b4
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo4.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+const Demo4 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+    setDate([...dateArr])
+  }
+  return (
+    <>
+      <Cell
+        title="选择周"
+        description={date && date.length ? `${date[0]}-${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="week"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        firstDayOfWeek={1}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo4
diff --git a/src/packages/calendar/demos/taro/demo5.tsx b/src/packages/calendar/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..18c0b2977c
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo5.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Cell, Calendar, CalendarDay } from '@nutui/nutui-react-taro'
+
+const Demo5 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+    setDate([...dateArr])
+  }
+
+  const disableDate = (date: CalendarDay) => {
+    return date.day === 25 || date.day === 20 || date.day === 22
+  }
+
+  return (
+    <>
+      <Cell
+        title="日期不可选"
+        description={date && date.length ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="week"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        disableDate={disableDate}
+        firstDayOfWeek={1}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo5
diff --git a/src/packages/calendar/demos/taro/demo6.tsx b/src/packages/calendar/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..45ac299d91
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo6.tsx
@@ -0,0 +1,130 @@
+import React, { useRef, useState } from 'react'
+import {
+  Cell,
+  Calendar,
+  DatePicker,
+  CalendarDay,
+} from '@nutui/nutui-react-taro'
+
+const padZero = (num: number | string, targetLength = 2) => {
+  let str = `${num}`
+  while (str.length < targetLength) {
+    str = `0${str}`
+  }
+  return str
+}
+
+const Demo6 = () => {
+  const [date, setDate] = useState<string[]>([])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const disableDate = (date: CalendarDay) => {
+    return date.day === 25 || date.day === 20 || date.day === 22
+  }
+
+  const [show, setShow] = useState(false)
+  const [dpAbled, setDatePickerAbled] = useState([false, false])
+  const [desc1, setDesc1] = useState('10:00:00')
+  const [desc2, setDesc2] = useState('20:00:00')
+  const desc = useRef(0)
+
+  const setChooseValue = (chooseData: any) => {
+    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
+    setDate([...dateArr])
+  }
+  const confirm = (values: (string | number)[], options: any[]) => {
+    if (desc.current === 1) {
+      setDesc1(
+        options.map((option) => padZero(parseInt(option.text))).join(':')
+      )
+    } else {
+      setDesc2(
+        options.map((option) => padZero(parseInt(option.text))).join(':')
+      )
+    }
+  }
+
+  const showDatePicker = (e: any, index: number) => {
+    if (dpAbled[index - 1]) {
+      e.stopPropagation()
+      setShow(true)
+      desc.current = index
+    }
+  }
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  return (
+    <>
+      <Cell
+        title="日期区间"
+        description={
+          <div className="desc-box">
+            <div className="desc" onClick={openSwitch}>
+              {date && date.length ? `${date[0]} ${desc1}` : '请选择起始时间'}
+            </div>
+            <div className="desc1">-</div>
+            <div className="desc" onClick={openSwitch}>
+              {date && date.length ? `${date[1]} ${desc2}` : '请选择截止时间'}
+            </div>
+          </div>
+        }
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2023-01-01"
+        endDate="2024-09-10"
+        disableDate={disableDate}
+        firstDayOfWeek={1}
+        onDayClick={(date) => {
+          let d = [false, false]
+          if (date.length > 1) {
+            d = [true, true]
+          } else if (date.length > 0) {
+            d = [true, false]
+          }
+          setDatePickerAbled(d)
+        }}
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      >
+        <div className="nut-calendar-btns">
+          <div
+            className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
+            onClick={(e) => {
+              showDatePicker(e, 1)
+            }}
+          >
+            开始时间：{desc1}
+          </div>
+          -
+          <div
+            className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
+            onClick={(e) => {
+              showDatePicker(e, 2)
+            }}
+          >
+            结束时间：{desc2}
+          </div>
+        </div>
+        <DatePicker
+          title="时间选择"
+          type="time"
+          visible={show}
+          showChinese
+          onClose={() => setShow(false)}
+          onConfirm={(options, values) => confirm(values, options)}
+        />
+      </Calendar>
+    </>
+  )
+}
+export default Demo6
diff --git a/src/packages/calendar/demos/taro/demo7.tsx b/src/packages/calendar/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..3b0d46a131
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo7.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  const [date, setDate] = useState('')
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate(param[3])
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择日期"
+        description={date ? `${date}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        startDate=""
+        endDate=""
+        autoBackfill
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo7
diff --git a/src/packages/calendar/demos/taro/demo8.tsx b/src/packages/calendar/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..b1e33441a0
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo8.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Cell, Calendar } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+  const [date, setDate] = useState<string[]>(['2023-03-23', '2023-11-26'])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const select = (param: string) => {
+    console.log(param)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择日期区间"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        autoBackfill
+        startDate="2022-12-22"
+        endDate="2024-01-08"
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+        onDayClick={select}
+      />
+    </>
+  )
+}
+export default Demo8
diff --git a/src/packages/calendar/demos/taro/demo9.tsx b/src/packages/calendar/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..6b8b6b493b
--- /dev/null
+++ b/src/packages/calendar/demos/taro/demo9.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import { Cell, Calendar, CalendarDay } from '@nutui/nutui-react-taro'
+
+const padZero = (num: number | string, targetLength = 2) => {
+  let str = `${num}`
+  while (str.length < targetLength) {
+    str = `0${str}`
+  }
+  return str
+}
+
+const Demo9 = () => {
+  const [date, setDate] = useState<string[]>(['2023-06-12', '2023-06-16'])
+
+  const [isVisible, setIsVisible] = useState(false)
+
+  const openSwitch = () => {
+    setIsVisible(true)
+  }
+
+  const closeSwitch = () => {
+    setIsVisible(false)
+  }
+
+  const setChooseValue = (param: string) => {
+    setDate([...[param[0][3], param[1][3]]])
+  }
+
+  const renderDay = (date: CalendarDay) => {
+    return <>{padZero(date.day)}</>
+  }
+
+  const renderDayTop = (date: CalendarDay) => {
+    let currDate = ''
+    if (date && date.day === 10) {
+      currDate = '☺'
+    }
+    return <span className="info">{currDate}</span>
+  }
+
+  const renderDayBottom = (date: CalendarDay) => {
+    let currDate = ''
+    if (date && date.day === 10) {
+      currDate = '纪念日'
+    }
+    return <span className="info">{currDate}</span>
+  }
+
+  return (
+    <>
+      <Cell
+        title="自定义时间文案"
+        description={date ? `${date[0]}至${date[1]}` : '请选择'}
+        onClick={openSwitch}
+      />
+      <Calendar
+        visible={isVisible}
+        defaultValue={date}
+        type="range"
+        startDate="2023-2-22"
+        endDate="2024-01-08"
+        confirmText="submit"
+        startText="enter"
+        endText="leave"
+        renderDay={renderDay}
+        renderDayTop={renderDayTop}
+        renderDayBottom={renderDayBottom}
+        showToday
+        onClose={closeSwitch}
+        onConfirm={setChooseValue}
+      />
+    </>
+  )
+}
+export default Demo9
diff --git a/src/packages/calendar/doc.en-US.md b/src/packages/calendar/doc.en-US.md
index 6224ed9218..f0b30e5ba0 100644
--- a/src/packages/calendar/doc.en-US.md
+++ b/src/packages/calendar/doc.en-US.md
@@ -16,44 +16,7 @@ import { Calendar } from '@nutui/nutui-react';
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-    const [date, setDate] = useState('');
-    const [isVisible, setIsVisible] = useState(false);
-    const [dateWeek, setDateWeek] = useState('');
-
-    const openSwitch = () => {
-        setIsVisible(true);
-    }
-
-    const closeSwitch = () => {
-        setIsVisible(false);
-    }
-
-    const setChooseValue = (param: string) => {
-        setDate(param[3]);
-        setDateWeek(param[4]);
-    }
-    return (
-        <>
-            <Cell title="select a single date" description={ date ? `${date} ${dateWeek}` : 'please choose' } onClick={ openSwitch } />
-            <Calendar 
-                visible={ isVisible }
-                defaultValue={ date }
-                startDate="2022-01-11"
-                endDate="2029-11-30"
-                onClose={ closeSwitch }
-                onConfirm={ setChooseValue }
-             />
-        </>
-    );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -61,44 +24,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-    const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
-    const [isVisible1, setIsVisible1] = useState(false)
-
-    const openSwitch1 = () => {
-        setIsVisible1(true)
-    }
-
-    const closeSwitch1 = () => {
-        setIsVisible1(false)
-    }
-
-    const setChooseValue1 = (param: string) => {
-        setDate1([...[param[0][3], param[1][3]]])
-    }
-
-    return (
-        <>
-            <Cell title="Select date range" description={ date1 ? `${date1[0]}to${date1[1]}` : 'please choose' } onClick={ openSwitch1 } />
-            <Calendar 
-                visible={ isVisible1 }
-                defaultValue={ date1 }
-                type="range"
-                startDate="2019-12-22"
-                endDate="2021-01-08"
-                onClose={ closeSwitch1 }
-                onConfirm={ setChooseValue1 }
-             />
-        </>
-    );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -106,44 +32,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-    const [date3, setDate3] = useState('')
-    const [isVisible3, setIsVisible3] = useState(false)
-
-    const openSwitch3 = () => {
-        setIsVisible3(true)
-    }
-
-    const closeSwitch3 = () => {
-        setIsVisible3(false)
-    }
-
-    const setChooseValue3 = (param: string) => {
-        setDate3(param[3])
-    }
-
-    return (
-        <>
-            <Cell title="select multiple dates" description={ date3 && date3.length ? `chosen${date3.length}` : 'please choose' } onClick={ openSwitch3 } />
-            <Calendar
-                visible={isVisible3}
-                defaultValue={date3}
-                type="multiple"
-                startDate="2022-01-01"
-                endDate="2022-09-10"
-                onClose={closeSwitch3}
-                onConfirm={setChooseValue3}
-            />
-        </>
-    );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -151,45 +40,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  return (
-    <>
-      <Cell title="Select Week" description={ date3 && date3.length ? `${date3[0]}to${date3[1]}` : 'Select week' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -197,50 +48,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25
-  }
-
-  return (
-    <>
-      <Cell title="disable date" description={ date3 && date3.length ? `${date3[0]}-${date3[1]}` : 'Select' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2023-01-01"
-        endDate="2024-09-10"
-        disableDate={disableDate}
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -248,124 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, {useRef, useState } from "react";
-import { Cell, Calendar, DatePicker } from '@nutui/nutui-react';
-
-const App = () => {
-  const openSwitch42 = () => {
-    setIsVisible42(true)
-  }
-  const [date42, setDate42] = useState<string[]>([])
-  const [isVisible42, setIsVisible42] = useState(false)
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25 || date.day === 20 || date.day === 22
-  }
-  const [show1, setShow1] = useState(false)
-  const [dpAbled, setDatePickerAbled] = useState([false, false])
-  const [desc1, setDesc1] = useState('10:00:00')
-  const [desc2, setDesc2] = useState('20:00:00')
-  const desc = useRef(0)
-  const padZero = (d: number | string) => {
-    return d <= 9 ? `0${d}` : d
-  }
-  const setChooseValue42 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate42([...dateArr])
-  } 
-  const confirm1 = (values: (string | number)[], options: any[]) => {
-    if (desc.current === 1) {
-      setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    } else {
-      setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    }
-  }
-  const showDatePicker = (e: any, index: number) => {
-    if (dpAbled[index - 1]) {
-      e.stopPropagation()
-      setShow1(true)
-      desc.current = index
-    }
-  }
-
-  return (
-    <>
-      <Cell
-          title="Date Range"
-          description={
-            <div className="desc-box">
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[0]} ${desc1}`
-                  : 'Select start Time'}
-              </div>
-              <div className="desc1">-</div>
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[1]} ${desc2}`
-                  : 'Select end time'}
-              </div>
-            </div>
-          }
-        />
-        <Calendar
-          visible={isVisible42}
-          defaultValue={date42}
-          type="range"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onDayClick={(date) => {
-            let d = [false, false]
-            if (date.length > 1) {
-              d = [true, true]
-            } else if (date.length > 0) {
-              d = [true, false]
-            }
-            setDatePickerAbled(d)
-          }}
-          onClose={closeSwitch42}
-          onConfirm={setChooseValue42}
-        >
-          <div className="nut-calendar-btns">
-            <div
-              className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 1)
-              }}
-            >
-              Start Time: {desc1}
-            </div>
-            -
-            <div
-              className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 2)
-              }}
-            >
-              End Time: {desc2}
-            </div>
-          </div>
-          <DatePicker
-            title="Select Time"
-            type="time"
-            visible={show1}
-            showChinese
-            onClose={() => setShow1(false)}
-            onConfirm={(options, values) => confirm1(values, options)}
-          />
-        </Calendar>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -373,44 +64,15 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-    const [date3, setDate3] = useState('')
-    const [isVisible3, setIsVisible3] = useState(false)
-
-    const openSwitch3 = () => {
-        setIsVisible3(true)
-    }
-
-    const closeSwitch3 = () => {
-        setIsVisible3(false)
-    }
-
-    const setChooseValue3 = (param: string) => {
-        setDate3(param[3])
-    }
-
-    return (
-        <>
-            <Cell title="select date" description={ date3 ? `${date3}` : 'please choose' } onClick={ openSwitch3 } />
-            <Calendar
-                visible={isVisible3}
-                defaultValue={date3}
-                autoBackfill
-                startDate=""
-                endDate=""
-                onClose={closeSwitch3}
-                onConfirm={setChooseValue3}
-            />
-        </>
-    );
-};
-export default App;
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
 
-```
+:::
+
+### Quick selection - Interval selection
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
 
 :::
 
@@ -418,69 +80,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-interface CalendarDay {
-  day: string | number;
-  type: string;
-}
-
-const App = () => {
-    const [date3, setDate3] = useState('')
-    const [isVisible3, setIsVisible3] = useState(false)
-
-    const openSwitch3 = () => {
-        setIsVisible3(true)
-    }
-
-    const closeSwitch3 = () => {
-        setIsVisible3(false)
-    }
-
-    const setChooseValue3 = (param: string) => {
-        setDate3([...[param[0][3], param[1][3]]])
-    }
-
-    const renderDay = (date: CalendarDay) => {
-        return (
-            <span>{ date.day <= 9 ? `0${  date.day}` : date.day }</span>
-        )
-    }
-
-    const renderDayBottom = (date: CalendarDay) => {
-        return (
-            <span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
-                date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
-            }</span>
-        )
-    }
-
-    return (
-        <>
-            <Cell title="select date" description={ date3 ? `${date3[0]}to${date3[1]}` : 'please choose' } onClick={ openSwitch3 } />
-            
-            <Calendar
-                visible={isVisible3}
-                defaultValue={date3}
-                type="range"
-                startDate="2019-12-22"
-                endDate="2021-01-08"
-                confirmText="submit"
-                startText="enter"
-                endText="leave"
-                renderDay={ renderDay }
-                renderDayBottom={ renderDayBottom }
-                onClose={closeSwitch3}
-                onConfirm={setChooseValue3}
-            />
-        </>
-    );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
 
 :::
 
@@ -488,144 +88,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState, useRef } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const Utils = {
-    date2Str(date: Date, split?: string): string {
-        split = split || '-'
-        const y = date.getFullYear()
-        const m = this.getNumTwoBit(date.getMonth() + 1)
-        const d = this.getNumTwoBit(date.getDate())
-        return [y, m, d].join(split)
-    },
-    getDay(i: number): string {
-        i = i || 0
-        let date = new Date()
-        const diff = i * (1000 * 60 * 60 * 24)
-        date = new Date(date.getTime() + diff)
-        return this.date2Str(date)
-    },
-    getNumTwoBit(n: number): string {
-        n = Number(n)
-        return (n > 9 ? '' : '0') + n
-    },
-    date2Str(date: Date, split?: string): string {
-        split = split || '-'
-        const y = date.getFullYear()
-        const m = this.getNumTwoBit(date.getMonth() + 1)
-        const d = this.getNumTwoBit(date.getDate())
-        return [y, m, d].join(split)
-    },
-    getMonthDays(year: string, month: string): number {
-        if (/^0/.test(month)) {
-        month = month.split('')[1]
-        }
-        return (
-        [
-            0,
-            31,
-            this.isLeapYear(Number(year)) ? 29 : 28,
-            31,
-            30,
-            31,
-            30,
-            31,
-            31,
-            30,
-            31,
-            30,
-            31,
-        ] as number[]
-        )[month as any]
-    },
-    isLeapYear(y: number): boolean {
-        return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
-    },
-};
-
-const App = () => {
-    const [date3, setDate3] = useState('')
-    const [isVisible3, setIsVisible3] = useState(false)
-
-    const calendarRef = useRef<any>(null);
-
-    const openSwitch3 = () => {
-        setIsVisible3(true)
-    }
-
-    const closeSwitch3 = () => {
-        setIsVisible3(false)
-    }
-
-    const setChooseValue3 = (param: string) => {
-        setDate3([...[param[0][3], param[1][3]]])
-    }
-
-    const goDate = () => {
-        if (calendarRef.current) {
-            calendarRef.current.scrollToDate('2023-04-01');
-        }
-    };
-
-    const clickBtn = () => {
-        const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-        setDate3(date);
-        if (calendarRef.current) {
-          calendarRef.current.scrollToDate(date[0])
-        }
-    }
-
-    const clickBtn1 = () => {
-        const date = new Date();
-        const year = date.getFullYear();
-        let month: any = date.getMonth() + 1;
-        month = month < 10 ? `0${  month}` : `${month  }`;
-        const yearMonth = `${year}-${month}`;
-        const currMonthDays = Utils.getMonthDays(`${year  }`, `${month  }`);
-        setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
-        if (calendarRef.current) {
-          calendarRef.current.scrollToDate(`${yearMonth}-01`)
-        }
-    }
-
-    const renderHeaderButtons = () => {
-        return (
-            <div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
-                <div className="d_div" style={ { margin: '0px 5px' } }>
-                    <span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>to a certain month</span>
-                </div>
-                <div className="d_div" style={ { margin: '0px 5px' } }>
-                    <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>last seven days</span>
-                </div>
-                <div className="d_div" style={ { margin: '0px 5px' } }>
-                    <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>current month</span>
-                </div>
-            </div>
-        )
-    }
-
-    return (
-        <>
-            <Cell title="select date" description={ date3 ? `${date3[0]}to${date3[1]}` : 'please choose' } onClick={ openSwitch3 } />
-            <Calendar
-                ref={ calendarRef }
-                visible={isVisible3}
-                defaultValue={date3}
-                type="range"
-                startDate="2021-12-22"
-                endDate="2022-12-31"
-                renderHeaderButtons={ renderHeaderButtons }
-                onClose={closeSwitch3}
-                onConfirm={setChooseValue3}
-            />
-        </>
-    );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo10.tsx'></CodeBlock>
 
 :::
 
@@ -633,33 +96,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-    const [date2, setDate2] = useState('2020-07-08')
-
-    const setChooseValue2 = (param: string) => {
-        setDate2(param[3])
-    }
-
-    return (
-        <>
-            <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-                <Calendar
-                    popup={ false }
-                    defaultValue={ date2 }
-                    autoBackfill
-                    onConfirm={ setChooseValue2 }
-                />
-            </div>
-        </>
-    );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo11.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/calendar/doc.md b/src/packages/calendar/doc.md
index 23d694eb41..733a0502b5 100644
--- a/src/packages/calendar/doc.md
+++ b/src/packages/calendar/doc.md
@@ -16,44 +16,7 @@ import { Calendar } from '@nutui/nutui-react';
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date, setDate] = useState('');
-  const [isVisible, setIsVisible] = useState(false);
-  const [dateWeek, setDateWeek] = useState('');
-
-  const openSwitch = () => {
-    setIsVisible(true);
-  }
-
-  const closeSwitch = () => {
-    setIsVisible(false);
-  }
-
-  const setChooseValue = (param: string) => {
-    setDate(param[3]);
-    setDateWeek(param[4]);
-  }
-  return (
-    <>
-      <Cell title="选择单个日期" description={ date ? `${date} ${dateWeek}` : '请选择' } onClick={ openSwitch } />
-      <Calendar 
-        visible={ isVisible }
-        defaultValue={ date }
-        startDate="2022-01-11"
-        endDate="2029-11-30"
-        onClose={ closeSwitch }
-        onConfirm={ setChooseValue }
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -61,44 +24,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
-  const [isVisible1, setIsVisible1] = useState(false)
-
-  const openSwitch1 = () => {
-    setIsVisible1(true)
-  }
-
-  const closeSwitch1 = () => {
-    setIsVisible1(false)
-  }
-
-  const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]])
-  }
-
-  return (
-    <>
-      <Cell title="选择日期区间" description={ date1 ? `${date1[0]}至${date1[1]}` : '请选择' } onClick={ openSwitch1 } />
-      <Calendar 
-        visible={ isVisible1 }
-        defaultValue={ date1 }
-        type="range"
-        startDate="2019-12-22"
-        endDate="2021-01-08"
-        onClose={ closeSwitch1 }
-        onConfirm={ setChooseValue1 }
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -106,44 +32,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  return (
-    <>
-      <Cell title="选择多个日期" description={ date3 && date3.length ? `已选择${date3.length}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="multiple"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -151,45 +40,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  return (
-    <>
-      <Cell title="选择周" description={ date3 && date3.length ? `${date3[0]}$-${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -197,50 +48,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25
-  }
-
-  return (
-    <>
-      <Cell title="选择周" description={ date3 && date3.length ? `${date3[0]}$-${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2023-01-01"
-        endDate="2024-09-10"
-        disableDate={disableDate}
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -248,124 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, {useRef, useState } from "react";
-import { Cell, Calendar, DatePicker } from '@nutui/nutui-react';
-
-const App = () => {
-  const openSwitch42 = () => {
-    setIsVisible42(true)
-  }
-  const [date42, setDate42] = useState<string[]>([])
-  const [isVisible42, setIsVisible42] = useState(false)
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25 || date.day === 20 || date.day === 22
-  }
-  const [show1, setShow1] = useState(false)
-  const [dpAbled, setDatePickerAbled] = useState([false, false])
-  const [desc1, setDesc1] = useState('10:00:00')
-  const [desc2, setDesc2] = useState('20:00:00')
-  const desc = useRef(0)
-  const padZero = (d: number | string) => {
-    return d <= 9 ? `0${d}` : d
-  }
-  const setChooseValue42 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate42([...dateArr])
-  } 
-  const confirm1 = (values: (string | number)[], options: any[]) => {
-    if (desc.current === 1) {
-      setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    } else {
-      setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    }
-  }
-  const showDatePicker = (e: any, index: number) => {
-    if (dpAbled[index - 1]) {
-      e.stopPropagation()
-      setShow1(true)
-      desc.current = index
-    }
-  }
-
-  return (
-    <>
-      <Cell
-          title="日期区间"
-          description={
-            <div className="desc-box">
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[0]} ${desc1}`
-                  : '请选择起始时间'}
-              </div>
-              <div className="desc1">-</div>
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[1]} ${desc2}`
-                  : '请选择截止时间'}
-              </div>
-            </div>
-          }
-        />
-        <Calendar
-          visible={isVisible42}
-          defaultValue={date42}
-          type="range"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onDayClick={(date) => {
-            let d = [false, false]
-            if (date.length > 1) {
-              d = [true, true]
-            } else if (date.length > 0) {
-              d = [true, false]
-            }
-            setDatePickerAbled(d)
-          }}
-          onClose={closeSwitch42}
-          onConfirm={setChooseValue42}
-        >
-          <div className="nut-calendar-btns">
-            <div
-              className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 1)
-              }}
-            >
-              开始时间：{desc1}
-            </div>
-            -
-            <div
-              className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 2)
-              }}
-            >
-              结束时间：{desc2}
-            </div>
-          </div>
-          <DatePicker
-            title="时间选择"
-            type="time"
-            visible={show1}
-            showChinese
-            onClose={() => setShow1(false)}
-            onConfirm={(options, values) => confirm1(values, options)}
-          />
-        </Calendar>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -373,44 +64,15 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  return (
-    <>
-      <Cell title="选择日期" description={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        autoBackfill
-        startDate=""
-        endDate=""
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
 
-```
+:::
+
+### 快捷选择-日期区间
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
 
 :::
 
@@ -418,68 +80,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-interface CalendarDay {
-  day: string | number;
-  type: string;
-}
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3([...[param[0][3], param[1][3]]])
-  }
-
-  const renderDay = (date: CalendarDay) => {
-    return (
-      <span>{ date.day <= 9 ? `0${  date.day}` : date.day }</span>
-    )
-  }
-
-  const renderDayBottom = (date: CalendarDay) => {
-    return (
-      <span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
-          date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
-      }</span>
-    )
-  }
-
-  return (
-    <>
-      <Cell title="选择日期" description={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="range"
-        startDate="2019-12-22"
-        endDate="2021-01-08"
-        confirmText="submit"
-        startText="enter"
-        endText="leave"
-        renderDay={ renderDay }
-        renderDayBottom={ renderDayBottom }
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
 
 :::
 
@@ -487,143 +88,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState, useRef } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const Utils = {
-  date2Str(date: Date, split?: string): string {
-    split = split || '-'
-    const y = date.getFullYear()
-    const m = this.getNumTwoBit(date.getMonth() + 1)
-    const d = this.getNumTwoBit(date.getDate())
-    return [y, m, d].join(split)
-  },
-  getDay(i: number): string {
-    i = i || 0
-    let date = new Date()
-    const diff = i * (1000 * 60 * 60 * 24)
-    date = new Date(date.getTime() + diff)
-    return this.date2Str(date)
-  },
-  getNumTwoBit(n: number): string {
-    n = Number(n)
-    return (n > 9 ? '' : '0') + n
-  },
-  date2Str(date: Date, split?: string): string {
-    split = split || '-'
-    const y = date.getFullYear()
-    const m = this.getNumTwoBit(date.getMonth() + 1)
-    const d = this.getNumTwoBit(date.getDate())
-    return [y, m, d].join(split)
-  },
-  getMonthDays(year: string, month: string): number {
-    if (/^0/.test(month)) {
-      month = month.split('')[1]
-    }
-    return (
-      [
-          0,
-          31,
-          this.isLeapYear(Number(year)) ? 29 : 28,
-          31,
-          30,
-          31,
-          30,
-          31,
-          31,
-          30,
-          31,
-          30,
-          31,
-      ] as number[]
-    )[month as any]
-  },
-  isLeapYear(y: number): boolean {
-    return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
-  },
-};
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-  const calendarRef = useRef<any>(null);
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3([...[param[0][3], param[1][3]]])
-  }
-
-  const goDate = () => {
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate('2023-04-01');
-    }
-  };
-
-  const clickBtn = () => {
-    const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-    setDate3(date);
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(date[0])
-    }
-  }
-
-  const clickBtn1 = () => {
-    const date = new Date();
-    const year = date.getFullYear();
-    let month: any = date.getMonth() + 1;
-    month = month < 10 ? `0${  month}` : `${month  }`;
-    const yearMonth = `${year}-${month}`;
-    const currMonthDays = Utils.getMonthDays(`${year  }`, `${month  }`);
-    setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(`${yearMonth}-01`)
-    }
-  }
-
-  const renderHeaderButtons = () => {
-    return (
-      <div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>去某个月</span>
-        </div>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>最近七天</span>
-        </div>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>当月</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <Cell title="选择日期" description={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        ref={ calendarRef }
-        visible={isVisible3}
-        defaultValue={date3}
-        type="range"
-        startDate="2021-12-22"
-        endDate="2022-12-31"
-        renderHeaderButtons={ renderHeaderButtons }
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo10.tsx'></CodeBlock>
 
 :::
 
@@ -631,32 +96,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date2, setDate2] = useState('2020-07-08')
-  const setChooseValue2 = (param: string) => {
-    setDate2(param[3])
-  }
-
-  return (
-    <>
-      <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-        <Calendar
-          popup={ false }
-          defaultValue={ date2 }
-          autoBackfill
-          onConfirm={ setChooseValue2 }
-        />
-      </div>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo11.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/calendar/doc.taro.md b/src/packages/calendar/doc.taro.md
index 14ca0fa640..d67e113984 100644
--- a/src/packages/calendar/doc.taro.md
+++ b/src/packages/calendar/doc.taro.md
@@ -16,44 +16,7 @@ import { Calendar } from '@nutui/nutui-react-taro';
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [date, setDate] = useState('');
-  const [isVisible, setIsVisible] = useState(false);
-  const [dateWeek, setDateWeek] = useState('');
-
-  const openSwitch = () => {
-    setIsVisible(true);
-  }
-
-  const closeSwitch = () => {
-    setIsVisible(false);
-  }
-
-  const setChooseValue = (param: string) => {
-    setDate(param[3]);
-    setDateWeek(param[4]);
-  }
-  return (
-    <>
-      <Cell title="选择单个日期" description={ date ? `${date} ${dateWeek}` : '请选择' } onClick={ openSwitch } />
-      <Calendar 
-        visible={ isVisible }
-        defaultValue={ date }
-        startDate="2022-01-11"
-        endDate="2029-11-30"
-        onClose={ closeSwitch }
-        onConfirm={ setChooseValue }
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -61,44 +24,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
-  const [isVisible1, setIsVisible1] = useState(false)
-
-  const openSwitch1 = () => {
-    setIsVisible1(true)
-  }
-
-  const closeSwitch1 = () => {
-    setIsVisible1(false)
-  }
-
-  const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]])
-  }
-
-  return (
-    <>
-      <Cell title="选择日期区间" description={ date1 ? `${date1[0]}至${date1[1]}` : '请选择' } onClick={ openSwitch1 } />
-      <Calendar 
-        visible={ isVisible1 }
-        defaultValue={ date1 }
-        type="range"
-        startDate="2019-12-22"
-        endDate="2021-01-08"
-        onClose={ closeSwitch1 }
-        onConfirm={ setChooseValue1 }
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -106,44 +32,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  return (
-    <>
-      <Cell title="选择多个日期" description={ date3 && date3.length ? `已选择${date3.length}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="multiple"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -151,45 +40,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  return (
-    <>
-      <Cell title="选择周" description={ date3 && date3.length ? `${date3[0]}-${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -197,50 +48,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25
-  }
-
-  return (
-    <>
-      <Cell title="选择周" description={ date3 && date3.length ? `${date3[0]}-${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2023-01-01"
-        endDate="2024-09-10"
-        disableDate={disableDate}
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
 
 :::
 
@@ -248,127 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, {useRef, useState } from "react";
-import { Cell, Calendar, DatePicker } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const openSwitch42 = () => {
-    setIsVisible42(true)
-  }
-  const [date42, setDate42] = useState<string[]>([])
-  const [isVisible42, setIsVisible42] = useState(false)
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25 || date.day === 20 || date.day === 22
-  }
-
-  const [show1, setShow1] = useState(false)
-  const [dpAbled, setDatePickerAbled] = useState([false, false])
-  const [desc1, setDesc1] = useState('10:00:00')
-  const [desc2, setDesc2] = useState('20:00:00')
-  const desc = useRef(0)
-  const padZero = (d: number | string) => {
-    return d <= 9 ? `0${d}` : d
-  }
-  const setChooseValue42 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate42([...dateArr])
-  } 
-  const confirm1 = (values: (string | number)[], options: any[]) => {
-    if (desc.current === 1) {
-      setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    } else {
-      setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    }
-  }
-  const showDatePicker = (e: any, index: number) => {
-    if (dpAbled[index - 1]) {
-      e.stopPropagation()
-      setShow1(true)
-      desc.current = index
-    }
-  }
-
-  
-
-  return (
-    <>
-      <Cell
-          title="日期区间"
-          description={
-            <div className="desc-box">
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[0]} ${desc1}`
-                  : '请选择起始时间'}
-              </div>
-              <div className="desc1">-</div>
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[1]} ${desc2}`
-                  : '请选择截止时间'}
-              </div>
-            </div>
-          }
-        />
-        <Calendar
-          visible={isVisible42}
-          defaultValue={date42}
-          type="range"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onDayClick={(date) => {
-            let d = [false, false]
-            if (date.length > 1) {
-              d = [true, true]
-            } else if (date.length > 0) {
-              d = [true, false]
-            }
-            setDatePickerAbled(d)
-          }}
-          onClose={closeSwitch42}
-          onConfirm={setChooseValue42}
-        >
-          <div className="nut-calendar-btns">
-            <div
-              className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 1)
-              }}
-            >
-              开始时间：{desc1}
-            </div>
-            -
-            <div
-              className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 2)
-              }}
-            >
-              结束时间：{desc2}
-            </div>
-          </div>
-          <DatePicker
-            title="时间选择"
-            type="time"
-            visible={show1}
-            showChinese
-            onClose={() => setShow1(false)}
-            onConfirm={(options, values) => confirm1(values, options)}
-          />
-        </Calendar>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -376,45 +64,15 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  return (
-    <>
-      <Cell title="选择日期" description={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        autoBackfill
-        startDate=""
-        endDate=""
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
 
-```
+:::
+
+### 快捷选择-日期区间
+
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
 
 :::
 
@@ -422,68 +80,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-interface CalendarDay {
-  day: string | number;
-  type: string;
-}
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3([...[param[0][3], param[1][3]]])
-  }
-
-  const renderDay = (date: CalendarDay) => {
-    return (
-      <span>{ date.day <= 9 ? `0${  date.day}` : date.day }</span>
-    )
-  }
-
-  const renderDayBottom = (date: CalendarDay) => {
-    return (
-      <span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
-          date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
-      }</span>
-    )
-  }
-
-  return (
-    <>
-      <Cell title="选择日期" description={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="range"
-        startDate="2019-12-22"
-        endDate="2021-01-08"
-        confirmText="submit"
-        startText="enter"
-        endText="leave"
-        renderDay={ renderDay }
-        renderDayBottom={ renderDayBottom }
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo9.tsx'></CodeBlock>
 
 :::
 
@@ -491,143 +88,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState, useRef } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react-taro';
-
-const Utils = {
-  date2Str(date: Date, split?: string): string {
-    split = split || '-'
-    const y = date.getFullYear()
-    const m = this.getNumTwoBit(date.getMonth() + 1)
-    const d = this.getNumTwoBit(date.getDate())
-    return [y, m, d].join(split)
-  },
-  getDay(i: number): string {
-    i = i || 0
-    let date = new Date()
-    const diff = i * (1000 * 60 * 60 * 24)
-    date = new Date(date.getTime() + diff)
-    return this.date2Str(date)
-  },
-  getNumTwoBit(n: number): string {
-    n = Number(n)
-    return (n > 9 ? '' : '0') + n
-  },
-  date2Str(date: Date, split?: string): string {
-    split = split || '-'
-    const y = date.getFullYear()
-    const m = this.getNumTwoBit(date.getMonth() + 1)
-    const d = this.getNumTwoBit(date.getDate())
-    return [y, m, d].join(split)
-  },
-  getMonthDays(year: string, month: string): number {
-    if (/^0/.test(month)) {
-      month = month.split('')[1]
-    }
-    return (
-      [
-          0,
-          31,
-          this.isLeapYear(Number(year)) ? 29 : 28,
-          31,
-          30,
-          31,
-          30,
-          31,
-          31,
-          30,
-          31,
-          30,
-          31,
-      ] as number[]
-    )[month as any]
-  },
-  isLeapYear(y: number): boolean {
-    return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
-  },
-};
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-  const calendarRef = useRef<any>(null);
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3([...[param[0][3], param[1][3]]])
-  }
-
-  const goDate = () => {
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate('2023-04-01');
-    }
-  };
-
-  const clickBtn = () => {
-    const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-    setDate3(date);
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(date[0])
-    }
-  }
-
-  const clickBtn1 = () => {
-    const date = new Date();
-    const year = date.getFullYear();
-    let month: any = date.getMonth() + 1;
-    month = month < 10 ? `0${  month}` : `${month  }`;
-    const yearMonth = `${year}-${month}`;
-    const currMonthDays = Utils.getMonthDays(`${year  }`, `${month  }`);
-    setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(`${yearMonth}-01`)
-    }
-  }
-
-  const renderHeaderButtons = () => {
-    return (
-      <div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>去某个月</span>
-        </div>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>最近七天</span>
-        </div>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>当月</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <Cell title="选择日期" description={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
-      <Calendar
-        ref={ calendarRef }
-        visible={isVisible3}
-        defaultValue={date3}
-        type="range"
-        startDate="2021-12-22"
-        endDate="2022-12-31"
-        renderHeaderButtons={ renderHeaderButtons }
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo10.tsx'></CodeBlock>
 
 :::
 
@@ -635,32 +96,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Calendar } from '@nutui/nutui-react-taro';
-
-const App = () => {
-  const [date2, setDate2] = useState('2020-07-08')
-  const setChooseValue2 = (param: string) => {
-    setDate2(param[3])
-  }
-
-  return (
-    <>
-      <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-        <Calendar
-          popup={ false }
-          defaultValue={ date2 }
-          autoBackfill
-          onConfirm={ setChooseValue2 }
-        />
-      </div>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='taro/demo11.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/calendar/doc.zh-TW.md b/src/packages/calendar/doc.zh-TW.md
index 41a4933a64..85f4bcbe5a 100644
--- a/src/packages/calendar/doc.zh-TW.md
+++ b/src/packages/calendar/doc.zh-TW.md
@@ -16,44 +16,7 @@ import { Calendar } from '@nutui/nutui-react';
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date, setDate] = useState('');
-  const [isVisible, setIsVisible] = useState(false);
-  const [dateWeek, setDateWeek] = useState('');
-
-  const openSwitch = () => {
-    setIsVisible(true);
-  }
-
-  const closeSwitch = () => {
-    setIsVisible(false);
-  }
-
-  const setChooseValue = (param: string) => {
-    setDate(param[3]);
-    setDateWeek(param[4]);
-  }
-  return (
-    <>
-      <Cell title="選擇單個日期" description={ date ? `${date} ${dateWeek}` : '請選擇' } onClick={ openSwitch } />
-      <Calendar 
-        visible={ isVisible }
-        defaultValue={ date }
-        startDate="2022-01-11"
-        endDate="2029-11-30"
-        onClose={ closeSwitch }
-        onConfirm={ setChooseValue }
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -61,44 +24,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
-  const [isVisible1, setIsVisible1] = useState(false)
-
-  const openSwitch1 = () => {
-    setIsVisible1(true)
-  }
-
-  const closeSwitch1 = () => {
-    setIsVisible1(false)
-  }
-
-  const setChooseValue1 = (param: string) => {
-    setDate1([...[param[0][3], param[1][3]]])
-  }
-
-  return (
-    <>
-      <Cell title="選擇日期區間" description={ date1 ? `${date1[0]}至${date1[1]}` : '請選擇' } onClick={ openSwitch1 } />
-      <Calendar 
-        visible={ isVisible1 }
-        defaultValue={ date1 }
-        type="range"
-        startDate="2019-12-22"
-        endDate="2021-01-08"
-        onClose={ closeSwitch1 }
-        onConfirm={ setChooseValue1 }
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -106,44 +32,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  return (
-    <>
-      <Cell title="選擇多個日期" description={ date3 && date3.length ? `已選擇${date3.length}` : '請選擇' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="multiple"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -151,45 +40,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  return (
-    <>
-      <Cell title="選擇周" description={ date3 && date3.length ? `${date3[0]}$-${date3[1]}` : '請選擇' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2022-01-01"
-        endDate="2022-09-10"
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -197,175 +48,15 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    const dateArr = [...[param[0][3], param[1][3]]]
-    setDate3([...dateArr])
-  }
-
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25
-  }
-
-  return (
-    <>
-      <Cell title="選擇周" description={ date3 && date3.length ? `${date3[0]}$-${date3[1]}` : '請選擇' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="week"
-        startDate="2023-01-01"
-        endDate="2024-09-10"
-        disableDate={disableDate}
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
-```
 :::
 
-
 ### 和Datepicker 聯動
 
 :::demo
 
-```tsx
-import  React, {useRef, useState } from "react";
-import { Cell, Calendar, DatePicker } from '@nutui/nutui-react';
-
-const App = () => {
-  const openSwitch42 = () => {
-    setIsVisible42(true)
-  }
-  const [date42, setDate42] = useState<string[]>([])
-  const [isVisible42, setIsVisible42] = useState(false)
-  const disableDate = (date: CalendarDay) => {
-    return date.day === 25 || date.day === 20 || date.day === 22
-  }
-  const [show1, setShow1] = useState(false)
-  const [dpAbled, setDatePickerAbled] = useState([false, false])
-  const [desc1, setDesc1] = useState('10:00:00')
-  const [desc2, setDesc2] = useState('20:00:00')
-  const desc = useRef(0)
-  const padZero = (d: number | string) => {
-    return d <= 9 ? `0${d}` : d
-  }
-  const setChooseValue42 = (chooseData: any) => {
-    const dateArr = [...[chooseData[0][3], chooseData[1][3]]]
-    setDate42([...dateArr])
-  } 
-  const confirm1 = (values: (string | number)[], options: any[]) => {
-    if (desc.current === 1) {
-      setDesc1(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    } else {
-      setDesc2(
-        options.map((option) => padZero(parseInt(option.text))).join(':')
-      )
-    }
-  }
-  const showDatePicker = (e: any, index: number) => {
-    if (dpAbled[index - 1]) {
-      e.stopPropagation()
-      setShow1(true)
-      desc.current = index
-    }
-  }
-
-  return (
-    <>
-      <Cell
-          title="日期區間"
-          description={
-            <div className="desc-box">
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[0]} ${desc1}`
-                  : '請選擇起始時間'}
-              </div>
-              <div className="desc1">-</div>
-              <div className="desc" onClick={openSwitch42}>
-                {date42 && date42.length
-                  ? `${date42[1]} ${desc2}`
-                  : '請選擇截止時間'}
-              </div>
-            </div>
-          }
-        />
-        <Calendar
-          visible={isVisible42}
-          defaultValue={date42}
-          type="range"
-          startDate="2023-01-01"
-          endDate="2024-09-10"
-          disableDate={disableDate}
-          firstDayOfWeek={1}
-          onDayClick={(date) => {
-            let d = [false, false]
-            if (date.length > 1) {
-              d = [true, true]
-            } else if (date.length > 0) {
-              d = [true, false]
-            }
-            setDatePickerAbled(d)
-          }}
-          onClose={closeSwitch42}
-          onConfirm={setChooseValue42}
-        >
-          <div className="nut-calendar-btns">
-            <div
-              className={`nut-calendar-date ${dpAbled[0] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 1)
-              }}
-            >
-              開始時間：{desc1}
-            </div>
-            -
-            <div
-              className={`nut-calendar-date ${dpAbled[1] ? '' : 'disabled'}`}
-              onClick={(e) => {
-                showDatePicker(e, 2)
-              }}
-            >
-              結束時間：{desc2}
-            </div>
-          </div>
-          <DatePicker
-            title="時間選擇"
-            type="time"
-            visible={show1}
-            showChinese
-            onClose={() => setShow1(false)}
-            onConfirm={(options, values) => confirm1(values, options)}
-          />
-        </Calendar>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo6.tsx'></CodeBlock>
 
 :::
 
@@ -373,44 +64,15 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3(param[3])
-  }
-
-  return (
-    <>
-      <Cell title="選擇日期" description={ date3 ? `${date3}` : '請選擇' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        autoBackfill
-        startDate=""
-        endDate=""
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
 
-```
+:::
+
+### 快捷選擇-日期區間
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
 
 :::
 
@@ -418,68 +80,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-interface CalendarDay {
-  day: string | number;
-  type: string;
-}
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3([...[param[0][3], param[1][3]]])
-  }
-
-  const renderDay = (date: CalendarDay) => {
-    return (
-      <span>{ date.day <= 9 ? `0${  date.day}` : date.day }</span>
-    )
-  }
-
-  const renderDayBottom = (date: CalendarDay) => {
-    return (
-      <span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
-          date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
-      }</span>
-    )
-  }
-
-  return (
-    <>
-      <Cell title="選擇日期" description={ date3 ? `${date3[0]}至${date3[1]}` : '請選擇' } onClick={ openSwitch3 } />
-      <Calendar
-        visible={isVisible3}
-        defaultValue={date3}
-        type="range"
-        startDate="2019-12-22"
-        endDate="2021-01-08"
-        confirmText="submit"
-        startText="enter"
-        endText="leave"
-        renderDay={ renderDay }
-        renderDayBottom={ renderDayBottom }
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
 
 :::
 
@@ -487,143 +88,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState, useRef } from "react";
-import { Cell, Calendar } from '@nutui/nutui-react';
-
-const Utils = {
-  date2Str(date: Date, split?: string): string {
-    split = split || '-'
-    const y = date.getFullYear()
-    const m = this.getNumTwoBit(date.getMonth() + 1)
-    const d = this.getNumTwoBit(date.getDate())
-    return [y, m, d].join(split)
-  },
-  getDay(i: number): string {
-    i = i || 0
-    let date = new Date()
-    const diff = i * (1000 * 60 * 60 * 24)
-    date = new Date(date.getTime() + diff)
-    return this.date2Str(date)
-  },
-  getNumTwoBit(n: number): string {
-    n = Number(n)
-    return (n > 9 ? '' : '0') + n
-  },
-  date2Str(date: Date, split?: string): string {
-    split = split || '-'
-    const y = date.getFullYear()
-    const m = this.getNumTwoBit(date.getMonth() + 1)
-    const d = this.getNumTwoBit(date.getDate())
-    return [y, m, d].join(split)
-  },
-  getMonthDays(year: string, month: string): number {
-    if (/^0/.test(month)) {
-      month = month.split('')[1]
-    }
-    return (
-      [
-          0,
-          31,
-          this.isLeapYear(Number(year)) ? 29 : 28,
-          31,
-          30,
-          31,
-          30,
-          31,
-          31,
-          30,
-          31,
-          30,
-          31,
-      ] as number[]
-    )[month as any]
-  },
-  isLeapYear(y: number): boolean {
-    return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
-  },
-};
-
-const App = () => {
-  const [date3, setDate3] = useState('')
-  const [isVisible3, setIsVisible3] = useState(false)
-  const calendarRef = useRef<any>(null);
-
-  const openSwitch3 = () => {
-    setIsVisible3(true)
-  }
-
-  const closeSwitch3 = () => {
-    setIsVisible3(false)
-  }
-
-  const setChooseValue3 = (param: string) => {
-    setDate3([...[param[0][3], param[1][3]]])
-  }
-
-  const goDate = () => {
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate('2023-04-01');
-    }
-  };
-
-  const clickBtn = () => {
-    const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
-    setDate3(date);
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(date[0])
-    }
-  }
-
-  const clickBtn1 = () => {
-    const date = new Date();
-    const year = date.getFullYear();
-    let month: any = date.getMonth() + 1;
-    month = month < 10 ? `0${  month}` : `${month  }`;
-    const yearMonth = `${year}-${month}`;
-    const currMonthDays = Utils.getMonthDays(`${year  }`, `${month  }`);
-    setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
-    if (calendarRef.current) {
-      calendarRef.current.scrollToDate(`${yearMonth}-01`)
-    }
-  }
-
-  const renderHeaderButtons = () => {
-    return (
-      <div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>去某個月</span>
-        </div>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>最近七天</span>
-        </div>
-        <div className="d_div" style={ { margin: '0px 5px' } }>
-          <span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>當月</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <Cell title="選擇日期" description={ date3 ? `${date3[0]}至${date3[1]}` : '請選擇' } onClick={ openSwitch3 } />
-      <Calendar
-        ref={ calendarRef }
-        visible={isVisible3}
-        defaultValue={date3}
-        type="range"
-        startDate="2021-12-22"
-        endDate="2022-12-31"
-        renderHeaderButtons={ renderHeaderButtons }
-        onClose={closeSwitch3}
-        onConfirm={setChooseValue3}
-      />
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo10.tsx'></CodeBlock>
 
 :::
 
@@ -631,32 +96,7 @@ export default App;
 
 :::demo
 
-```tsx
-import  React, { useState } from "react";
-import { Calendar } from '@nutui/nutui-react';
-
-const App = () => {
-  const [date2, setDate2] = useState('2020-07-08')
-  const setChooseValue2 = (param: string) => {
-    setDate2(param[3])
-  }
-
-  return (
-    <>
-      <div className="test-calendar-wrapper" style={ { display: 'flex', width: '100%', height: '613px', overflow: 'hidden' } }>
-        <Calendar
-          popup={ false }
-          defaultValue={ date2 }
-          autoBackfill
-          onConfirm={ setChooseValue2 }
-        />
-      </div>
-    </>
-  );
-};
-export default App;
-
-```
+<CodeBlock src='h5/demo11.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/calendar/types.ts b/src/packages/calendar/types.ts
index 4030c73958..27d3a485c2 100644
--- a/src/packages/calendar/types.ts
+++ b/src/packages/calendar/types.ts
@@ -14,3 +14,7 @@ export interface CalendarMonthInfo {
 export type CalendarValue = string | string[]
 
 export type CalendarType = 'single' | 'range' | 'multiple' | 'week'
+
+export type CalendarRef = {
+  scrollToDate: (date: string) => void
+}