diff --git a/code/Data Entry/DatePicker.MonthPicker.tsx b/code/Data Entry/DatePicker.MonthPicker.tsx
new file mode 100644
index 0000000..4611af4
--- /dev/null
+++ b/code/Data Entry/DatePicker.MonthPicker.tsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+import {
+ Frame,
+ addPropertyControls,
+ ControlType,
+ RenderTarget,
+ PropertyControls
+} from "framer";
+import { DatePicker as AntDatePicker } from "antd";
+import { keys, pick } from "lodash";
+import { Form as AntForm } from "antd";
+import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem";
+const moment = require("moment");
+
+const controlProperty: PropertyControls = {
+ // 禁用 boolean false
+ disabled: { type: ControlType.Boolean },
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: {
+ type: ControlType.Enum,
+ options: ["time", "date", "month", "year", "decade"]
+ },
+ // 控制弹层是否展开 boolean -
+ open: { type: ControlType.Boolean },
+ // 输入框提示文字 string|RangePicker[] -
+ placeholder: { type: ControlType.String },
+ // 开关大小,可选值:default small string default
+ size: {
+ type: ControlType.Enum,
+ options: ["large", "default", "small"]
+ },
+
+ // ------------------------------
+
+ // 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD"
+ format: { type: ControlType.String },
+ // 日期 moment 无
+ _value: { type: ControlType.String },
+
+ ...FormItemControlProperty
+};
+
+export const MonthPicker = props => {
+ const { _labelCol, _wrapperCol, _value, ...rest } = props;
+
+ if (!rest.label) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
+
+MonthPicker.defaultProps = {
+ width: 200,
+ height: 32,
+ size: "default",
+ // 禁用 boolean false
+ disabled: false,
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: "date",
+ // 控制弹层是否展开 boolean -
+ open: false,
+ // ------------------------------
+ ...FormItemDefaults
+};
+
+addPropertyControls(MonthPicker, controlProperty);
diff --git a/code/Data Entry/DatePicker.RangePicker.tsx b/code/Data Entry/DatePicker.RangePicker.tsx
new file mode 100644
index 0000000..274919a
--- /dev/null
+++ b/code/Data Entry/DatePicker.RangePicker.tsx
@@ -0,0 +1,100 @@
+import * as React from "react";
+import {
+ Frame,
+ addPropertyControls,
+ ControlType,
+ RenderTarget,
+ PropertyControls
+} from "framer";
+import { DatePicker as AntDatePicker } from "antd";
+import { keys, pick, isEmpty } from "lodash";
+import { Form as AntForm } from "antd";
+import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem";
+const moment = require("moment");
+
+const controlProperty: PropertyControls = {
+ // 禁用 boolean false
+ disabled: { type: ControlType.Boolean },
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: {
+ type: ControlType.Enum,
+ options: ["time", "date", "month", "year", "decade"]
+ },
+ // 控制弹层是否展开 boolean -
+ open: { type: ControlType.Boolean },
+ // 输入框提示文字 string|RangePicker[] -
+ placeholder: { type: ControlType.String },
+ // 开关大小,可选值:default small string default
+ size: {
+ type: ControlType.Enum,
+ options: ["large", "default", "small"]
+ },
+
+ // ------------------------------
+ // 设置分隔符 string '~' 3.14.0
+ separator: { type: ControlType.String },
+ // 增加时间选择功能 Object|boolean TimePicker Options
+ showTime: { type: ControlType.Boolean },
+ // 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD"
+ format: { type: ControlType.String },
+ // 日期 moment 无
+ _value: {
+ type: ControlType.Array,
+ propertyControl: { type: ControlType.String }
+ },
+
+ ...FormItemControlProperty
+};
+
+export const RangePicker = props => {
+ const { _labelCol, _wrapperCol, _value, ...rest } = props;
+
+ if (!rest.label) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+
+ function getVal() {
+ if (isEmpty(_value)) {
+ return [];
+ }
+ return _value.map(item => moment(item));
+ }
+};
+
+RangePicker.defaultProps = {
+ width: 250,
+ height: 32,
+ size: "default",
+ // 禁用 boolean false
+ disabled: false,
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: "date",
+ // 控制弹层是否展开 boolean -
+ open: false,
+ // ------------------------------
+ // 设置分隔符 string '~' 3.14.0
+ separator: "~",
+ // 增加时间选择功能 Object|boolean TimePicker Options
+ showTime: false,
+ ...FormItemDefaults
+};
+
+addPropertyControls(RangePicker, controlProperty);
diff --git a/code/Data Entry/DatePicker.WeekPicker.tsx b/code/Data Entry/DatePicker.WeekPicker.tsx
new file mode 100644
index 0000000..3138e40
--- /dev/null
+++ b/code/Data Entry/DatePicker.WeekPicker.tsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+import {
+ Frame,
+ addPropertyControls,
+ ControlType,
+ RenderTarget,
+ PropertyControls
+} from "framer";
+import { DatePicker as AntDatePicker } from "antd";
+import { keys, pick } from "lodash";
+import { Form as AntForm } from "antd";
+import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem";
+const moment = require("moment");
+
+const controlProperty: PropertyControls = {
+ // 禁用 boolean false
+ disabled: { type: ControlType.Boolean },
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: {
+ type: ControlType.Enum,
+ options: ["time", "date", "month", "year", "decade"]
+ },
+ // 控制弹层是否展开 boolean -
+ open: { type: ControlType.Boolean },
+ // 输入框提示文字 string|RangePicker[] -
+ placeholder: { type: ControlType.String },
+ // 开关大小,可选值:default small string default
+ size: {
+ type: ControlType.Enum,
+ options: ["large", "default", "small"]
+ },
+
+ // ------------------------------
+
+ // 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD"
+ format: { type: ControlType.String },
+ // 日期 moment 无
+ _value: { type: ControlType.String },
+
+ ...FormItemControlProperty
+};
+
+export const WeekPicker = props => {
+ const { _labelCol, _wrapperCol, _value, ...rest } = props;
+
+ if (!rest.label) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
+
+WeekPicker.defaultProps = {
+ width: 200,
+ height: 32,
+ size: "default",
+ // 禁用 boolean false
+ disabled: false,
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: "date",
+ // 控制弹层是否展开 boolean -
+ open: false,
+ // ------------------------------
+ ...FormItemDefaults
+};
+
+addPropertyControls(WeekPicker, controlProperty);
diff --git a/code/Data Entry/DatePicker.tsx b/code/Data Entry/DatePicker.tsx
new file mode 100644
index 0000000..595c97b
--- /dev/null
+++ b/code/Data Entry/DatePicker.tsx
@@ -0,0 +1,88 @@
+import * as React from "react";
+import {
+ Frame,
+ addPropertyControls,
+ ControlType,
+ RenderTarget,
+ PropertyControls
+} from "framer";
+import { DatePicker as AntDatePicker } from "antd";
+import { keys, pick } from "lodash";
+import { Form as AntForm } from "antd";
+import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem";
+const moment = require("moment");
+
+const controlProperty: PropertyControls = {
+ // 禁用 boolean false
+ disabled: { type: ControlType.Boolean },
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: {
+ type: ControlType.Enum,
+ options: ["time", "date", "month", "year", "decade"]
+ },
+ // 控制弹层是否展开 boolean -
+ open: { type: ControlType.Boolean },
+ // 输入框提示文字 string|RangePicker[] -
+ placeholder: { type: ControlType.String },
+ // 开关大小,可选值:default small string default
+ size: {
+ type: ControlType.Enum,
+ options: ["large", "default", "small"]
+ },
+
+ // ------------------------------
+
+ // 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD"
+ format: { type: ControlType.String },
+ // 增加时间选择功能 Object|boolean TimePicker Options
+ showTime: { type: ControlType.Boolean },
+ // 是否展示“今天”按钮 boolean true
+ showToday: { type: ControlType.Boolean },
+ // 日期 moment 无
+ _value: { type: ControlType.String },
+
+ ...FormItemControlProperty
+};
+
+export const DatePicker = props => {
+ const { _labelCol, _wrapperCol, _value, ...rest } = props;
+
+ if (!rest.label) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
+
+DatePicker.defaultProps = {
+ width: 200,
+ height: 32,
+ size: "default",
+ // 禁用 boolean false
+ disabled: false,
+ // 日期面板的状态(设置后无法选择年份/月份?) time|date|month|year|decade 'date'
+ mode: "date",
+ // 控制弹层是否展开 boolean -
+ open: false,
+ // ------------------------------
+ showTime: false,
+ ...FormItemDefaults
+};
+
+addPropertyControls(DatePicker, controlProperty);
diff --git a/package.json b/package.json
index 92b4807..fda2233 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
"author": "bin yang",
"dependencies": {
"antd": "^3.23.3",
- "lodash": "^4.17.15"
+ "lodash": "^4.17.15",
+ "moment": "^2.24.0"
},
"name": "@framer/bzone.ant-design-ui-kit",
"version": "1.2.0",
@@ -37,4 +38,4 @@
"url": "https://github.com/tolerance-go/ant-design-framer/issues"
},
"homepage": "https://github.com/tolerance-go/ant-design-framer#readme"
-}
\ No newline at end of file
+}