Hi,
First thanks for such an awesome widget, unfortunately Im having an issue when testing on IE11, it can't support the onBlur event, it says this event is not supported, is there a walk around for this or are you planing to solve this issue in a future version of react-bootstrap-date-picker.

Thanks for your help.

Hey, I'm getting these errors in my console when I add the datepicker component to an app.

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `DatePicker`.
Uncaught TypeError: Cannot read property 'Addon' of undefined

Not sure what to do. any ideas?

Thanks

Uncaught RangeError: Invalid time value
at Date.toISOString ()
at Object.makeDateValues

consider including instructions for importing your project to an ES5 project. For ES5 projects, change the first line of usage to
var DatePicker = require("react-bootstrap-date-picker").default;

How to set custom date format such as 'YYYY-MM-DD'?

Is there a way to add the tabindex attribute to the datepicker input element?

It seems that if I set a prop called className, it is not passed on to the FormControl and is ignored. Likewise, there is no style prop set so I cannot set the style either. These should be supported so the CSS can be modified like all other bootstrap components.

Hey there!
First of all, great job on datepicker, working very well. Just found about it today and perfectly suits my needs.
But when I implemented and started testing, I found a bug which is that all dates for January 2017 are wrong. Everything else shows correctly.

https://www.dropbox.com/s/ijn027dpe5aikjj/Screenshot%202016-10-13%2016.32.49.png?dl=0

1st of January should be Sunday.

UPDATE
I noticed that this only happens if I have weekStartsOnMonday set to true. If it is else it works good. Also checked your examples page http://pushtell.github.io/react-bootstrap-date-picker/ and bug also exists there when using datepicker which starts with Monday..

The order of the components within the input group causes the wrong styling. Usually, the Input control goes first which allows the left side of the input to have a cornered border.

But in this package the input does not come first, the styling is lost and you end up without the rounded borders.

I suggest the input component should go first.

Hi, I've been struggling to get a displayed format like '05/Jan/2016' which would normally be "DD/MMM/YYYY".

The usage is the following:
<DatePicker value={this.props.dateOpened} onChange={(value) => this.handleChange("dateOpened", value)} type="date" dateFormat="DD/MMM/YYYY"/>

The result is "YYYY/MM/DD" instead:

Is there a way of achieving the initial intention?

It would be nice to have the React defaultValue attribute supported by DatePicker

Was able to put a good date in then space then random characters then delete date to get an invalid date w/o receiving an complaint from the component.

Example:

1. 10/03/2016
2. 10/03/2016 alkdfa
3. al/kd/fa

The date 10/03/2016 is still captured, but should be validation catching or stopping this kind of input.

How to set custom date format such as 'YYYY-MM-DD'?

Is it corrent that I get the following error message in my console log:

Warning: <Input> is deprecated. Use <FormControl>, <Checkbox>, or <Radio>, with <FormGroup> and/or <InputGroup> as needed instead.
Warning: "hasFeedback" property of "FormGroup" has been deprecated.
Use a <FormControl.Feedback> element.

And can you tell me how to fix it? Thank you!

sometimes there is a need to use event object in the onChange handler

I just started using this literally 2 minutes ago and I've found a problem with the input. I can easily replicate it on your example page: http://pushtell.github.io/react-bootstrap-date-picker/

Click anywhere in the text input box one of the dates that are already entered. Delete and or type a number.

E.g. 06/29/2016. Say you want to change this to the 7th from the 6th. Place the cursor before the first '6', press delete. Result: 09016

If you use the DatePicker component twice on a page you end up with HTML elements having duplicate ids, because the Popover element has a hardcoded id. In addition to being a violation of the spec, this does not play nicely with some other code I'm working with.

I would send a pull request, except I'm not sure what the correct fix is. Changing the value could break someone's code. A new popoverId prop that allows overriding it?

I want to use react-bootstrap-date-picker with redux_form. How can i get the value of this field form this.props.field instead of getting it from the on Change event.

@wehriam,
I get a rendering/layout issue (see attachment), on both Chrome and Firefox, even with this simple component, similar to the example on the doc:

