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 -

Published On October 14, 2020 12:27 PM

Last Updated October 14, 2020 12:27 PM