@contentful/f36-datepicker NPM

title: 'Datepicker' status: 'stable' isNew: true slug: /components/datepicker/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/datepicker' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-datepicker' typescript: ./src/Datepicker.tsx

section: 'dateComponents'

Datepicker component enables users to enter a date either through text input or selecting a date from the Calendar dropdown.

The Datepicker component combines text input, and calendar in dropdown.

Use Datepicker to ask user's for date input in forms, modals, or filtering.

Import

import { Datepicker } from '@contentful/f36-components';
// or
import { Datepicker } from '@contentful/f36-datepicker';

Examples

Basic

Display Datepicker component with text input

Date Formats

Datepicker supports printing out different formats to users, see https://date-fns.org/v2.16.1/docs/format

At Contentful we use dd LLL yyyy format to communicate date to users, example 31 Jan 2021

Visual States

Visual states indicates to users certain messages through UI.

Communicate to the users in text why the Datepicker is in a specific state, example:

Disabled: "You don't have access to edit this field!" Invalid: "Please enter a valid date!"

Wrapped in FormControl

You can use Datepicker with the FormControl in order to enhance layout with input label, help text or validation message.

Limiting the date range

Set mininum and/or maximum dates to limit users to choose from a specific period in time.

Use the fromDate and toDate properties to control time frames.

Multiple months

If you need to show more than a month at once, use the numberOfMonths property.

Open by default

Use the defaultIsOpen property to open the dropdown and display the Calendar by default without user interaction.

Note: the Calendar closes by pressing the escape key or by clicking outside of the Datepicker.

Custom

If you need a custom solution, you can build it by leveraging our lower-level components, such as Calendar, Popover, and TextInput. For example, Datepicker that uses text input as a trigger without a button.

Props (API reference)

Accessibility

Keyboard navigation is supported
Necessary aria roles are provided by default
When providing a label, ensure it's linked to the text input

@contentful/f36-core @contentful/f36-typography @contentful/f36-forms @contentful/f36-popover @contentful/f36-icons @contentful/f36-button @contentful/f36-tokens emotion date-fns react-day-picker react-focus-lock

@infinitebrahmanuniverse/nolb-_cont @everything-registry/sub-chunk-196 @zalastax/nolb-_cont @contentful/f36-components

10 days ago

12 days ago

13 days ago

13 days ago

16 days ago

19 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

8 months ago

7 months ago

8 months ago

7 months ago

10 months ago

9 months ago

9 months ago

10 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

11 months ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

4.0.1-next-v4-6811.2284

3 years ago

4.0.1-next-v4-6748.2278

3 years ago

4.0.1-next-v4-6754.2279

3 years ago

4.0.1-next-v4-6854.2286

3 years ago

4.0.1-next-v4-6831.2285

3 years ago

4.0.1-next-v4-6859.2287

3 years ago

4.0.1-next-v4-6763.2280

3 years ago

4.0.1-next-v4-6795.2281

3 years ago

4.0.1-next-v4-6660.2272

3 years ago

4.0.1-next-v4-6682.2274

3 years ago

4.0.1-next-v4-6652.2269

3 years ago

4.0.1-next-v4-6664.2273

3 years ago

4.0.1-next-v4-6714.2276

3 years ago

4.0.1-next-v4-6685.2275

3 years ago

4.0.1-next-v4-6507.2250

3 years ago

4.0.1-next-v4-6548.2251

3 years ago

4.0.1-next-v4-6436.2246

3 years ago

4.0.1-next-v4-6471.2249

3 years ago

4.0.1-next-v4-6423.2245

3 years ago

4.0.1-next-v4-6443.2247

3 years ago

4.0.1-next-v4-6465.2248

3 years ago

4.0.1-next-v4-6408.2244

3 years ago

4.0.1-next-v4-6391.2243

3 years ago

4.0.1-next-v4-6330.2234

3 years ago

4.0.1-next-v4-6313.2230

3 years ago

4.0.1-next-v4-6321.2232

3 years ago

4.0.1-next-v4-6265.2213

3 years ago

4.0.1-next-v4-6254.2212

3 years ago

4.0.1-next-v4-6317.2231

3 years ago

4.0.1-next-v4-6289.2215

