dateTime , permissions, liceneces and i18n handling for whole app
npm install @zohodesk/providers##36
timeZone Custom format support added
1. I18NProvider
2. ConnectI18NProvider
3. I18N
4. FormatText
5. PluralFormat
6. DateTimeFormat
``javascript`
`javascript`
onChange=((accept,reject)=>{call accept or reject})>
`javascript`
user={}
permission={}
license={}
dateTimeFormatMessages={()=>dateTimeFormatMessages}
onChange=((accept,reject)=>{call accept or reject})>
`javascript`
`javascript`
| Mask | Description | Example
| ------ | --------------------- | -------
| yyyy | 4-digits year | 1984yy
| | 2-digits year | 84MMMM
| | Month name | JanuaryMMM
| | Short month name | Janmmmm
| | Numeric month | 1 mmm
| | 2-digits month | 01 dddd
| | Numeric day | 1dd
| | 2-digits day | 01DDDD
| | Day of the week | TuesdayDDD
| | Short day of the week | TueA
| | Day period | AM, PMHHHH
| | 24-hours Numeric hour | 1HH
| | 24-hours 2-digits hour| 01hhhh
| | 12-hours Numeric hour | 1hh
| | 12-hours 2-digits hour| 01MM
| | Numeric minute | 1mm
| | 2-digits minute | 01ssss
| | Numeric second | 1ss
| | 2-digits second | 01
Default format dd MMM yyyy hh:mm A;
#### Display Date Using Component
`javascript
/>
output => 01 January
`
#### Display Date by string
`javascript
getDateTimeFormat({dateTime : apiTimeFormat, format : "dd MMMMM" });
output => 01 January
`
#### Display Date - Custom Formatting
`javascript
if(dateDetails.isToday){
return translator('Today');
}
else if(dateDetails.isTomorrow){
return translator('Tomorrow');
}
return dateConverter('dd MMMM yyyy');
}}
/>
possible outputs => Today , Tomorrow, 01 January 1984
`
#### Display Diff Date using component
`javascript
/>
output => 10 minutes ago
`
#### Display Diff Date using string
`javascript
getDateTimeFormat({ type : "diff", dateTime : apiTimeFormat , customFormat });
output => 10 minutes ago
`
#### Display Diff Date - Custom Formatting
`javascript
customFormat={(dateDetails,translator)=>{
if( days > 1){
return 'one day ago'
}
return 'many days ago'
}}
/>
output => 'one day ago'
`
`
var Greetings = ()=>{
return Hello,{this.props.name}
}
Hello - hard coded data
name - dynamic data mostly no need to I18N. In case any dynamic data going to pass generic component. use i18nUtils.getI18NValue function
I18N Implementation
var Greetings = ()=>{
return
}
`
`
textarea placeholder display i18n value
var Textarea=()=>{
return
}
You can mention particular props going to accept i18n key. so convert using I18N HOC
Textarea = HOCI18N(["placeHolder"])(Textarea)
You can use utils function
i18n json build time composes not yet done
#1.2.0-beta.9
- es6 move and prettier format
#1.2.0-beta.11
title support
missing use Cases
today yesterday tomorrow error fix
pattern format changed
#1.2.0-beta.12
user date format pattern issue fix
#1.2.0-beta.13
suffix issue fix - pattern "00000" to "0000"
#1.2.0-beta.14
proptypes move to prop-types package
"getValues" duplicate method build issue