class MyInput extends React.Component {
    constructor(props) {
        super(props);
        this.state =  {
            value: '',
            date: ''
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(value) {
        // value is an ISO String.
        this.setState({
            value: value,
            date: value.split('T')[0] //just "MM-DD-YYYY"
        });
        console.log(this.state.date);
    }
    render() {
        return <DatePicker value={this.state.value} onChange={this.handleChange}
                           placeholder="MM-DD-YYYY" dateFormat="MM-DD-YYYY"
                           bsSize="small"
        />
    }
}
export default MyInput;

Although it might seem to work, despite the rendering problem, I noticed that the value logged and set, in handleChange(), as date is actually the previously set value and not the current one.
Let me try to explain better with an example: the first time you select a date on the calendar, let's say '05-24-2016', this.state.date is set with (and logged as) an empty string (the initial value). Selecting then another date, e.g. '05-11-2016', it now sets and logs '05-24-2016' as date. On the following date pick it will set '05-11-2016'and so on.

Can you help me with this issues?
I'm using "react": "^15.0.2", "react-bootstrap": "^0.29.4", "react-dom": "^15.0.2" and of course the latest react-bootstrap-date-picker release 3.0.3
Thanks

how can we disable past dates? don't we have minDate prop?

Hello, I got this error, any ideas?

/Users/Elias/noteshare/node_modules/react-bootstrap-date-picker/lib/index.js:189
    var language = (window.navigator.userLanguage || window.navigator.language || '').toLowerCase();
                    ^

ReferenceError: window is not defined
    at Function.getDefaultProps (/Users/Elias/noteshare/node_modules/react-bootstrap-date-picker/lib/index.js:189:21)
    at Object.ReactClass.createClass (/Users/Elias/noteshare/node_modules/react/lib/ReactClass.js:682:46)
    at Object.<anonymous> (/Users/Elias/noteshare/node_modules/react-bootstrap-date-picker/lib/index.js:173:35)
    at Module._compile (module.js:409:26)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Elias/noteshare/node_modules/node-jsx/index.js:29:12)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/Elias/noteshare/ui/common/topbar/uploadButton.jsx:17:18)

Hello,

I've been using your lib for a month now and it's really great, but I've been wondering if you would consider supporting monday-starting weeks?

Thanks in advance, keep up the good work!

I am currently trying to test validations on a form where I am using react-bootstrap-date-picker however I am having a couple of issues.

In the view I can see that the validations are working correctly, but in the tests something isn't quite right.

I am using react-addons-test-utils Simulate like this:

Simulate.change(formFields[2], { target: { value: '04/01/2017' } }); in this instance formFields[2] is the date picker however unlike other input fields when I log the value out to the console it is still blank, I was wondering if anyone has a working test example for something like this that could point me in the right direction?

Has next warning in console

Warning: `controlId` is ignored on `<FormControl>` when `id` is specified.

My code:

            <FormGroup controlId="start_date">
              <Col componentClass={ControlLabel} sm={3}>
                Start date
              </Col>
              <Col sm={9}>
                <DatePicker ref="startDateInput" />
              </Col>
            </FormGroup>

I know I may remove controlId prop form FormGroup, but in this case how I may assign label for input? I want user to be able to click on label to make input in focus.

Nice component! It would be awesome if it have support for min and max date, any way to get that kind of functionality out of the box?

This error prevents me from installing this lib:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-bootstrap@^0.28.1

Would it be possible to update the dependent version?

If you select the entire date and press the delete key, the onChange handler is not called. Shouldn't it be called in that case?

Hi,
Thanks for this great component, is it possible to control the visibility of the clear button.
I have a case which i want to use 2 datePickers and beside them a clear button to clear them both
so i want to remove the clear for the individual component.

I am getting this weird error where I can't select the date from the popover. If I manually change the date, the onChange event occurs. But, when I try to select a date, nothing happens. I have put a few console.logs in there. The onChange isn't being called. There are multiple datepickers but each has a unique ID.

The render method for that component is being called each time I click on a date. I don't know what is causing this though. What am I doing wrong?

This is how I have it setup:
import DatePicker from "react-bootstrap-date-picker";

