A date time picker allows the user to select an associated date and time.
yarn add @atlaskit/datetime-picker5f9efb77e9d97 -
Adds a new prop to allow wrapping the DatePicker calendar, for internal use only.5f9efb77e9d97 -
Adds a new prop to allow wrapping the DatePicker calendar, for internal use only.#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
60472f23c74f1 -
Finish conversion of datetime picker components from class components to functional components,
and cleaning up feature flags.4660ec858a305 -
Update React from v16 to v185b235146d0faa -
Resolve dependency issue that masks test matcher problems.3e1546043c1c3 -
We are testing adding year buttons to the calendar behind a feature flag. If this fix is
successful it will be available in a later release.598b1dc3753cc -
Fix instances of module level FG evaluationd0c3d27216b7c -
Clean up props for select new improvement on theme and customized components3ab7d7da348ab -
Adds side-effect config to support Compiled css extraction in third-party appsf07cb14952573 -
Update internals of datetime picker to accommodate new props.4e6b0a538b8a2 -
Fix bug that stopped down/up arrow presses from opening the menu on the input field.bdee2726c1e39 -
Fix bug in calendar date selection caused by underlying react-select mousedown event.fc083f8b29d92 -
update datetime picker to use button component and primitivese47891c352097 -
Update date picker to include latest primitives and cssa1e80ec0a5e4a -
Enable new icons behind a feature flag.e6c2d403fadd0 -
Add clearControlLabel to datepicker component.6e87dd7dd8d3a -
When shouldShowCalendarButton is true, ensures that input text properly overflows via
controlling an underlying select component.a5c2ba68d297d -
We are testing converting the datetime picker from a class component to a functional component
behind a feature flag. If this fix is successful it will be available in a later release.709b9c76673df -
Add clearControlLabel to timepicker component.af63929f9d51a -
Fix date-picker conditional component exportdb290b80cd2f5 -
Fix bug in new calendar button escape handling to close.eca12e4531487 -
add isRequired prop8a55d1695e74a -
Use proper icon color for calendar button.56dfbfe361f96 -
Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-selectef585df54488c -
[ux] add clearButtonLabel prop in datetime-picker componentc3cf99e129677 -
Make default value from inner pickers work correctly with datetime picker values.b4b387856090d -
Ensure inner picker event blur and focus handlers don't interfere or replace internal logic.7d95e270ddda2 -
Ensure provided onChange handlers on in *PickerProps run alongside internal parsing logic
instead of overriding it.3b17d85b64fcd -
Remove unused analyticsContext prop and add unit tests for analytics.#142807
e4b42ed1ea941 -
These two props that were removed on 14.0.0 and no longer impacted the functionality of the
DateTimePicker were misrepresented in the type interface as options and have been fully removed
now.
timeIsEditabletimesWe recommend running the codemod provided in major change 14.0.0. If you have already run this once, it does not need to be run again.
9f9a53335523d -
Use parsed year instead of ISO year in internal getParsedISO function.023251c8a0af7 -
Converting the time picker from a class component into a functional component.a3f810c087f5d -
Internal changes based on calendar API changes.e6aa0942ed680 -
Deprecated props that were missed in the last deprecation patch, 13.11.1.eb8297ababb74 -
Refactors the API and ratchets down on props in the selectProps in favor of top-level
alternatives. This ensures that there is one way to do each things and there is a clear
encapsulation of what prop goes to which picker. A codemod is included which will automate all of
the changes for you.ce77b41a18a18 -
Refactoring internal state management within the pickers.a6c1f10b9f4b7 -
Refactor internal types to make spread props explicit.d7ffb64c0d672 -
Deprecated props that are either unused or where the usage causes accessibility issues. These will
be removed in the next major upgrade.8f67a01e4e56f -
Fix internal type issues with regard to forwarding types from underlying select package.84388abdd587a -
The platform.design-system-team.date-picker-input-a11y-fix_cbbxs feature flag has been removed.#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
bb13421c0a089 -
Surface removal of scroll locking behaviour without feature flag.56a62aafb8d80 -
Refactoring to make locally defined variables that were assigned as spread props explicit.404b4cb52e659 -
Launch layering in datetime picker to fix escape close issue974d1508085ce -
Accessibility changes. Add ability to change focus to the current date using ArrowUp and ArrowDown
keys while the focus is on the input.6026292f28f06 -
[ux] Allows aria-describedby on all pickers. This will ensure messages from the form's field
component will be applied properly.7b251aa2db916 -
Remove scroll locking behaviour to better support smaller screens.223959ef57c80 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.8e216367262ea -
[ux] Correct outside border of date time picker to 2px when focused95ec6562dae8 -
Removal of feature flag platform.design-system-team-date-picker-input-focus-fix_awmzp5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #73849622defdb991da -
[ux] Open date picker calendar when enter or space is pressed while input is focused and calendar
is closed.af88f34ad1bc -
This removes the platform.design-system-team.move-onblur-event-to-input-container_3z82c feature
flag. The blur event on DatePicker should fire after the calendar is closed.cf93487006a9 -
[ux] Return focus to the date picker input on date selection3a4be575c5b5 -
Updated TypeScript types for the default props of DateTimePicker to improve compatibility with
React 1822e0fd4f6694 -
Move the onBlur event from the input to the input container in DatePicker. Add the type
aria-describedby in to Field component.427c2dd9e0d6 -
[ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrastd679c084e0a9 -
Add optional label prop to DatePicker and TimePicker to supply an accessible name via
aria-label419806ebcae0 -
Export internal utility components to new file to clean up.c19c3790e6f1 -
Cleaning up date picker component by exporting internal utilities.47a2a39b4033 -
Move types for all the pickers to the appropriate types file.8e66f751df96 -
Use feature flag to roll out border width update from 2px to 1px689672b7c5b0 -
[ux] Returns focus to input after pressing Esc when inside the calendar popup in a date picker.57a79a328287 -
Revert the solution with the hidden span in the Label which was merged in scope of DST-11061.b9826ea49c47 -
Update dependencies that were impacted by HOT-106483 to latest.f12e489f23b0 -
Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).536478cdcf0b -
Made some tiny tweaks to the weekday header so its height is now an integer.4300c9d6f18 -
Associate the label with the Date / Time picker and the clear button. Add hidden span to the
Label component. This allows to associate a label with a clear button. Unit tests update.#43269
c7ab5b9501c - This
fixes it so that <TimePicker timeEditable timeFormat="hh:mm:ss"> will return seconds when the
timeformat includes seconds whereas previously it would strictly return HH:mm and not account
for the timeFormat. It is still not flexible and does not return time in your timeFormat to
avoid causing unexpected breaking changes as that HH:mm format has been there for so long.
There's a theoretical risk that HH:mm formats are expected back when HH:mm:ss format are used
and unsed improperly, but any typical parsing of datetime should handle this change perfectly
fine, with zero breaking change expected.
6c0c0407eb1 - This
cleans up the feature flag references for the keyboard accessibility changes, making them fully
available for all users.829d92bcf37 - Remove
out of date lifecycle methods in favor of up to date methods.0ab32310305 - [ux] We
are testing adding keyboard accessibility to the datepicker change behind a feature flag. If this
fix is successful it will be available in a later release.6f1daf0e449 - Prevent
calander from overlaying input when at the bottom of viewporte8bb91da805 - [ux]
Ensure menu doesn't close when focus moves within it. Makes future keyboard accessibility
possible.ba50169844e - Remove
lookahead and lookbehind in format util to support browsers without that functionality.6d8ce8bb48a - Revert
PR using regex that is not supported by Safari 16.4 and below and can crash a session599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.758165c64f6 - Fixes
bug that made escapes not work correctly in format strings.774ed69ecef - Internal
changes to use space tokens for spacing values. There is no visual change.1d5cd2e273c - [ux] We
are testing an input behavior change in date picker behind a feature flag. Now when entering a
date in the input this value will persist after selecting a date instead of being cleared, acting
like a standard input. If this fix is successful it will be available in a later release.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.6e51e0d5358 - [ux]
update border width from 2px to 1px and add 1px box-shadow when focus or error49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.56507598609 - Skip
minor dependency bumpe976f3cebd0 - Remove
excessive aria-labelledby prop, remove incorret documentation.c71b0ac8222 - [ux] Add
default label to time picker element of datetime picker. Update documentation for more accessible
examples and guidelines.e754545d460 - [ux]
Ensure no duplicate ID's when using selectProps on any of the DateTime Picker components.b50c6475079 - Make
clear button in datetime picker a button element that is out of the tab order. This mimics the
native input element's clear behavior in Safari/Edge.c0fb88b3af6 - [ux]
style(calendar): update icon color token from text.subtlest to color.icon1fc7949b336 - [ux]
Fixes a bug where the background for the calendar element was incorrectly set to
'elevation.surface'5546747df1e -
Refactoring of code to clean tech debt and make future maintenance easier98891267a5e - [ux]
Dates entered with 5+ digit years will no longer throw a RangeErrorcb8f8e76d25 - Update
types for react-select and @atlaskit/select upgrade Update commerce-ui entrypoints that caused a
pipeline issue.051095c0d82 - [ux]
Changed the Date Picker controller icon to use color.icon.disabled token when in disabled state.b8841384da6 - Disabled
background and border styles should not be applied to components that have either no background or
transparent background to begin with. Textfield and textarea variants that do not have backgrounds
(sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents
that consume these will also be affected.a91fbaf0552 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.0fbb2840aba - Add
isInvalid prop to @atlastkit/Select. The prop indicates whether if the component is in the error
state. If true, it visually shows a red border around the input.
This replaces validationState to make Select more consistent like other components that uses isInvalid prop.
Updated dependencies
299e4104e10 - [ux]
Added appearance 'none' option to component and adopts appearance handling from @atlaskit/selectdf3d5287649 - Internal
code change turning on new linting rules.429a576a4b2 - fix
change-event firing for invalid inputs in datetime-picker select.84afee665fc - [ux]
Implemented missing functionality to submit forms on enter press after a date has been selected in
DatePicker2a2dcc1cf91 - Updated
styles to use new input design tokens. Fixed bug where border radius on datePicker rendered
incorrectly.3fa327b5d01 - [ux]
Border on a subtle appearance date-picker will now persist after a date is selected and field is
in focus58d4cd75f7a - Removed
deprecated hideIcon prop from DateTimePicker because it is unused and serves no functionality.
Removed the deprecation notice for the formatDisplayLabel prop in TimePickerc3a1b950d49 - DSP-3301
specifies label to input idc2f866d31d1 - [ux] Fix
timepicker clear icon alignment7566be18f20 - [ux]
Time picker no longer loses focus to the document when tabbing through it in a popup.574b6c8ba7f - [ux]
DSP-2987 Add code to catch console error27d4f1e7121 - [ux]
Updating tokensd7542d1a7c2 - [ux]
Update Tokens in the code with those that are a better fit. New tokens will be visible only in
applications configured to use the new Tokens API (currently in alpha).These changes are intended
to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no
visual or breaking changes.c19fb116172 - [ux]
Update Tokens in the code with those that are a better fit. New tokens will be visible only in
applications configured to use the new Tokens API (currently in alpha).These changes are intended
to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no
visual or breaking changes.6f7a4353204 - Added
ability to provide custom aria-labels for next- and previous-month buttons using nextMonthLabel
and previousMonthLabel3ec9ed2c4d0 - Fixed
handling of custom times that included whitespace characters558cc136503 - Bump
moment dependency versione7438659c2e - Updated
dependency '@types/react-select' to fix type error19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changes19d72473dfb - Fix bug
in inline-edit and Form which prevented date selection in datetimepicker using the keyboard.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.#14777
354ef86cca0 -
Instrumented datetime-picker with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
2b98dfda0a6 - Removes
@emotion/styled in favour of @emotion/core.b90c0237824 - Update
package.jsons to remove unused dependencies.#9328
414b6216adf - [ux]
BREAKING CHANGE: Datetime picker now uses date-fns@2.17 (previously <2.0). This change has
tightened the requirements of users to provide ISO dates. This was never explicitly supported, but
now will cause an error to be thrown for non-ISO dates. For an abundance of caution we're calling
this a breaking change to protect users relying on the previous behaviour.
To upgrade you'll need to ensure any dates passed to the DateTimePicker are in ISO format.
Three props were added to @atlaskit/calendar and @atlaskit/datetime-picker to make disabling
dates more practical, performant and expressive:
minDate for the minimum valid datemaxDate for the maximum valid datedisabledDateFilter, a function that takes a date string, and returns whether or not it should
be disabled.c406245d637 - [ux]
Prevents the clear button appearing on disabled DateTimePickers.4db7f1e42b2 - [ux]
Fixed a bug which caused clicks on disabled date pickers to modify internal state. This led to an
issue where clicking on a disabled date picker, and then enabling it, would result in an opened
date picker.f6b951a51f2 - Removes
usage of styled-components in favour of standardising on emotion1ad2a658d5d - [ux]
Added weekStartDay prop which gets passed to the underlying Calendar instance.069538e03c6 - Prefixes
the testId passed down to the nested Calendar component with '${testId}--calendar' to ensure
testIds are namespaced correctly. This change only affects calendar testIds when used within a
DatePicker context.471e2431a7c -
Downgrade back to date-fns 1.30.1 We discovered big bundle size increases associated with the
date-fns upgrade. We're reverting the upgarde to investigate#8644
79c23df6340 - Use
injected package name and version for analytics instead of version.json.
c20be966f07 -
Internal change
@atlaskit/calendar ref type import name from CalendarInternalRef to CalendarRef.@atlaskit/calendar from internalRef to
calendarRef.Updated dependencies
#7762
9c020a0e05f - Replaced
@atlaskit/calendar exported types to access its navigate() api
CalendarClassType & ArrowKeys types with CalendarInternalRef type.ref prop with internalRef prop for accessing navigate() api.Updated dependencies
5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packages39e130698b - Fixes an
issue in DatePicker, DateTimePicker and TimePicker where they all had a circular dependency
between a type declaration and default props which led to TypeScript marking props with default
values as required props. This will no longer occur.23f968def3 - Earlier
value returned from DateTimePicker component was inconsistent, like for the first time it was
without zone offset and after that with zone offset. Now it is consistent with zone offset
every-time.db053b24d8 - Update all
the theme imports to be tree-shakable87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534038b0fbb8e - fix
typings after reverting DST-461 changes. typeof is fixed in ERT repo
(https://github.com/atlassian/extract-react-types/pull/126)a39ef6582c - Marks
default pops as optional in interface (TimePicker & DatePicker)54a9514fcf - Build and
supporting files will no longer be published to npm466aec241f - Fixing
incorrect margin for time-picker54d82b49f0 - Remove
unused dependenciesccd9c51bd3 - Fixes date
picker being affected by an invalid emotion theme provider.d2876ee14f - FIX: Add
hideIcon prop back for backwards compatibility in MINOR[minor]449ef134b3:
Add a clear icon for datepicker, timepicker and datetimepicker
[patch]ca494abcd5:
Change imports to comply with Atlassian conventions- Updated dependencies 62390c4755:
Updated dependencies cf8577f5d6:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 9a534d6a74:
Updated dependencies 57c0487a02:
Updated dependencies 6efb12e06d:
Updated dependencies fd41d77c29:
[minor]5d8fc8d0ec:
Remove the calendar icon from the datetimepicker
[patch]4d3749c9e6:
Upgraded react-scrolllock package- Updated dependencies 4d3749c9e6:
Updated dependencies dae900bf82:
Updated dependencies 8c9e4f1ec6:
[patch]116cb9b00f:
FIX: Valid time string in ISO output of Datetime picker- Updated dependencies 296a8b114b:
Updated dependencies 0603860c07:
Updated dependencies 91a1eb05db:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]24865cfaff:
Updates react-popper dependency to a safe version.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]3a20e9a596:
Make PopupSelect correctly pass props. Forcing update of @atlaskit/select for all other packages- Updated dependencies 3a20e9a596:
[patch]30acc30979:
@atlaskit/select has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[minor]c423fbf5eb:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[minor]17a07074e8:
Fix padding to be consistent with other Atlaskit form fields. This change includes removing padding from around the icon itself, and adding padding to the icon container, as well as altering the padding around the input container.
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[major]d1444cc6ef:
Converting datetime-picker to typescript. Dropping support for flow
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[minor]e3d466543f:
Add locale support for Calendar/DateTimePicker/DatePicker/TimePicker:
locale enables localization for date/time format in DatePicker, TimePicker and
DateTimePicker, and months/days in Calendar.dateFormat, timeFormat and formatDisplayLabel props. Please use locale
instead. If provided, these props will override locale.locale to format the date.DatePicker has been changed from date-fns.parse to one based on
the locale prop and accept text in a format that matches the placeholder.[patch]8784191ef6:
Date, Time, and DateTime pickers now correctly clear their value when the Backspace or Delete key is pressed
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]06819642ba:
[patch]21854842b5:
[major]7c17b35107:
[patch]98e11001ff:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[minor]a48dddb43c:
[patch]0cd7f505b3:
[patch]348d3aed19:
[minor]52827feffb:
[patch]5c548ea:
[patch]b332c91:
[patch] Removed some broken styles from the datetime-picker menu 87d45d3
[none] Updated dependencies 1d9e75a
[none] Updated dependencies a3109d3
[none] Updated dependencies 87d45d3
[patch] Updated dependencies a08b0c2