unthunk · unthunk · Oct 29, 2015 · Oct 28, 2015 · Oct 29, 2015 · Oct 29, 2015
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ DateTimeField
 | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |
 | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
 | **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') |
+| **icons** | object| {time: 'glyphicon glyphicon-time', date: 'glyphicon glyphicon-calendar', up: 'glyphicon glyphicon-chevron-up', down: 'glyphicon glyphicon-chevron-down', previous: 'glyphicon glyphicon-chevron-left', next: 'glyphicon glyphicon-chevron-right', today: 'glyphicon glyphicon-screenshot', clear: 'glyphicon glyphicon-trash', close: 'glyphicon glyphicon-remove'} | Optionally replace any/all of the icons |
 
 Update Warning
 ===============================

diff --git a/examples/basic/basic.js b/examples/basic/basic.js
@@ -76,15 +76,25 @@ class Basic extends Component {
                 </pre>
               </div>
             </div>
-              <div className="row">
-                <div className="col-xs-12">
-                  Example with default Text
-                  <DateTimeField
-                    defaultText="Please select a date"
-                  />
-                  <pre> {'<DateTimeField defaultText="Please select a date" />'} </pre>
-                </div>
+            <div className="row">
+              <div className="col-xs-12">
+                Example with default Text
+                <DateTimeField
+                  defaultText="Please select a date"
+                />
+                <pre> {'<DateTimeField defaultText="Please select a date" />'} </pre>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col-xs-12">
+                Example with Icons
+                <DateTimeField
+                  defaultText="Please select a date"
+                  icons={{time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-chevron-up', down: 'fa fa-chevron-down', previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-crosshairs', clear: 'fa fa-trash', close: 'fa fa-times'}}
+                />
+              <pre> {'<DateTimeField defaultText="Please select a date" icons={{time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: "fa fa-chevron-left", next: "fa fa-chevron-right", today: "fa fa-crosshairs", clear: "fa fa-trash", close: "fa fa-times"}}/>'} </pre>
               </div>
+            </div>
             <div className="row">
 							<div className="col-xs-12">
 								Default Basic Example

diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -3,6 +3,7 @@
 <head>
 <title>Basic Example</title>
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
 <link href="../bootstrap-datetimepicker.min.css" rel="stylesheet">
 </head>
 <body>

diff --git a/src/DateTimeField.js b/src/DateTimeField.js
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from "react";
 import moment from "moment";
-import { Glyphicon } from "react-bootstrap";
 import DateTimePicker from "./DateTimePicker.js";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 import Constants from "./Constants.js";
 
 export default class DateTimeField extends Component {
@@ -47,14 +47,15 @@ export default class DateTimeField extends Component {
     showToday: PropTypes.bool,
     viewMode: PropTypes.string,
     size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]),
-    daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.integer)
+    daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.integer),
+    icons: PropTypes.object
   }
 
   state = {
       showDatePicker: this.props.mode !== Constants.MODE_TIME,
       showTimePicker: this.props.mode === Constants.MODE_TIME,
       inputFormat: this.resolvePropsInputFormat(),
-      buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "calendar",
+      buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "date",
       widgetStyle: {
         display: "block",
         left: -9999
@@ -344,6 +345,7 @@ export default class DateTimeField extends Component {
                   addMonth={this.addMonth}
                   addYear={this.addYear}
                   daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+                  icons={this.props.icons}
                   maxDate={this.props.maxDate}
                   minDate={this.props.minDate}
                   mode={this.props.mode}
@@ -372,7 +374,7 @@ export default class DateTimeField extends Component {
             <div className={"input-group date " + this.size()} ref="datetimepicker">
               <input className="form-control" onChange={this.onChange} type="text" value={this.state.inputValue} {...this.props.inputProps}/>
               <span className="input-group-addon" onBlur={this.onBlur} onClick={this.onClick} ref="dtpbutton">
-                <Glyphicon glyph={this.state.buttonIcon} />
+                <DateTimePickerIcons icons={this.props.icons} glyph={this.state.buttonIcon} />
               </span>
             </div>
           </div>

diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js
@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from "react";
-import { Glyphicon } from "react-bootstrap";
 import classnames from "classnames";
 import DateTimePickerDate from "./DateTimePickerDate.js";
 import DateTimePickerTime from "./DateTimePickerTime.js";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 import Constants from "./Constants.js";
 
 export default class DateTimePicker extends Component {
@@ -50,6 +50,7 @@ export default class DateTimePicker extends Component {
               addMonth={this.props.addMonth}
               addYear={this.props.addYear}
               daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+              icons={this.props.icons}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
               selectedDate={this.props.selectedDate}
@@ -75,6 +76,7 @@ export default class DateTimePicker extends Component {
         <DateTimePickerTime
               addHour={this.props.addHour}
               addMinute={this.props.addMinute}
+              icons={this.props.icons}
               mode={this.props.mode}
               selectedDate={this.props.selectedDate}
               setSelectedHour={this.props.setSelectedHour}
@@ -98,7 +100,7 @@ export default class DateTimePicker extends Component {
                     <tr>
                       <td>
                         <a onClick={this.props.togglePicker} data-action="togglePicker" title="Select Time">
-                          <Glyphicon glyph={this.props.showTimePicker ? "calendar" : "time"} />
+                          <DateTimePickerIcons glyph={this.props.showTimePicker ? "date" : "time"} icons={this.props.icons} />
                         </a>
                       </td>
                     </tr>

diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js
@@ -84,6 +84,7 @@ export default class DateTimePickerDate extends Component {
       <DateTimePickerDays
             addMonth={this.props.addMonth}
             daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+            icons={this.props.icons}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
             selectedDate={this.props.selectedDate}
@@ -104,6 +105,7 @@ export default class DateTimePickerDate extends Component {
       return (
       <DateTimePickerMonths
             addYear={this.props.addYear}
+            icons={this.props.icons}
             selectedDate={this.props.selectedDate}
             setViewMonth={this.setViewMonth}
             showYears={this.showYears}
@@ -121,6 +123,7 @@ export default class DateTimePickerDate extends Component {
       return (
       <DateTimePickerYears
             addDecade={this.props.addDecade}
+            icons={this.props.icons}
             selectedDate={this.props.selectedDate}
             setViewYear={this.setViewYear}
             subtractDecade={this.props.subtractDecade}
@@ -144,4 +147,3 @@ export default class DateTimePickerDate extends Component {
     );
   }
 }
-
diff --git a/src/DateTimePickerDays.js b/src/DateTimePickerDays.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from "react";
 import moment from "moment";
 import classnames from "classnames";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 
 export default class DateTimePickerDays extends Component {
   static propTypes = {
@@ -69,16 +70,21 @@ export default class DateTimePickerDays extends Component {
   }
 
   render() {
+    console.log(this.props)
     return (
     <div className="datepicker-days" style={{display: "block"}}>
         <table className="table-condensed">
           <thead>
             <tr>
-              <th className="prev" onClick={this.props.subtractMonth}>‹</th>
+              <th className="prev" data-action="previous" >
+                <DateTimePickerIcons onClick={this.props.subtractMonth} icons={this.props.icons} glyph="previous" />
+              </th>
 
               <th className="picker-switch" data-action="pickerSwitch" colSpan="5" onClick={this.props.showMonths}>{moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()}</th>
 
-              <th className="next" onClick={this.props.addMonth}>›</th>
+              <th className="next" data-action="next" >
+                <DateTimePickerIcons onClick={this.props.addMonth} icons={this.props.icons} glyph="next" />
+              </th>
             </tr>
 
             <tr>

diff --git a/src/DateTimePickerHours.js b/src/DateTimePickerHours.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from "react";
-import { Glyphicon } from "react-bootstrap";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 import Constants from "./Constants.js";
 
 export default class DateTimePickerHours extends Component {
@@ -20,7 +20,7 @@ export default class DateTimePickerHours extends Component {
                     <tr>
                       <td>
                         <a className="togglePicker" onClick={this.props.onSwitch} data-action="togglePicker" title="Select Time">
-                          <Glyphicon glyph="time" />
+                          <DateTimePickerIcons icons={this.props.icons} glyph="time" />
                         </a>
                       </td>
                     </tr>

diff --git a/src/DateTimePickerIcons.js b/src/DateTimePickerIcons.js
@@ -0,0 +1,35 @@
+import React, { Component, PropTypes } from "react";
+
+export default class DateTimePickerIcons extends Component {
+  static defaultProps = {
+    defaultIcons: {
+        time: 'glyphicon glyphicon-time',
+        date: 'glyphicon glyphicon-calendar',
+        up: 'glyphicon glyphicon-chevron-up',
+        down: 'glyphicon glyphicon-chevron-down',
+        previous: 'glyphicon glyphicon-chevron-left',
+        next: 'glyphicon glyphicon-chevron-right',
+        today: 'glyphicon glyphicon-screenshot',
+        clear: 'glyphicon glyphicon-trash',
+        close: 'glyphicon glyphicon-remove'
+    }
+  }
+
+  getIcon = () => {
+    var ret = this.props.icons && this.props.icons[this.props.glyph] ? this.props.icons[this.props.glyph] : this.props.defaultIcons[this.props.glyph];
+    return ret;
+  }
+
+  getClasses = () => {
+    var ret = this.props.className ? "" + this.props.className + " " + this.getIcon() : this.getIcon();
+    return ret;
+  }
+
+  render() {
+    return (
+      <span {...this.props} className={this.getClasses()}>
+        {this.props.children}
+      </span>
+    );
+  }
+}
diff --git a/src/DateTimePickerMinutes.js b/src/DateTimePickerMinutes.js
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from "react";
-import { Glyphicon } from "react-bootstrap";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 import Constants from "./Constants.js";
 
 export default class DateTimePickerMinutes extends Component {
@@ -19,7 +19,7 @@ export default class DateTimePickerMinutes extends Component {
                     <tr>
                       <td>
                         <a className="togglePicker"  onClick={this.props.onSwitch} data-action="togglePicker" title="Select Time">
-                          <Glyphicon glyph="time" />
+                          <DateTimePickerIcons glyph="time" icons={this.props.icons} />
                         </a>
                       </td>
                     </tr>

diff --git a/src/DateTimePickerMonths.js b/src/DateTimePickerMonths.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from "react";
 import classnames from "classnames";
 import moment from "moment";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 
 export default class DateTimePickerMonths extends Component {
   static propTypes = {
@@ -35,11 +36,15 @@ export default class DateTimePickerMonths extends Component {
           <table className="table-condensed">
             <thead>
               <tr>
-                <th className="prev" onClick={this.props.subtractYear}>‹</th>
+                <th className="prev" data-action="previous" onClick={this.props.subtractYear} >
+                  <DateTimePickerIcons icons={this.props.icons} glyph="previous" />
+                </th>
 
                 <th className="picker-switch" data-action="pickerSwitch" colSpan="5" onClick={this.props.showYears}>{this.props.viewDate.year()}</th>
 
-                <th className="next" onClick={this.props.addYear}>›</th>
+                <th className="next" data-action="next" onClick={this.props.addYear} >
+                  <DateTimePickerIcons icons={this.props.icons} glyph="next" />
+                </th>
               </tr>
             </thead>
 

diff --git a/src/DateTimePickerTime.js b/src/DateTimePickerTime.js
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from "react";
-import { Glyphicon } from "react-bootstrap";
 import DateTimePickerMinutes from "./DateTimePickerMinutes";
 import DateTimePickerHours from "./DateTimePickerHours";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 import Constants from "./Constants.js";
 
 export default class DateTimePickerTime extends Component {
@@ -65,11 +65,11 @@ export default class DateTimePickerTime extends Component {
         <table className="table-condensed">
           <tbody>
             <tr>
-              <td><a className="btn" data-action="incrementHours" onClick={this.props.addHour}><Glyphicon glyph="chevron-up" /></a></td>
+              <td><a className="btn" data-action="incrementHours" onClick={this.props.addHour}><DateTimePickerIcons glyph="up" icons={this.props.icons} /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn"data-action="incrementMinutes"  onClick={this.props.addMinute}><Glyphicon glyph="chevron-up" /></a></td>
+              <td><a className="btn" data-action="incrementMinutes" onClick={this.props.addMinute}><DateTimePickerIcons glyph="up" icons={this.props.icons} /></a></td>
 
               <td className="separator"></td>
             </tr>
@@ -87,11 +87,11 @@ export default class DateTimePickerTime extends Component {
             </tr>
 
             <tr>
-              <td><a className="btn" data-action="decrementHours" onClick={this.props.subtractHour}><Glyphicon glyph="chevron-down" /></a></td>
+              <td><a className="btn" data-action="decrementHours" onClick={this.props.subtractHour}><DateTimePickerIcons glyph="down" icons={this.props.icons} /></a></td>
 
               <td className="separator"></td>
 
-              <td><a className="btn" data-action="decrementMinutes" onClick={this.props.subtractMinute}><Glyphicon glyph="chevron-down" /></a></td>
+              <td><a className="btn" data-action="decrementMinutes" onClick={this.props.subtractMinute}><DateTimePickerIcons glyph="down" icons={this.props.icons} /></a></td>
 
               <td className="separator"></td>
             </tr>
@@ -105,6 +105,7 @@ export default class DateTimePickerTime extends Component {
   }
 
   render() {
+
     return (
         <div className="timepicker">
           {this.renderPicker()}

diff --git a/src/DateTimePickerYears.js b/src/DateTimePickerYears.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from "react";
 import classnames from "classnames";
+import DateTimePickerIcons from "./DateTimePickerIcons.js";
 
 export default class DateTimePickerYears extends Component {
   static propTypes = {
@@ -37,11 +38,15 @@ export default class DateTimePickerYears extends Component {
         <table className="table-condensed">
           <thead>
             <tr>
-              <th className="prev" onClick={this.props.subtractDecade}>‹</th>
+              <th className="prev" data-action="previous" onClick={this.props.subtractDecade}>
+                <DateTimePickerIcons icons={this.props.icons} glyph="previous" />
+              </th>
 
               <th className="picker-switch" data-action="pickerSwitch" colSpan="5">{year} - {year + 9}</th>
 
-              <th className="next" onClick={this.props.addDecade}>›</th>
+              <th className="next" data-action="next" onClick={this.props.addDecade}>
+                <DateTimePickerIcons icons={this.props.icons} glyph="next" />
+              </th>
             </tr>
           </thead>