Feat add new time components

* feat(DatePicker2): add date-picker2
* feat(Calendar2): add calendar2
* feat(TimePicker2): add TimePicker2

Co-authored-by: 皆虚 <jiarui.xjr@alibaba-inc.com>
Co-authored-by: aboutblank <njuzhaoguoyan@foxmail.com>
Co-authored-by: akirakai <doriru.simon@gmail.com>

docs/calendar/demo/panel.md

@@ -1,25 +1,29 @@
 # 日历面板
 
-- order: 5
+-   order: 5
 
 日历面板通用用于嵌套在弹层容器中。
 
 :::lang=en-us
+
 # Panel
 
-- order: 5
+-   order: 5
 
 A calendar panel is usually used for embedding in a popup container.
 
 :::
 
 ---
 
-````jsx
+```jsx
 import { Calendar } from '@alifd/next';
 import moment from 'moment';
 
-ReactDOM.render(<div>
-    <Calendar shape="panel" value={moment().add(1, 'days')} />
-</div>, mountNode);
-````
+ReactDOM.render(
+    <div>
+        <Calendar shape="panel" defaultValue={moment().add(1, 'days')} />
+    </div>,
+    mountNode
+);
+```

docs/calendar2/demo/basic.md

@@ -0,0 +1,28 @@
+# 基础日历
+
+- order: 0
+
+最简单的日历用法，用户可以切换年/月。
+
+:::lang=en-us
+# Basic
+
+- order: 0
+
+A basic calendar.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+import dayjs from 'dayjs';
+
+function onDateChange(value) {
+    console.log(value.format('L'));
+}
+
+ReactDOM.render(<div>
+    <Calendar2 onSelect={onDateChange} defaultValue={dayjs().add(1, 'days')} /></div>, mountNode);
+````

docs/calendar2/demo/card.md

@@ -0,0 +1,36 @@
+# 卡片日历
+
+- order: 1
+
+卡片日历通常用来被嵌套在宽高受限的容器中。
+
+:::lang=en-us
+# Card
+
+- order: 1
+
+A card calendar is usually used for embedding in a container with limited width and height.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+
+function onDateChange(value) {
+    console.log(value);
+}
+
+ReactDOM.render(<div className="wrapped-calendar">
+    <Calendar2 onSelect={onDateChange} shape="card" />
+</div>, mountNode);
+````
+
+````css
+.wrapped-calendar {
+    width: 300px;
+    border: 1px solid #eee;
+    border-radius: 3px;
+}
+````

docs/calendar2/demo/custom-cell.md

@@ -0,0 +1,115 @@
+# 定制日历内容
+
+- order: 6
+
+通过 `dateCellRender` 和  `monthCellRender`， 可以在日历中添加自定义内容。
+
+:::lang=en-us
+# Custom cell
+
+- order: 6
+
+Render custom contents by `dateCellRender` and `monthCellRender`.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+import dayjs from 'dayjs';
+
+const currentDate = dayjs();
+const localeData = currentDate.clone().localeData();
+const monthLocale = localeData.monthsShort();
+
+
+function dateCellRender(date) {
+    const dateNum = date.date();
+    if (currentDate.month() !== date.month()) {
+        return dateNum;
+    }
+
+    let eventList;
+    switch (dateNum) {
+        case 1:
+            eventList = [
+                { type: 'primary', content: 'Event 1' },
+                { type: 'normal', content: 'Event 2' }
+            ];
+            break;
+        case 10:
+            eventList = [
+                { type: 'normal', content: 'Event 3' },
+                { type: 'normal', content: 'Event 4' }
+            ];
+            break;
+        case 11:
+            eventList = [
+                { type: 'primary', content: 'Event 5' },
+                { type: 'primary', content: 'Event 6' }
+            ];
+            break;
+        default:
+            eventList = [];
+    }
+
+    return (<div className="custom-calendar-cell">
+        <div className="custom-calendar-cell-value">{dateNum}</div>
+        <div className="custom-calendar-cell-content">
+            <ul className="event-list">
+                {eventList.map((item, key) => <li className={`${item.type}-event`} key={key}>{item.content}</li>)}
+            </ul>
+        </div>
+    </div>);
+}
+
+function monthCellRender(date) {
+    if (currentDate.month() === date.month()) {
+        return (<div>
+            <div>{monthLocale[date.month()]}</div>
+            <div>Events</div>
+        </div>);
+    }
+    return monthLocale[date.month()];
+}
+
+ReactDOM.render(<Calendar2 dateCellRender={dateCellRender} monthCellRender={monthCellRender} />, mountNode);
+````
+
+````css
+.custom-calendar-guide {
+    width: 270px;
+    border: 1px solid #C4C6CF;
+    border-radius: 3px;
+    overflow: hidden;
+    margin-top: 20px;
+}
+
+.custom-calendar-cell-content {
+    height: 50px;
+    text-align: left;
+}
+
+.event-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.primary-event {
+    color: white;
+    background: red;
+    border-radius: 3px;
+    padding-left: 10px;
+    margin-bottom: 3px;
+}
+
+.normal-event {
+    color: white;
+    background: blue;
+    border-radius: 3px;
+    padding-left: 10px;
+    margin-bottom: 3px;
+}
+````

