diff --git a/README.md b/README.md index 35dd31a..ad3a683 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,9 @@ A fast, intuitive, and elegant date and time picker for React. - `inputId` - *string* : `#id` for input field - `calendarStyle` - *object* : inline styles for calendar - `calendarClassName` - *string* : `.class` for calendar +- `calendarIcon:` - optionally button-icon to native toggle the calendar + - `className` - *string* : `.class` for icon + - `onClick` - *function* : native onClick method - `options:` - `color` - *string* : the highlight color in the UI as a hex - `corners` - *number* : the pixel size of rounded corners (default: `4`) @@ -71,6 +74,7 @@ A fast, intuitive, and elegant date and time picker for React. - `settings` - *object* : properties to override as an object (default: `{ week: { dow: 1 }, weekdaysMin: ['M', 'T', 'W', 'T', 'F', 'S', 'S'] }`) - `format`: - *object* : Moment formatting for cell titles - `today`: - *string* : default: `Today` + - `hideToday`: - *boolean* : default: `false` - `year`: - *string* : default: `YYYY` - `month`: - *string* : default: `MMM` - `day`: - *string* : default: `D` diff --git a/examples/app.js b/examples/app.js index 3470bb0..7dfe8b8 100644 --- a/examples/app.js +++ b/examples/app.js @@ -172,6 +172,7 @@ export default class App extends Component { min={minDate} max={maxDate} placeholder={'This is the placeholder'} + calendarIcon={{}} {...props} /> cell != null)} - {level != 'hours' && + {level != 'hours' && !get(this.props, 'options.format.hideToday') &&
{get(this.props, 'options.format.today') || 'Today'}
} diff --git a/src/index.js b/src/index.js index be0f66c..fa04618 100644 --- a/src/index.js +++ b/src/index.js @@ -60,6 +60,11 @@ class Kronos extends Component { inputId: PropTypes.string, calendarStyle: PropTypes.object, calendarClassName: PropTypes.string, + mainBlockClassName: PropTypes.string, + calendarIcon: PropTypes.shape({ + className: PropTypes.string, + onClick: PropTypes.func, + }), options: PropTypes.shape({ color: PropTypes.string, corners: PropTypes.number, @@ -69,7 +74,8 @@ class Kronos extends Component { settings: PropTypes.object, }), format: PropTypes.shape({ - today: PropTypes.string, + hideToday: PropTypes.bool, + today: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), year: PropTypes.string, month: PropTypes.string, day: PropTypes.string, @@ -395,11 +401,15 @@ class Kronos extends Component { 'react-kronos', this.props.instance, this.props.classes.kronos, + this.props.mainBlockClassName, + this.props.calendarIcon ? this.props.classes.border : '', + this.props.calendarIcon && this.state.dateTimeExceedsValidRange ? 'outside-range' : '', ) const inputClasses = cn( this.props.inputClassName, this.props.classes.input, - { 'outside-range': this.state.dateTimeExceedsValidRange }, + !this.props.calendarIcon ? this.props.classes.border : '', + !this.props.calendarIcon && this.state.dateTimeExceedsValidRange ? 'outside-range' : '', ) const visible = this.props.controlVisibility ? this.props.visible @@ -423,6 +433,12 @@ class Kronos extends Component { disabled={this.props.disabled} style={this.props.inputStyle} /> + {this.props.calendarIcon && +
this.props.calendarIcon.onClick ? this.props.calendarIcon.onClick(e) : this.toggle()} + /> + } {visible &&