ant-design/a26241fa-async.c05dbe73.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["a26241fa"],{a26241fa:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return u;}});var n=t("777fffbe"),r=t("f19d2b93"),s=n._(t("b622e337")),d=n._(t("97c488ea")),l=n._(t("c96b0d01")),o=t("5b220c3d"),i=t("9c86e52a"),c=t("cd9cbaf7"),u=function(){return(0,r.jsx)(i.DumiPage,{children:(0,r.jsx)(o.Suspense,{fallback:(0,r.jsx)(l.default,{}),children:(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"markdown",children:[(0,r.jsxs)("p",{children:[c.texts[0].value,(0,r.jsx)(d.default,{href:"https://day.js.org",sourceType:"a",children:c.texts[1].value}),c.texts[2].value]}),(0,r.jsxs)("p",{children:[c.texts[3].value,(0,r.jsxs)("strong",{children:[c.texts[4].value,(0,r.jsx)(d.default,{href:"http://momentjs.com/",sourceType:"a",children:c.texts[5].value}),c.texts[6].value,(0,r.jsx)(d.default,{href:"https://date-fns.org",sourceType:"a",children:c.texts[7].value}),c.texts[8].value,(0,r.jsx)(d.default,{href:"https://moment.github.io/luxon/",sourceType:"a",children:c.texts[9].value})]}),c.texts[10].value]}),(0,r.jsxs)("h2",{id:"custom-component",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#custom-component",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Custom component"]}),(0,r.jsxs)("p",{children:[c.texts[11].value,(0,r.jsx)("code",{children:c.texts[12].value}),c.texts[13].value,(0,r.jsx)("code",{children:c.texts[14].value}),c.texts[15].value]}),(0,r.jsxs)("p",{children:[c.texts[16].value,(0,r.jsx)(d.default,{href:"https://u.ant.design/guide",sourceType:"a",children:c.texts[17].value}),c.texts[18].value,(0,r.jsx)(d.default,{href:"https://github.com/xiaohuoni/antd4-generate-picker/commit/47fec964e36d48bd15760f8f5abcb9655c259aa6",sourceType:"a",children:c.texts[19].value})]}),(0,r.jsxs)("h3",{id:"datepickertsx",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#datepickertsx",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"DatePicker.tsx"]}),(0,r.jsxs)("p",{children:[c.texts[20].value,(0,r.jsx)("code",{children:c.texts[21].value}),c.texts[22].value]}),(0,r.jsx)("p",{children:c.texts[23].value}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[24].value}),(0,r.jsxs)("h3",{id:"timepickertsx",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#timepickertsx",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"TimePicker.tsx"]}),(0,r.jsxs)("p",{children:[c.texts[25].value,(0,r.jsx)("code",{children:c.texts[26].value}),c.texts[27].value]}),(0,r.jsx)("p",{children:c.texts[28].value}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[29].value}),(0,r.jsxs)("h3",{id:"calendartsx",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#calendartsx",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Calendar.tsx"]}),(0,r.jsxs)("p",{children:[c.texts[30].value,(0,r.jsx)("code",{children:c.texts[31].value}),c.texts[32].value]}),(0,r.jsx)("p",{children:c.texts[33].value}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[34].value}),(0,r.jsxs)("h3",{id:"export-custom-component",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#export-custom-component",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Export Custom component"]}),(0,r.jsxs)("p",{children:[c.texts[35].value,(0,r.jsx)("code",{children:c.texts[36].value}),c.texts[37].value]}),(0,r.jsx)("p",{children:c.texts[38].value}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[39].value}),(0,r.jsxs)("h3",{id:"use-custom-component",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#use-custom-component",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Use Custom component"]}),(0,r.jsxs)("p",{children:[c.texts[40].value,(0,r.jsx)("code",{children:c.texts[41].value}),c.texts[42].value,(0,r.jsx)("code",{children:c.texts[43].value}),c.texts[44].value]}),(0,r.jsx)(s.default,{lang:"diff",children:c.texts[45].value}),(0,r.jsxs)("h2",{id:"antd-moment-webpack-plugin",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#antd-moment-webpack-plugin",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"antd-moment-webpack-plugin"]}),(0,r.jsxs)("p",{children:[c.texts[46].value,(0,r.jsx)("code",{children:c.texts[47].value}),c.texts[48].value,(0,r.jsx)("code",{children:c.texts[49].value}),c.texts[50].value,(0,r.jsx)("code",{children:c.texts[51].value}),c.texts[52].value,(0,r.jsx)(d.default,{href:"https://github.com/ant-design/antd-moment-webpack-plugin",sourceType:"a",children:c.texts[53].value}),c.texts[54].value]}),(0,r.jsx)(s.default,{lang:"js",children:c.texts[55].value}),(0,r.jsxs)("h2",{id:"use-date-fns",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#use-date-fns",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Use date-fns"]}),(0,r.jsxs)("p",{children:[(0,r.jsx)(d.default,{href:"https://date-fns.org/",sourceType:"a",children:c.texts[56].value}),c.texts[57].value,(0,r.jsx)("code",{children:c.texts[58].value}),c.texts[59].value]}),(0,r.jsx)("p",{children:c.texts[60].value}),(0,r.jsxs)("h3",{id:"datepickertsx-1",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#datepickertsx-1",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"DatePicker.tsx"]}),(0,r.jsxs)("p",{children:[c.texts[61].value,(0,r.jsx)("code",{children:c.texts[62].value}),c.texts[63].value]}),(0,r.jsx)("p",{children:c.texts[64].value}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[65].value}),(0,r.jsxs)("h2",{id:"use-luxon",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#use-luxon",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Use luxon"]}),(0,r.jsxs)("p",{children:[c.texts[66].value,(0,r.jsx)("code",{children:c.texts[67].value}),c.texts[68].value,(0,r.jsx)(d.default,{href:"https://moment.github.io/luxon/",sourceType:"a",children:c.texts[69].value}),c.texts[70].value,(0,r.jsx)("code",{children:c.texts[71].value}),c.texts[72].value]}),(0,r.jsxs)("h3",{id:"implementation",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#implementation",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Implementation"]}),(0,r.jsxs)("p",{children:[c.texts[73].value,(0,r.jsx)("code",{children:c.texts[74].value}),c.texts[75].value]}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[76].value}),(0,r.jsxs)("h3",{id:"notable-differences-with-dayjs",children:[(0,r.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#notable-differences-with-dayjs",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"Notable differences with dayjs"]}),(0,r.jsxs)("p",{children:[c.texts[77].value,(0,r.jsx)(d.default,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl",sourceType:"a",children:c.texts[78].value}),c.texts[79].value]}),(0,r.jsx)("p",{children:c.texts[80].value}),(0,r.jsxs)("ul",{children:[(0,r.jsx)("li",{children:c.texts[81].value}),(0,r.jsx)("li",{children:c.texts[82].value}),(0,r.jsx)("li",{children:c.texts[83].value}),(0,r.jsx)("li",{children:c.texts[84].value})]}),(0,r.jsx)("p",{children:c.texts[85].value}),(0,r.jsx)(s.default,{lang:"tsx",children:c.texts[86].value}),(0,r.jsx)("p",{children:c.texts[87].value})]})})})});};},cd9cbaf7:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("b70956b1");let n=[{value:"By default, Ant Design uses ",paraId:0},{value:"Day.js",paraId:0},{value:" to handle time and date. Day.js is an immutable date-time library alternative to Moment.js with the same API.",paraId:0},{value:"You might want to use another date library (",paraId:1},{value:"Ant design currently supports ",paraId:1},{value:"moment",paraId:1},{value:", ",paraId:1},{value:"date-fns",paraId:1},{value:", and ",paraId:1},{value:"luxon",paraId:1},{value:"). We provide two ways to customize:",paraId:1},{value:"The first way is to use ",paraId:2,tocIndex:0},{value:"generatePicker",paraId:2,tocIndex:0},{value:" (or ",paraId:2,tocIndex:0},{value:"generateCalendar",paraId:2,tocIndex:0},{value:") to help create Picker components.",paraId:2,tocIndex:0},{value:"First, we initialize an antd demo. You can refer to ",paraId:3,tocIndex:0},{value:"Scaffolding Guide",paraId:3,tocIndex:0},{value:", or you can start directly here ",paraId:3,tocIndex:0},{value:"init antd",paraId:3,tocIndex:0},{value:"Create ",paraId:4,tocIndex:1},{value:"src/components/DatePicker.tsx",paraId:4,tocIndex:1},{value:".",paraId:4,tocIndex:1},{value:"For example:",paraId:5,tocIndex:1},{value:"import { DatePicker } from 'antd';\nimport type { Moment } from 'moment';\nimport momentGenerateConfig from 'rc-picker/lib/generate/moment';\n\nconst MyDatePicker = DatePicker.generatePicker<Moment>(momentGenerateConfig);\n\nexport default MyDatePicker;\n",paraId:6,tocIndex:1},{value:"Create ",paraId:7,tocIndex:2},{value:"src/components/TimePicker.tsx",paraId:7,tocIndex:2},{value:".",paraId:7,tocIndex:2},{value:"For example:",paraId:8,tocIndex:2},{value:"import * as React from 'react';\nimport type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';\nimport type { Moment } from 'moment';\n\nimport DatePicker from './DatePicker';\n\nexport interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {}\n\nconst TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => (\n  <DatePicker {...props} picker=\"time\" mode={undefined} ref={ref} />\n));\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n",paraId:9,tocIndex:2},{value:"Create ",paraId:10,tocIndex:3},{value:"src/components/Calendar.tsx",paraId:10,tocIndex:3},{value:".",paraId:10,tocIndex:3},{value:"For example:",paraId:11,tocIndex:3},{value:"import { Calendar } from 'antd';\nimport type { Moment } from 'moment';\nimport momentGenerateConfig from 'rc-picker/es/generate/moment';\n\nconst MyCalendar = Calendar.generateCalendar<Moment>(momentGenerateConfig);\n\nexport default MyCalendar;\n",paraId:12,tocIndex:3},{value:"Create ",paraId:13,tocIndex:4},{value:"src/components/index.tsx",paraId:13,tocIndex:4},{value:".",paraId:13,tocIndex:4},{value:"For example:",paraId:14,tocIndex:4},{value:"export { default as Calendar } from './Calendar';\nexport { default as DatePicker } from './DatePicker';\nexport { default as TimePicker } from './TimePicker';\n",paraId:15,tocIndex:4},{value:"Modify ",paraId:16,tocIndex:5},{value:"src/App.tsx",paraId:16,tocIndex:5},{value:",import ",paraId:16,tocIndex:5},{value:"moment",paraId:16,tocIndex:5},{value:" and custom component.",paraId:16,tocIndex:5},{value:"- import { DatePicker, Calendar } from 'antd';\n- import format from 'dayjs';\n\n+ import { DatePicker, TimePicker, Calendar } from './components';\n+ import format from 'moment';\n",paraId:17,tocIndex:5},{value:"We also provide another implementation, which we provide with ",paraId:18,tocIndex:6},{value:"@ant-design/moment-webpack-plugin",paraId:18,tocIndex:6},{value:", replacing ",paraId:18,tocIndex:6},{value:"Day.js",paraId:18,tocIndex:6},{value:" with ",paraId:18,tocIndex:6},{value:"moment",paraId:18,tocIndex:6},{value:" directly without changing a line of existing code. More info can be found at ",paraId:18,tocIndex:6},{value:"@ant-design/moment-webpack-plugin",paraId:18,tocIndex:6},{value:".",paraId:18,tocIndex:6},{value:"// webpack-config.js\nconst AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');\n\nmodule.exports = {\n  // ...\n  plugins: [new AntdMomentWebpackPlugin()],\n};\n",paraId:19,tocIndex:6},{value:"date-fns",paraId:20,tocIndex:7},{value:" currently supports custom component methods similar to ",paraId:20,tocIndex:7},{value:"dayjs",paraId:20,tocIndex:7},{value:". The difference is that the parameter types used are different. Support is provided in antd 4.5.0 and above.",paraId:20,tocIndex:7},{value:"For Example:",paraId:21,tocIndex:7},{value:"Create ",paraId:22,tocIndex:8},{value:"src/components/DatePicker.tsx",paraId:22,tocIndex:8},{value:".",paraId:22,tocIndex:8},{value:"Code as follows:",paraId:23,tocIndex:8},{value:"import { DatePicker } from 'antd';\nimport dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';\n\nconst MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig);\n\nexport default MyDatePicker;\n",paraId:24,tocIndex:8},{value:"Since ",paraId:25,tocIndex:9},{value:"antd 5.4.0",paraId:25,tocIndex:9},{value:", ",paraId:25,tocIndex:9},{value:"luxon",paraId:25,tocIndex:9},{value:" can be used instead of ",paraId:25,tocIndex:9},{value:"dayjs",paraId:25,tocIndex:9},{value:" and supports the same functionality, but it does introduce some differences in behavior that we will explain below.",paraId:25,tocIndex:9},{value:"Create a ",paraId:26,tocIndex:10},{value:"src/components/DatePicker.tsx",paraId:26,tocIndex:10},{value:" file, and implement the luxon based picker as follows:",paraId:26,tocIndex:10},{value:"import { DatePicker } from 'antd';\nimport type { DateTime } from 'luxon';\nimport luxonGenerateConfig from 'rc-picker/lib/generate/luxon';\n\nconst MyDatePicker = DatePicker.generatePicker<DateTime>(luxonGenerateConfig);\n\nexport default MyDatePicker;\n",paraId:27,tocIndex:10},{value:"luxon users should be familiar with the fact that it does not come with a custom implementation for localization. Instead, it relies on the browser's native ",paraId:28,tocIndex:11},{value:"Intl API",paraId:28,tocIndex:11},{value:".",paraId:28,tocIndex:11},{value:"This introduces some formatting differences with the other date libraries. As of today, the main differences are:",paraId:29,tocIndex:11},{value:"First day of the week is always Monday regardless of locale.",paraId:30,tocIndex:11},{value:"Week of year number is sometimes different (ISO week rules are used to determine it).",paraId:30,tocIndex:11},{value:"Short week days format will sometimes be different for custom locales (it might have 3 characters instead of 2).",paraId:30,tocIndex:11},{value:'Selected week label format will be slightly different (e.g. "2021-01" instead of "2021-1st").',paraId:30,tocIndex:11},{value:"It is possible to customize these default luxon behaviors by adjusting the luxon config:",paraId:31,tocIndex:11},{value:"import { DatePicker } from 'antd';\nimport type { DateTime } from 'luxon';\nimport luxonGenerateConfig from 'rc-picker/lib/generate/luxon';\n\nconst customLuxonConfig = {\n  ...luxonGenerateConfig,\n  getWeekFirstDay(locale) {\n    // Your custom implementation goes here\n  },\n};\n\nconst MyDatePicker = DatePicker.generatePicker<DateTime>(customLuxonConfig);\n\nexport default MyDatePicker;\n",paraId:32,tocIndex:11},{value:"Note that by doing such customization, the resulting DatePicker behavior might be altered in unexpected ways, so make sure you are testing for edge cases.",paraId:33,tocIndex:11}];}}]);