react-datetime-calendar

0.2.1 • Public • Published

######################## Author - "Deep Prakash" ########################

React DateTime Calendar

Multifunctional DateTimePicker

Install

npm install react-datetime-calendar --save

Usage

 
var DateTimePicker = require("react-datetime-calendar");
 
React.render(<DateTimePicker />, document.getElementById("myApp"));
 

Theme

1. Classic

Alt text

2. Window

Alt text

3. Cubito

Alt text

Options

  1. mode
  2. onUpdate
  3. background
  4. dateFormat
  5. timeFormat
  6. width
  7. theme

Descriptions

  1. mode - Select the mode of your calendar from - time/date/datetime.

     ```
     <DateTimePicker mode = "datetime"/>
     ```
    
  2. onUpdate - Get the value selected into a function

     ```
     <DateTimePicker onUpdate={this.getValue}/>
     ```
    
     ```
     getValue:function(value){
     	console.log(value);
     	
     	/*
     	* value is the select datetime value
     	*/
     }
     ```
    
  3. background - Set the background color of the calendar.

     ```
     <DateTimePicker background = "white"/>
     ```
    
  4. dateFormat - Allowed Values :- YYYY-MM-DD / DD-MM-YYYY / YYYY/MM/DD / DD/MM/YYYY / MONTH DATE YEAR / DATE MONTH YEAR / MONTH DATE DAY - YEAR

     ```
     <DateTimePicker dateFormat = "MONTH DATE DAY - YEAR"/>
     ```
    
  5. timeFormat - Allowed Values :- 12 / 24

     ```
     <DateTimePicker timeFormat = "12"/>
     ```
    
  6. width - Allow you to control the width of input box and calendar size. Allowed value :- Integer

     ```
     <DateTimePicker width='400' />
     ```
    
  7. theme - Allow you to choose from multiple themes. Allowed Values :- classic/window/cubito

     ```
     <DateTimePicker theme='window' />
     ```

Package Sidebar

Install

npm i react-datetime-calendar

Weekly Downloads

68

Version

0.2.1

License

ISC

Last publish

Collaborators

  • deepprakashp354