Date Time

The Date Time component allow users to choose a date from the calendar and time from picker. It is a very flexible component and supports following types :

1. date: It provides a calender to select date.
2. time: It provides a time picker to select time.
3. datetime: It provides a both calender and time pick to select date and time.

It can be shown in 2 display modes:

1. inline: In this Component is rendered as a part of page.
2. modal: In this Component is rendered inside a modal window (default).

Usage

Basic Usage

import {Datetime} from 'arivaa-basic';

//Default Modal Date time picker
<Datetime type={'datetime'}/>

//Default Modal Date picker
<Datetime type={'date'}/>

//Default Modal time picker
<Datetime type={'time'}/>

//Default Inline Date time picker
<Datetime type={'datetime'} displayMode="inline"/>

//Default Inline Date picker
<Datetime type={'date'} displayMode="inline"/>

//Default Inline time picker
<Datetime type={'time'} displayMode="inline"/>

//Date Time Picker With 24 Hours format
<Datetime type={'datetime'} use12Hours={false}/>

//Time Picker With 24 Hours format
<Datetime type={'time'} use12Hours={false}/>

 

Advanced Usage

Managed Modal

import {Button,Datetime} from 'arivaa-basic';
 <Datetime
    modalTrigger={false}//Set modalTrigger to false to manage visibility manually.
    visible={this.state.visible}
    type={'datetime'}/>

<Button type={'bordered'} onClick={()=>{this.setState({visible:!this.state.visible})}}
                              text={'Open Managed Date Time Picker'}/>

 

Note: This component is completely compatible with Form Component and can be used with the forms architecture.

Supported Properties

Properties	Description	Type	Default
visible	it is a boolean indicating whether Date Time Picker should visible or not ( for display as a modal purpose )	boolean	false
type	date , time and datetime to show respective date and time views	string	datetime
value	it is a object of date which is selected by default ( points to current date ) if not passed or invalid value is passed.	object	-
onChange	it is a function called when user make changes to picker. It receives a parameter which is a object of date.	function	-
displayMode	it represents display mode of picker. Supported modes are modal and inline .	string	modal
onShow	it is a function called when date time picker becomes visible.	function	-
onHide	it is a function called when date time picker vanishes.	function	-