Add highlighting

README.md

@@ -37,6 +37,7 @@ DateTimeField
 | **onChange** | function | x => console.log(x) | Callback trigger when the date changes. `x` is the new datetime value. |
 | **showToday** | boolean | true | Highlights today's date |
 | **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). |
+| **highlight** | func | null | Highlight specific days. Function gets passed day object, should return true to highlight it |
 | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') |
 | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |
 | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |

css/bootstrap-datetimepicker.css

@@ -124,6 +124,10 @@
   bottom: 4px;
   right: 4px;
 }
+.bootstrap-datetimepicker-widget td.highlight,
+.bootstrap-datetimepicker-widget td.highlight:hover {
+  background-color: yellow;
+}
 .bootstrap-datetimepicker-widget td.active,
 .bootstrap-datetimepicker-widget td.active:hover {
   background-color: #428bca;
@@ -139,6 +143,7 @@
   color: #999999;
   cursor: not-allowed;
 }
+
 .bootstrap-datetimepicker-widget td span {
   display: block;
   width: 47px;

src/DateTimeField.js

@@ -11,6 +11,7 @@ export default class DateTimeField extends Component {
     showToday: true,
     viewMode: "days",
     daysOfWeekDisabled: [],
+    highlight: null,
     mode: Constants.MODE_DATETIME,
     onChange: (x) => {
       console.log(x);
@@ -42,6 +43,7 @@ export default class DateTimeField extends Component {
     direction: PropTypes.string,
     showToday: PropTypes.bool,
     viewMode: PropTypes.string,
+    highlight: PropTypes.func,
     daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.integer)
   }
 
@@ -331,6 +333,7 @@ export default class DateTimeField extends Component {
                   addMonth={this.addMonth}
                   addYear={this.addYear}
                   daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+                  highlight={this.props.highlight}
                   maxDate={this.props.maxDate}
                   minDate={this.props.minDate}
                   mode={this.props.mode}

src/DateTimePicker.js

@@ -20,6 +20,7 @@ export default class DateTimePicker extends Component {
     ]),
     mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]),
     daysOfWeekDisabled: PropTypes.array,
+    highlight: PropTypes.func,
     setSelectedDate: PropTypes.func.isRequired,
     subtractYear: PropTypes.func.isRequired,
     addYear: PropTypes.func.isRequired,
@@ -50,6 +51,7 @@ export default class DateTimePicker extends Component {
               addMonth={this.props.addMonth}
               addYear={this.props.addYear}
               daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+              highlight={this.props.highlight}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
               selectedDate={this.props.selectedDate}

src/DateTimePickerDate.js

@@ -15,6 +15,7 @@ export default class DateTimePickerDate extends Component {
       PropTypes.number
     ]),
     daysOfWeekDisabled: PropTypes.array,
+    highlight: PropTypes.func,
     setSelectedDate: PropTypes.func.isRequired,
     subtractYear: PropTypes.func.isRequired,
     addYear: PropTypes.func.isRequired,
@@ -84,6 +85,7 @@ export default class DateTimePickerDate extends Component {
       <DateTimePickerDays
             addMonth={this.props.addMonth}
             daysOfWeekDisabled={this.props.daysOfWeekDisabled}
+            highlight={this.props.highlight}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
             selectedDate={this.props.selectedDate}

src/DateTimePickerDays.js

@@ -10,6 +10,7 @@ export default class DateTimePickerDays extends Component {
     selectedDate: PropTypes.object.isRequired,
     showToday: PropTypes.bool,
     daysOfWeekDisabled: PropTypes.array,
+    highlight: PropTypes.func,
     setSelectedDate: PropTypes.func.isRequired,
     showMonths: PropTypes.func.isRequired,
     minDate: PropTypes.object,
@@ -41,13 +42,21 @@ export default class DateTimePickerDays extends Component {
       } else if (prevMonth.year() > year || (prevMonth.year() === year && prevMonth.month() > month)) {
         classes.new = true;
       }
-      if (prevMonth.isSame(moment({
+
+      var day = moment({
         y: this.props.selectedDate.year(),
         M: this.props.selectedDate.month(),
         d: this.props.selectedDate.date()
-      }))) {
+      })
+
+      if (prevMonth.isSame(day))
         classes.active = true;
+
+      if (this.props.highlight){
+        if (this.props.highlight(prevMonth))
+          classes.highlight = true;
       }
+
       if (this.props.showToday) {
         if (prevMonth.isSame(moment(), "day")) {
           classes.today = true;
@@ -64,6 +73,7 @@ export default class DateTimePickerDays extends Component {
         cells = [];
       }
       prevMonth.add(1, "d");
+
     }
     return html;
   }