<DatePicker
                    id={"due-date-datepicker-" + id}  << (ID is the object ID of the item being selected)
                    disabled={false}
                    placeholder="Select due date..."
                    dateFormat="MM/DD/YYYY"
                    value={this.state.dueDate}
                    onChange={() => { console.log("DatePicker onChange")}} << (I had this set like the example, but it wasn't being called.)
                    onFocus={() => { console.log("DatePicker Focus")}}
                    onBlur={() => { console.log("DatePicker Blur")}}
                  />

Hi @wehriam,
I tried to implement the possibility to add an Addon before the date field and to show or not the clear Addon, but when I click on the input filed I get an error I can't understand:
Uncaught TypeError: Cannot set property top of #<ClientRect> which has only a getter

I am pretty new to ReactJS, so I must have done a dumb error; this is my version (with obvious changes in props):

    render() {
        const calendarHeader = <CalendarHeader
            previousButtonElement={this.props.previousButtonElement}
            nextButtonElement={this.props.nextButtonElement}
            displayDate={this.state.displayDate}
            onChange={this.onChangeMonth}
            monthLabels={this.props.monthLabels}
            dateFormat={this.props.dateFormat}/>;

        const preAddon = (this.props.preAddon) ? <InputGroup.Addon>{this.props.preAddon}</InputGroup.Addon> : '';
        let clearAddon = '';
        if (this.props.showClear) {
            clearAddon = <InputGroup.Addon onClick={this.clear}
                                           style={{cursor:this.state.inputValue ? "pointer" : "not-allowed"}}>
                                    {this.props.clearButtonElement}
                         </InputGroup.Addon>
        }
        return <InputGroup ref="inputGroup" bsClass={this.props.bsClass} bsSize={this.props.bsSize}
                           id={this.props.id ? this.props.id + "_group" : null}>
            <Overlay rootClose={true} onHide={this.handleHide} show={this.state.focused}
                     container={() => ReactDOM.findDOMNode(this.refs.overlayContainer)}
                     target={() => ReactDOM.findDOMNode(this.refs.input)} placement={this.props.calendarPlacement}
                     delayHide={200}>
                <Popover id="calendar" title={calendarHeader}>
                    <Calendar cellPadding={this.props.cellPadding} selectedDate={this.state.selectedDate}
                              displayDate={this.state.displayDate} onChange={this.onChangeDate}
                              dayLabels={this.props.dayLabels}/>
                </Popover>
            </Overlay>
            <div ref="overlayContainer"/>
            <input type="hidden" id={this.props.id} name={this.props.name} value={this.state.value || ''}/>
            {preAddon}
            <FormControl
                onKeyDown={this.handleKeyDown}
                value={this.state.inputValue || ''}
                ref="input"
                type="text"
                placeholder={this.state.focused ? this.props.dateFormat : this.state.placeholder}
                onFocus={this.handleFocus}
                onBlur={this.handleBlur}
                onChange={this.handleInputChange}
                name={null}
                id={null}
            />
            {clearAddon}
        </InputGroup>;
    }

and this is how I create my component:

<MyDatePicker value={this.state.value} onChange={this.handleChange}
      clearButtonElement={<Glyphicon glyph="remove"/>}
      preAddon={<Glyphicon glyph="calendar"/>}
      placeholder="MM-DD-YYYY" dateFormat="MM-DD-YYYY" bsSize="small"
/>

Where do you think I'm wrong?
Thanks

Component triggers a blur event when the user makes their first interaction with the datepicker. As the component is still actionable and in focus, the component should be changed so that it fires a blur event when the component is truly closed and no longer in focus.

Since the outermost element is a div without any css/styles it breaks the inline style of navbar forms.

I fixed it by adding display:inline-block via css but maybe consider changing it to a span or adding some inline style.

my fix:

.navbar-form { div { display: inline-block; } }

thanks.

We need to use localized placeholder (for german language), so instead of DD.MM.YYYY we set TT.MM.JJJJ, like this:
<DatePicker placeholder="TT.MM.JJJJ" {...otherProps}/>
Everything works fine before user clicks on input => custom placeholder is replaced by default DD.MM.YYYY
I think, custom placeholder shouldn't be overriden.

<DatePicker
   value={this.props.date}
   onChange={this.changeDate}
   clearButtonElement={'Today'}
   calssName="form-control u-input"
 />

Not work as my mind, How to pass additional classes?

I miss the feature to render the datepicker and field in a disabled readonly state.

When using in a form, many values will be system managed and read only after these have been created.

It gets quite cluttered when alternating between a normal disabled input field and the datepicker to support this in the front end files. It would be much cleaner having disabled support on the component.

Hello! I am using your date-picker in a web app and having some issues. The date picking functions work well, I have the initial value set to '' which displays the placeholder. When the value is set to '', I have the adjacent table displaying all values. When a date is selected, the filter function I created shows all dates after the selected date in the table. The trouble comes when trying to clear the fields. When I press the clear button, I get an "uncaught RangeError: Invalid time value" which breaks the component. The actual value that is placed in the object is "Invalid Date", which causes the error in the code for the date-picker. I have tried to handle this externally in my code, however it seems like the "Invalid Date" breaks something in the date-picker itself. Ideally, I would just like to set the date-picker back to the starting state of ''. Is that possible? Am I missing something? Thanks in advance for your help. Attached

is the stack trace from the error.

The onChange event from DatePicker should pass on the full event object with the value in event.target.value so that the event can be handled and the value found in the standard location.

Hello.

Im currenly faced wit the issue of toISOString fails in a safari browser when i try to run it in the value attribute.

<DatePicker value={this.props.todo.deadline} placeholder="Deadline"/>

When im mounting the component in Safari i get a error with toISOString. but the error is non replicatateable in Chrome.

Testable ISO String 2016-03-31T10:00:00+0000

Create option for rounded corners on dates, similar to https://github.com/uxsolutions/bootstrap-datepicker

Using a date-picker, I would only expect to get a "date" not a "datetime". If I wanted to have a time and/or timezone attached to the data, I'd use a datetime picker.

I manually append times and timezones based on configuration and user-entered values, so when the date I expect already has something for those, it causes strange offset bugs. I have to scrub the times out before I can do anything with the data, which is tedious the more date fields that get added.

If the value MUST be ISO-8601, I'd suggest ensuring that time and offset are set to 0.

When I place the react-bootstrap-date-picker in a scrollable container and I click in the input field, the calendar pops up but it is clipped to the container boundary. If I put up a raw react-bootstrap popover next to it, this popover correctly shows in full, sitting on top of the scrollable container. How can I make the react-bootstrap-date-picker behave the same way?

Here's my code:

    render() {
        return (
            <div className={ style['bulk-processing'] + ' panel panel-primary' } >
                <div className="panel-heading">Scrollable Panel</div>
                <div className="panel-body scrollable">
                    <Popover
                        id="popover-basic"
                        placement="right"
                        positionLeft={325}
                        positionTop={50}
                        title="Popover right"
                    >
                        And here's some <strong>amazing</strong> content. It's very engaging. right?
                    </Popover>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/>
                    Hello World<br/><br/>

                    <div className="container-fluid">
                        <div className="col-xs-4">
                            <DatePicker
                                id="start-date"
                                dateFormat="MM/DD/YYYY"
                            />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

The scrollable class is defined as follows:

.scrollable {
    -ms-overflow-style: scrollbar;
    overflow: auto;
}

<DatePicker
ref={(testDate) => { testDateInput = testDate }}
defaultValue={testDate}
dateFormat='YYYY-MM-DD'
/>

But the input field, doen't display the default value

I'm happy that you've found this module helpful. Please comment with links to use in production!

Say I am on date '2016-11-05' when I select a date that is on or below '2016-10-30' the return value is incorrect. If I am selecting '2016-10-29' I will get '2016-10-28 23:00:00'. I would expect the date picker to be daylight savings time agnostic.

How can I fix this?

Microsoft Edge 38.14393.0.0

Can you at least add an autocomplete attribute to the input? http://www.w3schools.com/tags/att_input_autocomplete.asp

Thank you!

My dates are being stored as ISO strings "2016-08-18T16:00:00.000Z"

I'm wondering what I need to do to give a default value to the DatePicker input in my edit/update forms?

For all my other inputs, which are using formsy-react, I'm just passing an event prop and doing defaultValue={this.props.event.inputValue}. This doesn't seem to work with the date input when I pass it to the value={this.props.event.date}

Do I have to convert the ISO string back to a number for it to work? This doesn't seem to work either:

value={Date.parse(this.props.event.date)}

Because there is no defaultValue prop and only a value prop, do I need to setup local state with an onChange inside my update form to not only give the initial default value but also capture the changed value for updating/editing?

Update:

I guess my dates are stored as ISO strings in the database, but back on the client I'm console logging this from my props:

Wed Aug 24 2016 12:00:00 GMT-0400 (EDT)

For ex:

2016-10-31T23:00:00.000Z

Which is completely wrong, because 1) the date picker doesnt support picking time and 2) if the hour is 23 and the date is 31th of October, we get timezone issues with the date picker rendering a displayed value of 01.11.2016.

Can you fix this?

I keep getting this warnings in the developer tools console:

May be I'm missing something?