Comments (4)
Instead of importing all locales, why not have generateConfig
for date-fns take a second argument, which would be a map of all locales that you want to support? I think that's the best way to do it.
from picker.
same + 1
from picker.
My solution is write your custom config file instead of the official "dateFnsGenerateConfig".
Here is a config.ts example for zhCN:
import {
getDay,
getYear,
getMonth,
getDate,
getHours,
getMinutes,
getSeconds,
addYears,
addMonths,
addDays,
setYear,
setMonth,
setDate,
setHours,
setMinutes,
setSeconds,
isAfter,
isValid,
getWeek,
format as formatDate,
parse as parseDate,
} from 'date-fns';
import zhCN from 'date-fns/locale/zh-CN';
import { GenerateConfig } from 'rc-picker/lib/generate';
const localeParse = (format: string) => {
return format
.replace(/Y/g, 'y')
.replace(/D/g, 'd')
.replace(/gggg/, 'yyyy')
.replace(/g/g, 'G')
.replace(/([Ww])o/g, 'wo');
};
const generateConfig: GenerateConfig<Date> = {
// get
getNow: () => new Date(),
getWeekDay(date) { return getDay(date)},
getYear(date) { return getYear(date)},
getMonth (date) { return getMonth(date) },
getDate(date) { return getDate(date)},
getHour(date) { return getHours(date)},
getMinute(date) { return getMinutes(date)},
getSecond(date) { return getSeconds(date)},
// set
addYear (date, diff) {return addYears(date, diff)},
addMonth (date, diff) {return addMonths(date, diff)},
addDate (date, diff) {return addDays(date, diff)},
setYear (date, year) {return setYear(date, year)},
setMonth (date, month) {return setMonth(date, month)},
setDate (date, num) {return setDate(date, num)},
setHour (date, hour) {return setHours(date, hour)},
setMinute (date, minute) {return setMinutes(date, minute)},
setSecond(date, second) { return setSeconds(date, second)},
// Compare
isAfter(date1, date2) { return isAfter(date1, date2)},
isValidate(date) { return isValid(date)},
locale: {
getWeekFirstDay: () => {
return zhCN.options!.weekStartsOn!;
},
getWeek: (locale, date) => {
return getWeek(date, { locale: zhCN });
},
format: (locale, date, format) => {
if (!isValid(date)) {
return '';
}
return formatDate(date, localeParse(format), {
locale: zhCN,
});
},
parse: (locale, text, formats) => {
for (let i = 0; i < formats.length; i += 1) {
const format = localeParse(formats[i]);
const formatText = text;
const date = parseDate(formatText, format, new Date(), {
locale: zhCN,
});
if (isValid(date)) {
return date;
}
}
return null;
},
},
};
export default generateConfig;
Then replace "dateFnsGenerateConfig" with this one in your DatePicker generating component.
from picker.
It is the same with moment
.
from picker.
Related Issues (20)
- crash on disabledSeconds is not a function
- Support `onClear`
- Deprecated event.which property HOT 1
- rangepicker不支持受控
- When using date-fns, all locales are imported HOT 2
- Add property to remain position after picking a value
- Jest issue TypeError: generateConfig[fn] is not a function HOT 4
- the parameter of `onChange` is wrong when I click cancel button in `RangePicker` HOT 2
- TypeScript error in SinglePickerPanelProps interface during build process HOT 4
- "version": "4.3.0" ref转发的blur方法需要调用
- onCalendarChange is called with wrong value if only one value set in RangePicker
- Why the locale ko-KR uses dayFormat 'Do' as other locales don't?
- When selecting values in panel with type different than the picker type dates are auto-selected.
- picker3.14.6版本 TS1005
- DatePicker 中的 disabledDate 属性在选择年的时候 有异常
- V4.4.2 版本 TimePicker.RangePicker 样式问题
- Entering date manually in custom date-fns date picker with format
- TimePicker panel will keep scrolling after select a time. HOT 1
- Changelog is not updated since 2.4.3 HOT 1
- AM/PM is not localized in Picker Panel list for JA
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from picker.