Adding possibility to clear the selector and the properties clearable, disabled and placeholder.

README.md

@@ -21,26 +21,31 @@ render: function() {
   return <DateTimeField />;
 }
 ```
-See [Examples](examples/README.md) for more details.
+See [Examples](examples/) for more details.
 
 API
 ===============================
 
 DateTimeField
 ========
 
-| Name         | Type    | Default | Description |
-| ------------ | ------- | ------- | ----------- |
-| **dateTime** | string  | moment().format('x') | Represents the inital dateTime, this string is then parsed by moment.js |
-| **format**   | string  | "x"     | Defines the format moment.js should use to parse and output the date to onChange |
-| **inputFormat** | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input |
-| **onChange** | function | x => console.log(x) | Callback trigger when the date changes |
-| **showToday** | boolean | true | Highlights today's date |
-| **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). |
-| **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. |
-| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
+| Name                    | Type                | Default               | Description |
+| ------------            | -------             | -------               | ----------- |
+| **dateTime**            | string              | moment().format('x')  | Represents the inital view dateTime, this string is then parsed by moment.js |
+| **value**               | string              | undefined             | Represent the selectedDate of the picker. |
+| **placeholder**         | string              | "Select a Date"       | Placeholder of the input field (replace defaultText). |
+| **clearable**           | boolean             | false                 | Defined if the selector should offer the possibility to clean the selected date. |
+| **disabled**            | boolean             | false                 | Defines if the selector its enabled or disabled. |
+| **format**              | string              | "x"                   | Defines the format moment.js should use to parse and output the date to onChange |
+| **inputFormat**         | string              | "MM/DD/YY h:mm A"     | Defines the way the date is represented in the HTML input |
+| **onChange**            | function            | x => console.log(x)   | Callback trigger when the date changes |
+| **showToday**           | boolean             | true                  | Highlights today's date |
+| **daysOfWeekDisabled**  | array of integer    | []                    | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). |
+| **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. |
+| **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') |
 
 Update Warning
 ===============================

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-datetimepicker",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": [
     "./dist/react-bootstrap-datetimepicker.min.js"
   ],

css/bootstrap-datetimepicker.css

@@ -191,6 +191,14 @@
   width: 16px;
   height: 16px;
 }
+.input-group.date span.input-group-clear {
+  cursor: pointer;
+  position: absolute;
+  z-index: 10;
+  left: calc(100% - 57px);
+  color: #dddddd;
+  line-height: 32px;
+}
 .bootstrap-datetimepicker-widget.left-oriented:before {
   left: auto;
   right: 6px;