0.10.18 • Published 5 years ago
ch-calendar v0.10.18
ch-calendar
Demo
Install
npm install сh-calendar --save
Use
Modal and Button active:
import { Calendar } from 'ch-calendar'
import React, { Component } from 'react';
import 'ch-calendar/dist/ch-calendar.css'
class App extends Component {
render() {
const date = new Date();
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Test Input Field</h1>
</header>
<div className='App-intro'>
<Calendar isModal isButtonActive date={date} onSelect={(date) => { console.log(date) }} />
</div>
</div>
);
}
}
export default App;
Modal and active use code:
import React, { Component } from 'react';
import { Calendar } from 'ch-calendar'
import 'ch-calendar/dist/ch-calendar.css'
import './App.css';
class App extends Component {
constructor(props) {
super(props)
this.state = {
date: new Date(),
isActive: false
}
}
render() {
return (
<div className="App">
<button onClick={() => this.setState({ isActive: true })} >Press is active</button>
<Calendar
isModal
style={{backgroundColor: "rgba(0,0,0,0.3)"}}
isActive={this.state.isActive}
isCloseEmptyClick
onEmptyClick={() => this.setState({ isActive: false })}
date={this.state.date}
onSelect={(date) => {
console.log(date)
this.setState({ isActive: false, date })
}} />
</div>
);
}
}
export default App;
Props
Common props you may want to specify include:
isModal
- boolean If 'true' open a modal windowisButtonActive
- boolean If 'true' show 'open' button. If False, the opens is through isActive = 'true'isActive
- boolean If 'true' show windowisMonth
- boolean If 'true' select a month, else select a dayisClose
- boolean If set 'true' close a modal windowisCloseEmptyClick
- boolean If set 'true' close a modal window with empty click.date
- Date Date for mark in the calendar. If undefined, will marked today.onSelect
- function The selected date will be passed in the function in the parameter 'date'onEmptyClick
- function Call of if empty click.
0.10.18
5 years ago
0.10.17
5 years ago
0.10.16
5 years ago
0.10.15
5 years ago
0.10.14
5 years ago
0.10.12
5 years ago
0.10.11
5 years ago
0.10.10
5 years ago
0.10.9
5 years ago
0.10.8
6 years ago
0.10.7
6 years ago
0.10.6
6 years ago
0.10.5
6 years ago
0.10.4
6 years ago
0.10.3
6 years ago
0.10.2
6 years ago
0.10.1
6 years ago
0.10.0
6 years ago
0.9.7
6 years ago
0.9.6
6 years ago
0.9.5
6 years ago
0.9.4
6 years ago
0.9.3
6 years ago
0.9.2
6 years ago
0.9.1
6 years ago
0.9.0
6 years ago