@progress/kendo-dateinputs-react-wrapper
Version:
Kendo UI DateInputs wrapper for React
161 lines (133 loc) • 6.66 kB
Markdown
---
title: Overview
page_title: DateInputs Overview - Components - Kendo UI Wrappers for React
description: "Learn about the Kendo UI wrappers for React which are delivered by the DateIputs package."
slug: overview_dateinputs
position: 0
---
# DateInputs Overview
The DateInputs enable the user to pick up dates and times for scheduling appointments.
<div class="row components-overview-list mt-70 mb-50 pb-50 separator-bottom">
<a href="{% slug overview_calendar %}" class="col-md-3">
<svg id="calendar" viewbox="0 0 72 72">
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-4.4853" y1="59.2968" x2="74.4853" y2="13.7032">
<stop offset="0" style="stop-color:#FF9B5E"/>
<stop offset="8.618834e-02" style="stop-color:#FF8C5D"/>
<stop offset="0.1949" style="stop-color:#FF7F5B"/>
<stop offset="0.3" style="stop-color:#FF7B5B"/>
<stop offset="0.7" style="stop-color:#FF6358"/>
<stop offset="0.7835" style="stop-color:#FC5F59"/>
<stop offset="0.8701" style="stop-color:#F4525E"/>
<stop offset="0.9577" style="stop-color:#E63E65"/>
<stop offset="1" style="stop-color:#DD3169"/>
</linearGradient>
</defs>
<path d="M60,57.5L51.5,66H12V15H6v51v6h6h42l12-12V15h-6V57.5z M45,0h6v12h-6V0z M27,24l-6,6v24h6V24z M33,30h12v6h-6
l-6,6v6l6,6h6l6-6H39v-6h6l6-6v-6l-6-6h-6L33,30z M21,0h6v12h-6V0z M0,3h18v6H0V3z M54,3v6h12l6-6H54z M30,3h12v6H30V3z"/>
</svg>
<div class="h4 mt-10 mb-5">Calendar</div>
<p>A component for date selection and navigation.</p>
</a>
<a href="{% slug overview_dateinput %}" class="col-md-3">
<svg id="dateinput" viewbox="0 0 72 72">
<path d="M0,30v42h72V30H0z M66,66H6V36h60V66z M16.2,60L12,55.8l4.8-4.8l4.2-4.2l4.8-4.8l4.2,4.2L25.2,51L21,55.2
L16.2,60z M37.2,60L33,55.8l4.8-4.8l4.2-4.2l4.8-4.8l4.2,4.2L46.2,51L42,55.2L37.2,60z"/>
</svg>
<div class="h4 mt-10 mb-5">DateInput</div>
<p>An input field which recognizes and formats values as dates.</p>
</a>
<a href="{% slug overview_datepicker %}" class="col-md-3">
<svg id="datepicker" viewbox="0 0 72 72">
<path d="M30,21h9v9h-9V21z M42,21h9v9h-9V21z M18,33h9v9h-9V33z M30,33h9v9h-9V33z M42,33h9v9h-9V33z M18,45h9v9h-9V45z
M30,45h9v9h-9V45z M57,57.5L48.5,66H12V12H6v60h6h39l12-12V12h-6V57.5z M0,0v6h66l6-6H0z"/>
</svg>
<div class="h4 mt-10 mb-5">DatePicker</div>
<p>A component which allows the fast selection of date values.</p>
</a>
<a href="{% slug overview_datetimepicker %}" class="col-md-3">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path class="st0" d="M13,8h-3V5h3V8z M17,5h-3v3h3V5z M9,9H6v3h3V9z M13,9h-3v3h3V9z M17,9h-3v3h3V9z M9,13H6v3h3V13z M9,17H6v3h3
V17z M21,4h-2v8h2V4z M4,22V4H2v20h7v-2H4z M0,2h22l2-2H0V2z M21,18.5c0,3-2.5,5.5-5.5,5.5c-3,0-5.5-2.5-5.5-5.5s2.5-5.5,5.5-5.5
C18.5,13,21,15.5,21,18.5z M19,18.5c0-1.9-1.6-3.5-3.5-3.5S12,16.6,12,18.5s1.6,3.5,3.5,3.5S19,20.4,19,18.5z M16,18v-1h-1v2h2v-1
H16z"/>
</svg>
<div class="h4 mt-10 mb-5">DateTimePicker</div>
<p>A component for selecting date and time values.</p>
</a>
<a href="{% slug overview_timepicker %}" class="col-md-3">
<svg id="timepicker" viewbox="0 0 72 72">
<path d="M36,36V21l-6-6v21v6h6h21l-6-6H36z M36,0C16.1,0,0,16.1,0,36s16.1,36,36,36s36-16.1,36-36S55.9,0,36,0z M36,66
C19.4,66,6,52.6,6,36C6,19.4,19.4,6,36,6s30,13.4,30,30C66,52.6,52.6,66,36,66z"/>
</svg>
<div class="h4 mt-10 mb-5">TimePicker</div>
<p>A component for selecting time values from a time-list.</p>
</a>
</div>
## Basic Usage
The following example demonstrates the Calendar, DateInput, DatePicker, DateTimePicker, and TimePicker components in action.
{% meta height:560 %}
```jsx-preview
class LayoutsContainer extends React.Component {
constructor(props) {
super(props);
this.date = props.date
}
render() {
return (
<div className={"row example-wrapper"}>
<div className={"col-xs-12 col-md-6 example-col"}>
<p>DateInput</p>
<DateInput value = {this.date}/>
<p>(use <code>←</code> and <code>→</code> to navigate, <code>↑</code> and <code>↓</code> to update)</p>
<p>DatePicker</p>
<DatePicker value ={this.date}/>
<p>(use <code>Alt</code>+<code>↓</code> to open the Calendar)</p>
<p>DateTimePicker</p>
<DateTimePicker value ={this.date}/>
<p>(use <code>Alt</code>+<code>↓</code> to open the Calendar)</p>
<p>TimePicker</p>
<TimePicker value={this.date}/>
<p>(use Alt+↓ to open the time list, Tab to move to the next time section in the popup, ↑ to increment and ↓ to decrement the value)</p>
</div>
<div className={"col-xs-12 col-md-6 example-col"}>
<p>Calendar</p>
<Calendar value ={this.date}/>
</div>
</div>
);
}
}
ReactDOM.render(
<LayoutsContainer date = {new Date()} />,
document.querySelector('my-app')
);
```
{% endmeta %}
## Installation
All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, import from the package only the desired component.
1. Download and install the package.
```sh
npm install --save @progress/kendo-dateinputs-react-wrapper
```
2. Once installed, import the desired component from the package.
```sh
import { DatePicker } from '@progress/kendo-dateinputs-react-wrapper';
```
The package also exports the following individual components:
* Calendar
* DateInput
* DatePicker
* DateTimePicker
* TimePicker
3. You are required to install one of the Kendo UI themes to style your components.
## Dependencies
The DateInputs package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
* @progress/kendo-ui
## Suggested Links
* [Get Started with the Calendar]({% slug overview_calendar %})
* [Get Started with the DateInput]({% slug overview_dateinput %})
* [Get Started with the DatePicker]({% slug overview_datepicker %})
* [Get Started with the DateTimePicker]({% slug overview_datetimepicker %})
* [Get Started with the TimePicker]({% slug overview_timepicker %})