docs/calendar2/demo/default-visible-month.md

@@ -0,0 +1,31 @@
+# 日历默认展示月份
+
+- order: 5
+
+日历组件默认使用当前月作为展示的月份，用户可以可以通过 `defaultPanelValue` 属性进行定制。并可以通过 `onPanelChange` 属性监听面板可视月份的变化。
+
+:::lang=en-us
+# Default visible month
+
+- order: 5
+
+Change default visible month by `defaultPanelValue`.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+import dayjs from 'dayjs';
+
+function onSelect(value) {
+    console.log(value.format('L'));
+}
+
+function onPanelChange(value, reason) {
+    console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);
+}
+
+ReactDOM.render(<Calendar2 onSelect={onSelect} defaultPanelValue={() => dayjs('2018-01', 'YYYY-MM', true)} onPanelChange={onPanelChange} />, mountNode);
+````

docs/calendar2/demo/disabled.md

@@ -0,0 +1,39 @@
+# 禁用日期
+
+- order: 4
+
+可以通过 `disabledDate` 属性禁止用户选择某些日期。
+
+:::lang=en-us
+# Disable dates
+
+- order: 4
+
+Disable specific dates by `disabledDate`.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+import dayjs from 'dayjs';
+
+const currentDate = dayjs();
+const disabledDate = function (date) {
+    return date.valueOf() > currentDate.valueOf();
+};
+
+ReactDOM.render(<div className="wrapped-calendar">
+    <Calendar2 disabledDate={disabledDate} shape="card" />
+</div>, mountNode);
+````
+
+````css
+.wrapped-calendar {
+    width: 300px;
+    border: 1px solid #C4C6CF;
+    border-radius: 3px;
+    padding: 8px;
+}
+````

docs/calendar2/demo/lunar.md

@@ -0,0 +1,50 @@
+# 农历
+
+- order: 3
+
+农历
+
+:::lang=en-us
+# Lunar Calendar
+
+- order: 3
+
+A lunar calendar.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+import dayjs from 'dayjs';
+import solarLunar from 'solarlunar';
+
+function onDateChange(value) {
+    console.log(value.format());
+}
+
+function dateCellRender(value) {
+    const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());
+
+    return (<div className="custom-cell">
+        {value.date()}
+        <span>{solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}</span>
+    </div>);
+}
+
+
+ReactDOM.render(<div>
+    <Calendar2 onSelect={onDateChange} dateCellRender={dateCellRender} defaultValue={dayjs().add(1, 'days')} /></div>, mountNode);
+````
+
+```css
+.custom-cell {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+```

docs/calendar2/demo/panel.md

@@ -0,0 +1,29 @@
+# 面板日历
+
+-   order: 2
+
+面板日历通常用来被嵌套在弹层容器中。
+
+:::lang=en-us
+
+# Panel
+
+-   order: 2
+
+A panel calendar is usually used for embedding in a popup container.
+
+:::
+
+---
+
+````jsx
+import { Calendar2 } from '@alifd/next';
+import dayjs from 'dayjs';
+
+ReactDOM.render(
+    <div>
+        <Calendar2 shape="panel" defaultValue={dayjs().add(1, 'days')} />
+    </div>,
+    mountNode
+);
+````