@progress/kendo-react-dateinputs 10.0.0-develop.2 → 10.0.0-develop.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +115 -33
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -6,72 +6,153 @@
|
|
|
6
6
|
|
|
7
7
|
> **Important**
|
|
8
8
|
>
|
|
9
|
-
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)—
|
|
10
|
-
> -
|
|
11
|
-
> -
|
|
9
|
+
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)—an enterprise-grade UI library with 120+ free and premium components.
|
|
10
|
+
> - This package contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs). You can use the free components even in production, no sign-up or license required.
|
|
11
|
+
> - If you're looking for free React components, check out [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free).
|
|
12
|
+
> - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) to learn how to configure your KendoReact licensing.
|
|
13
|
+
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs).
|
|
12
14
|
> - The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!
|
|
13
15
|
>
|
|
14
16
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) and speed up your development process!
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
The React Date Inputs, part of KendoReact, offer a highly customizable interface for users to navigate between dates and date ranges, to enter and pick time and date slots, and more. All KendoReact Date Inputs support different locales.
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
- [React Calendar Component](#react-calendar-component)
|
|
20
|
-
- [React DateInput Component](#react-dateinput-component)
|
|
21
|
-
- [React DatePicker Component](#react-datepicker-component)
|
|
22
|
-
- [React Date Range Picker Component](#react-date-range-picker-component)
|
|
23
|
-
- [React DateTimePicker Component](#react-datetimepicker-component)
|
|
24
|
-
- [React MultiViewCalendar Component](#react-multiviewcalendar-component)
|
|
25
|
-
- [React Time Picker Component](#react-time-picker-component)
|
|
26
|
-
- [React Date Inputs Components Library Features](#react-date-inputs-components-library-features)
|
|
27
|
-
- [Support Options](#support-options)
|
|
28
|
-
- [Resources](#resources)
|
|
20
|
+
How to start:
|
|
29
21
|
|
|
30
|
-
|
|
22
|
+
```sh
|
|
23
|
+
npm install --save @progress/kendo-react-dateinputs @progress/kendo-date-math @progress/kendo-licensing @progress/kendo-dateinputs-common @progress/kendo-react-buttons @progress/kendo-react-common @progress/kendo-react-intl @progress/kendo-react-labels @progress/kendo-react-layout @progress/kendo-react-popup @progress/kendo-svg-icons
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
What's in this package:
|
|
27
|
+
|
|
28
|
+
- [React Date Inputs Components Library Features](#react-date-inputs-components-library-features)
|
|
29
|
+
- [React Calendar Component (free)](#react-calendar-component)
|
|
30
|
+
- [React DateInput Component (free)](#react-dateinput-component)
|
|
31
|
+
- [React DatePicker Component (free)](#react-datepicker-component)
|
|
32
|
+
- [React DateRangePicker Component (premium)](#react-date-range-picker-component)
|
|
33
|
+
- [React DateTimePicker Component (free)](#react-datetimepicker-component)
|
|
34
|
+
- [React MultiViewCalendar Component (premium)](#react-multiviewcalendar-component)
|
|
35
|
+
- [React TimePicker Component (premium)](#react-time-picker-component)
|
|
36
|
+
|
|
37
|
+
Additional information:
|
|
38
|
+
|
|
39
|
+
- [Support Options](#support-options)
|
|
40
|
+
- [Resources](#resources)
|
|
41
|
+
- [KendoReact Date Inputs API](https://www.telerik.com/kendo-react-ui/components/dateinputs/api)
|
|
42
|
+
|
|
43
|
+
## React Date Inputs Components Library Features
|
|
44
|
+
|
|
45
|
+
Among the many features which the KendoReact Date Inputs deliver are:
|
|
46
|
+
|
|
47
|
+
- **Setting the default value**—Easily configure the initial value that the Date Inputs render.
|
|
48
|
+
- **Form validation**—Validate input values, set validation requirements (such as minimum and maximum date or time) and prevent the submission of forms which are in an invalid state.
|
|
49
|
+
- **Formats and placeholders**—Control the date and time format and implement placeholders for the input field, including custom formats.
|
|
50
|
+
- **Controlled state**—Control the date and time value and popup state of the Date Inputs.
|
|
51
|
+
- **Disabled state**—To disable user input, just change a single property.
|
|
52
|
+
- **JSON integration**—You can also bind the Date Inputs to dates or times which are serialized as strings.
|
|
53
|
+
- **Custom rendering**—You can replace the input field, calendar and popup child components with custom ones.
|
|
54
|
+
- **Date limits**—Enable the user to pick a date or time within a predefined min and max date or time range.
|
|
55
|
+
- **Focused dates and times**—Configure the initial date or time value the Date Inputs display.
|
|
56
|
+
- **Accessibility support**—The Date Inputs are compliant with WAI-ARIA and Section 508.
|
|
57
|
+
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)—The KendoReact Date Inputs, as well as all 120+ components in the KendoReact suite, are styled in four polished themes (Bootstrap, Material, Fluent, and Default) and can be further customized to match your specific design guidelines.
|
|
31
58
|
|
|
32
59
|
## React Calendar Component
|
|
33
60
|
|
|
34
|
-
|
|
61
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
62
|
+
|
|
63
|
+
[The KendoReactReact Calendar component](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs), part of KendoReact Free, is a form component representing a Gregorian calendar, allowing users to intuitively select a single date, or date ranges, with a few clicks. The Fast Navigation Bar of the React Calendar provides a shortcut to quickly navigate through years and months without having to leave the context of the main calendar interface of selecting a particular day of the month. The number of the week can be an easy way to discuss upcoming vacations or events.
|
|
64
|
+
|
|
65
|
+
How to use the Calendar component in your apps:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { Calendar } from '@progress/kendo-react-dateinputs';
|
|
69
|
+
...
|
|
70
|
+
<Calendar />
|
|
71
|
+
```
|
|
35
72
|
|
|
36
73
|
## React DateInput Component
|
|
37
74
|
|
|
75
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
76
|
+
|
|
38
77
|
[The KendoReact DateInput component](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) is a perfect input component for handling quick and efficient date values. The Spin Buttons of the React DateInput, enabled by a single property, quickly increases or decreases the currently selected portion of the date. The React DateInput supports adding floating labels as part of its input.
|
|
39
78
|
|
|
79
|
+
How to use the DateInput component in your apps:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import { DateInput } from '@progress/kendo-react-dateinputs';
|
|
83
|
+
...
|
|
84
|
+
<DateInput />
|
|
85
|
+
```
|
|
86
|
+
|
|
40
87
|
## React DatePicker Component
|
|
41
88
|
|
|
42
|
-
|
|
89
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
43
90
|
|
|
44
|
-
|
|
91
|
+
[The KendoReact DatePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) is part of KendoReact Free and offers a highly customizable interface for end users to enter and pick dates supporting different locales. The React DatePicker component supports an input element for manual insertion of a date, the component also features a popup calendar to select dates in a more intuitive and visually pleasing way.
|
|
92
|
+
|
|
93
|
+
How to use the DatePicker component in your apps:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import { DatePicker } from '@progress/kendo-react-dateinputs';
|
|
97
|
+
...
|
|
98
|
+
<DatePicker />
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## React DateRangePicker Component
|
|
102
|
+
|
|
103
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
45
104
|
|
|
46
105
|
[The KendoReact DateRangePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) is part of KendoReact and offers a highly customizable interface for end users to select a range of dates spanning over multiple calendars. There may be several cases where a user would need to select the end date first and then select the start date. For this scenario, the React DateRangePicker features built-in logic to autocorrect the selection of its calendars to ensure that the start value is always before the end value.
|
|
47
106
|
|
|
107
|
+
How to use the DateRangePicker component in your apps:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
import { DateRangePicker } from '@progress/kendo-react-dateinputs';
|
|
111
|
+
...
|
|
112
|
+
<DateRangePicker />
|
|
113
|
+
```
|
|
114
|
+
|
|
48
115
|
## React DateTimePicker Component
|
|
49
116
|
|
|
117
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
118
|
+
|
|
50
119
|
[The KendoReact DateTimePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) is part of KendoReact and combines the ability to select both a date and a specific time of day through a highly-customizable component. The React DateTimePicker supports adding floating labels as part of its input. The KendoReact DateTimePicker can handle the full 24-hour clock and can select from any day in the past or the future, which may be too broad of a range for your application.
|
|
51
120
|
|
|
121
|
+
How to use the DateTimePicker component in your apps:
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { DateTimePicker } from '@progress/kendo-react-dateinputs';
|
|
125
|
+
...
|
|
126
|
+
<DateTimePicker />
|
|
127
|
+
```
|
|
128
|
+
|
|
52
129
|
## React MultiViewCalendar Component
|
|
53
130
|
|
|
131
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
132
|
+
|
|
54
133
|
[The KendoReact MultiViewCalendar component](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) offers a user interface with multiple calendars side by side to enable end users to select a range of dates spanning over multiple months. With the Multiple Views feature, any number of calendars can be added to the collection of displayed calendars. Thanks to the reverse range selection feature of the React MultiViewCalendar, no matter which order dates are selected, the component will always keep track of the start and end dates.
|
|
55
134
|
|
|
135
|
+
How to use the MultiViewCalendar component in your apps:
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
import { MultiViewCalendar } from '@progress/kendo-react-dateinputs';
|
|
139
|
+
...
|
|
140
|
+
<MultiViewCalendar />
|
|
141
|
+
```
|
|
142
|
+
|
|
56
143
|
## React Time Picker Component
|
|
57
144
|
|
|
58
|
-
|
|
145
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
59
146
|
|
|
60
|
-
|
|
147
|
+
[The KendoReact TimePicker component](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs) provides an intuitive interface for entering or selecting any time of day. For scenarios that need to limit the time slots that the KendoReact TimePicker offers to users, there are min and max configuration options to help limit the range of time slots available. The React TimePicker supports adding floating labels as part of its input.
|
|
61
148
|
|
|
62
|
-
|
|
149
|
+
How to use the TimePicker component in your apps:
|
|
63
150
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
- **JSON integration**—You can also bind the Date Inputs to dates or times which are serialized as strings.
|
|
70
|
-
- **Custom rendering**—You can replace the input field, calendar and popup child components with custom ones.
|
|
71
|
-
- **Date limits**—Enable the user to pick a date or time within a predefined min and max date or time range.
|
|
72
|
-
- **Focused dates and times**—Configure the initial date or time value the Date Inputs display.
|
|
73
|
-
- **Accessibility support**—The Date Inputs are compliant with WAI-ARIA and Section 508.
|
|
74
|
-
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)—The KendoReact Date Inputs, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
|
|
151
|
+
```tsx
|
|
152
|
+
import { TimePicker } from '@progress/kendo-react-dateinputs';
|
|
153
|
+
...
|
|
154
|
+
<TimePicker />
|
|
155
|
+
```
|
|
75
156
|
|
|
76
157
|
## Support Options
|
|
77
158
|
|
|
@@ -84,6 +165,7 @@ For any issues you might encounter while working with the KendoReact Date Inputs
|
|
|
84
165
|
## Resources
|
|
85
166
|
|
|
86
167
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)
|
|
168
|
+
- [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free)
|
|
87
169
|
- [Getting Started with the KendoReact Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)
|
|
88
170
|
- [API Reference of the KendoReact Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)
|
|
89
171
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dateinputs)
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741335102,version:"10.0.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "10.0.0-develop.
|
|
13
|
+
publishDate: 1741335102,
|
|
14
|
+
version: "10.0.0-develop.4",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-dateinputs",
|
|
3
|
-
"version": "10.0.0-develop.
|
|
3
|
+
"version": "10.0.0-develop.4",
|
|
4
4
|
"description": "React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"@progress/kendo-date-math": "^1.4.0",
|
|
29
29
|
"@progress/kendo-licensing": "^1.5.0",
|
|
30
30
|
"@progress/kendo-dateinputs-common": "^0.4.0",
|
|
31
|
-
"@progress/kendo-react-buttons": "10.0.0-develop.
|
|
32
|
-
"@progress/kendo-react-common": "10.0.0-develop.
|
|
33
|
-
"@progress/kendo-react-intl": "10.0.0-develop.
|
|
34
|
-
"@progress/kendo-react-labels": "10.0.0-develop.
|
|
35
|
-
"@progress/kendo-react-layout": "10.0.0-develop.
|
|
36
|
-
"@progress/kendo-react-popup": "10.0.0-develop.
|
|
31
|
+
"@progress/kendo-react-buttons": "10.0.0-develop.4",
|
|
32
|
+
"@progress/kendo-react-common": "10.0.0-develop.4",
|
|
33
|
+
"@progress/kendo-react-intl": "10.0.0-develop.4",
|
|
34
|
+
"@progress/kendo-react-labels": "10.0.0-develop.4",
|
|
35
|
+
"@progress/kendo-react-layout": "10.0.0-develop.4",
|
|
36
|
+
"@progress/kendo-react-popup": "10.0.0-develop.4",
|
|
37
37
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
38
38
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
39
39
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"package": {
|
|
66
66
|
"productName": "KendoReact",
|
|
67
67
|
"productCode": "KENDOUIREACT",
|
|
68
|
-
"publishDate":
|
|
68
|
+
"publishDate": 1741335102,
|
|
69
69
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
70
70
|
}
|
|
71
71
|
},
|