12.9.1
Use to display the date. Year will not display if it is the current year.
DateTime defaults to the "America/New_York" timezone. Date ignores timezone.
Please note: this kit could potentially change the dates on you!
This is because the Javascript Date class does not have the concept of a date without time. If you pass a Ruby Date string to JavaScript, you will receive a date and a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.
import React from 'react' import { Date as FormattedDate } from '../../' const DateDefault = (props) => { return ( <> <FormattedDate size="sm" value={new Date()} {...props} /> <br /> <FormattedDate size="sm" value="2012-08-03" {...props} /> <br /> <FormattedDate showDayOfWeek size="sm" value="2017-12-03" {...props} /> <br /> <br /> <FormattedDate value={new Date()} {...props} /> <br /> <FormattedDate value="2012-08-03" {...props} /> <br /> <FormattedDate showDayOfWeek value="2017-12-03" {...props} /> </> ) } export default DateDefault // *Development Note* - We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used. // To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
import React from 'react' import { Date as FormattedDate } from '../..' const DateVariants = (props) => { return ( <div> <FormattedDate showIcon size="sm" value="1995-12-25" {...props} /> <br /> <br /> <FormattedDate value="1995-12-25" {...props} /> <br /> <br /> <FormattedDate showIcon value="1995-12-25" {...props} /> <br /> <br /> <FormattedDate showDayOfWeek value="1995-12-25" {...props} /> <br /> <br /> <FormattedDate showDayOfWeek showIcon value="1995-12-25" {...props} /> </div> ) } export default DateVariants
import React from 'react' import { Date as FormattedDate } from '../..' const DateAlignment = (props) => { return ( <div> <FormattedDate dayOfWeek icon value="1995-12-25" {...props} /> <br /> <FormattedDate alignment="center" dayOfWeek icon value="2020-12-25" {...props} /> <br /> <FormattedDate alignment="right" value={new Date()} {...props} /> </div> ) } export default DateAlignment