3 years ago

4.0.1-next-v4-6282.2214

3 years ago

4.0.1-next-v4-6381.2242

3 years ago

4.0.1-next-v4-6179.2211

3 years ago

4.0.1-next-v4-6174.2195

3 years ago

4.0.1-next-v4-5782.2167

3 years ago

4.0.1-next-v4-5860.2171

3 years ago

4.0.1-next-v4-5803.2169

3 years ago

4.0.1-next-v4-5794.2168

3 years ago

4.0.1-next-v4-5823.2170

3 years ago

4.0.1-next-v4-5719.2157

3 years ago

4.0.1-next-v4-5664.2154

3 years ago

4.0.1-next-v4-5635.2153

3 years ago

4.0.1-next-v4-5670.2155

3 years ago

4.0.1-next-v4-5566.2134

3 years ago

4.0.1-next-v4-5419.2131

3 years ago

4.0.1-next-v4-5449.2133

3 years ago

4.0.1-next-v4-5343.2128

3 years ago

4.0.1-next-v4-5359.2129

3 years ago

4.0.1-next-v4-5428.2132

3 years ago

4.0.1-next-v4-5363.2130

3 years ago

4.0.1-next-v4-5318.2127

3 years ago

4.0.1-next-v4-5171.2092

3 years ago

4.0.1-next-v4-5114.2091

3 years ago

4.0.1-next-v4-5106.2090

3 years ago

4.0.1-next-v4-5052.2088

3 years ago

4.0.1-next-v4-4945.2086

3 years ago

4.0.1-next-v4-4961.2087

3 years ago

4.0.1-next-v4-4931.2084

3 years ago

4.0.1-next-v4-4940.2085

3 years ago

4.0.1-next-v4-4835.2083

3 years ago

4.0.1-next-v4-4759.2074

3 years ago

4.0.1-next-v4-4531.2002

3 years ago

4.0.1-next-v4-4528.2001

3 years ago

4.0.1-next-v4-4270.1987

3 years ago

4.0.1-next-v4-4460.1997

3 years ago

4.0.1-next-v4-4324.1989

3 years ago

4.0.1-next-v4-4019.1969

3 years ago

4.0.1-next-v4-4466.1998

3 years ago

4.0.1-next-v4-4279.1988

3 years ago

4.0.1-next-v4-4389.1990

3 years ago

4.0.1-next-v4-4229.1985

3 years ago

4.0.1-next-v4-4168.1982

3 years ago

4.0.1-next-v4-4009.1968

3 years ago

4.0.1-next-v4-4488.2000

3 years ago

4.0.1-next-v4-4457.1996

3 years ago

4.0.1-next-v4-4252.1986

3 years ago

4.0.1-next-v4-4068.1970

3 years ago

4.0.1-next-v4-4479.1999

3 years ago

4.0.1-next-v4-4197.1983

3 years ago

4.0.1-next-v4-4216.1984

3 years ago

4.0.1-next-v4-3902.1951

3 years ago

4.0.1-next-v4-3889.1950

3 years ago

4.0.1-next-v4-3873.1949

3 years ago

4.0.1-next-v4-3855.1945

3 years ago

4.0.1-next-v4-3869.1948

3 years ago

4.0.1-next-v4-3858.1946

3 years ago

4.0.1-next-v4-3834.1925

3 years ago

4.0.1-next-v4-3719.1924

3 years ago

4.0.1-next-v4-3683.1923

3 years ago

4.0.1-next-v4-3678.1922

3 years ago

4.0.1-next-v4-3661.1921

3 years ago

4.0.1-next-v4-3608.1919

3 years ago

4.0.1-next-v4-3595.1918

3 years ago

4.0.1-next-v4-3626.1920

3 years ago

4.0.1-next-v4-3567.1917

3 years ago

4.0.1-next-v4-3549.1909

3 years ago

4.0.1-next-v4-3554.1912

3 years ago

4.0.1-next-v4-3534.1908

3 years ago

4.0.1-next-v4-3500.1907

3 years ago

4.0.1-next-v4-3486.1896

3 years ago

4.0.1-next-v4-3479.1890

3 years ago

4.0.1-next-v4-3454.1886

3 years ago