npmpackage.info

Gathering detailed insights and metrics for @commercetools-uikit/date-range-input

Other packages similar to @commercetools-uikit/date-range-input

@commercetools-uikit/date-range-field

20.2.2

A controlled date input component for a date range, with validation states and a label.

Gathering detailed insights and metrics for @commercetools-uikit/date-range-input

@commercetools-uikit/date-range-input - 20.2.2 | npmpackage.info

@commercetools-uikit/date-range-input

Component library 💅

20.2.2

148

MIT

TypeScript

79.78 kB

7.3

Installations

npm install @commercetools-uikit/date-range-input

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.17.0

NPM Version

10.9.2 Pull Requests

Open

20

Total

2,855

Closed

578

Merged

2,257

Issues

Open

43

Total

292

Closed

249

Releases

8,198

v20.2.2

Updated on Jul 08, 2025

v20.2.1

Updated on Jul 07, 2025

v20.2.0

Updated on Jun 30, 2025

v20.1.0

Updated on Jun 16, 2025

v20.0.0

Updated on Jun 02, 2025

v19.26.0

Updated on May 27, 2025

View All 8,198 releases

Languages

TypeScript

JavaScript

MDX

CSS

HTML

Prolog

Shell

TypeScript (59.12%)

JavaScript (36.8%)

MDX (2.8%)

CSS (1.02%)

HTML (0.16%)

Prolog (0.06%)

Shell (0.04%)

Developer

commercetools

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

148 Stars

3,452 Commits

27 Forks

15 Watchers

124 Branches

350 Contributors

Updated on Jul 09, 2025

Maintainers

View All 350 Contributors

Package Meta Information

Latest Version

20.2.2

Package Id

@commercetools-uikit/date-range-input@20.2.2

Unpacked Size

79.78 kB

Size

9.61 kB

File Count

NPM Version

10.9.2

Node Version

22.17.0

Published on

Jul 08, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

DateRangeInput

Description

The DateRangeInput component allows the user to select a date range.

Installation

yarn add @commercetools-uikit/date-range-input

npm --save install @commercetools-uikit/date-range-input

Additionally install the peer dependencies (if not present)

yarn add moment react react-intl

npm --save install moment react react-intl

Usage

1import DateRangeInput from '@commercetools-uikit/date-range-input';
2
3const Example = () => (
4  <DateRangeInput
5    placeholder="Select a date..."
6    value={['2017-01-11', '2017-01-14']}
7    onChange={() => {}}
8  />
9);
10
11export default Example;

Properties

Props	Type	Required	Default	Description
`horizontalConstraint`	`union` Possible values: `, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`			Horizontal size limit of the input field.
`value`	`Array: MomentInput[]`	✅		The selected date range, must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD".
`aria-invalid`	`boolean`			Indicate if the value entered in the input is invalid.
`aria-errormessage`	`string`			HTML ID of an element containing an error message related to the input.
`onChange`	`Function` See signature.			Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD".
`isClearable`	`boolean`		`true`	Allows the range to be cleared
`onFocus`	`Function` See signature.			Called when the date input gains focus.
`onBlur`	`Function` See signature.			Called when the date input loses focus.
`id`	`string`			Used as the HTML `id` attribute.
`name`	`string`			Used as the HTML `name` attribute.
`placeholder`	`string`			Placeholder value to show in the input field
`isCondensed`	`boolean`			Use this property to reduce the paddings of the component for a ui compact variant
`isDisabled`	`boolean`			Disables the date picker
`isReadOnly`	`boolean`			Disables the date picker menu and makes input field read-only
`hasError`	`boolean`			Indicates the input field has an error
`hasWarning`	`boolean`			Indicates the input field has warning

Signatures

Signature `onChange`

1(event: TCustomEvent) => void

Signature `onFocus`

1(event: TCustomEvent) => void

Signature `onBlur`

1(event: TCustomEvent) => void

`data-*` props

The component further forwards all data- attributes to the underlying input component.

Static methods

`DateRangeInput.isEmpty`

Returns true when the value is considered empty, which is when the value is an empty array.

1TextInput.isEmpty([]); // -> true
2TextInput.isEmpty(['2018-09-20', '2018-09-24']); // -> false

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

SAST

Determines if the project uses static code analysis.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/close-inactive-issues.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/close-inactive-issues.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/merge-blocking-labels.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/merge-blocking-labels.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/preview-release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/preview-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:79: update your workflow using https://app.stepsecurity.io/secureworkflow/commercetools/ui-kit/release.yml/main?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 5 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

Score

7.3

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @commercetools-uikit/date-range-input

Other packages similar to @commercetools-uikit/date-range-input

@commercetools-uikit/date-range-input

Installations

Developer Guide

Yes

CommonJS

22.17.0

10.9.2

Pull Requests

20

2,855

578

2,257

Issues

43

292

249

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

DateRangeInput

Description

Installation

Usage

Properties

Signatures

Signature onChange

Signature onFocus

Signature onBlur

data-* props

Static methods

DateRangeInput.isEmpty

10

10

10

10

10

10

9

8

8

0

0

0

0

7.3

/10

Signature `onChange`

Signature `onFocus`

Signature `onBlur`

`data-*` props

`DateRangeInput.isEmpty`