Calendar icon

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`

examples/app.js

@@ -172,6 +172,7 @@ export default class App extends Component {
                 min={minDate}
                 max={maxDate}
                 placeholder={'This is the placeholder'}
+                calendarIcon={{}}
                 {...props}
               />
               <Kronos
@@ -199,6 +200,7 @@ export default class App extends Component {
                 date={this.state.controlledDatetime}
                 onChangeDateTime={::this.onChangeControlled}
                 min={minDate}
+                calendarIcon={{onClick: ::this.onClickButtonControlled}}
                 max={maxDate}
                 placeholder={'This is the placeholder'}
                 controlVisibility={true}

src/calendar.js

@@ -324,7 +324,7 @@ class Calendar extends Component {
               )
             })
             .filter(cell => cell != null)}
-          {level != 'hours' &&
+          {level != 'hours' && !get(this.props, 'options.format.hideToday') &&
             <div className={classes.today} onClick={::this.onToday}>
               {get(this.props, 'options.format.today') || 'Today'}
             </div>}

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 &&
+          <div
+            className={this.props.calendarIcon.className || this.props.classes.calendarIcon}
+            onClick={e => this.props.calendarIcon.onClick ? this.props.calendarIcon.onClick(e) : this.toggle()}
+          />
+        }
         {visible &&
           <Calendar
             instance={this.props.instance}

src/styles.js

@@ -79,18 +79,14 @@ function index(options) {
         boxSizing: 'border-box',
         userSelect: 'none',
       },
+      background: 'none',
+      border: 'none',
     },
     input: {
-      border: '1px solid transparent',
-      borderRadius: options.corners,
-      borderColor: color(options.color).alpha(0.2).rgbString(),
       fontSize: 16,
       padding: '3px 6px',
-      background: 'white',
-      '&.outside-range': {
-        color: 'white',
-        background: '#d0021b',
-      },
+      background: 'none',
+      border: 'none',
       '&:hover': {
         cursor: options.inputDisabled ? 'not-allowed' : 'default',
       },
@@ -99,6 +95,24 @@ function index(options) {
         borderColor: color(options.color).alpha(0.5).rgbString(),
       },
     },
+    border: {
+      background: 'white',
+      border: '1px solid transparent',
+      borderRadius: options.corners,
+      borderColor: color(options.color).alpha(0.2).rgbString(),
+      '&.outside-range': {
+        background: '#d0021b'
+      },
+      '&.outside-range input, input.outside-range&': {
+        color: 'white'
+      }
+    },
+    calendarIcon: {
+      margin: '2px 2px 0 0',
+      '&:before': {
+        content: "\"\\1F4C6\""
+      }
+    }
   }
 }