quri / react-bootstrap-datetimepicker

[DEPRECATED] A react.js datetime picker for bootstrap

⚠️ [DEPRECATED] react-bootstrap-datetimepicker

⚠️ This repository is not maintained anymore, please refer to this fork : https://github.com/YouCanBookMe/react-datetime

This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js

Usage

Installation :

npm install react-bootstrap-datetimepicker

Then

var DateTimeField = require('react-bootstrap-datetimepicker');

...

render: function() {
  return <DateTimeField />;
}

See 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. It must be a format understanable by moment.js
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
size	string	"md"	Changes the size of the date picker input field. Sizes: "sm", "md", "lg"
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')
defaultText	string	{dateTime}	Sets the initial value. Could be an empty string, or helper text.

Update Warning

Starting from 0.0.6, the 3 github repositories react-bootstrap-datetimepicker, react-bootstrap-datetimepicker-npm and react-bootstrap-datetimepicker-bower are merged in a single one. The build process changed but the API is the same. However now the package exports DateTimeField directly, no need to do :

var DateTimeField = require('react-bootstrap-datetimepicker').DateTimeField;

instead use :

var DateTimeField = require('react-bootstrap-datetimepicker');

Contributions

There is still plenty of features missing compared to the original date time picker, hence contributions would be highly appreciated.

react-bootstrap-datetimepicker's Issues

Where can I find examples of how to use this component?

I tried to include:

var DateTimePicker = require('react-bootstrap-datetimepicker/DateTimePicker');

and then render:

<DateTimePicker />

But, I get:

Uncaught TypeError: Cannot read property 'classSet' of undefined

React.addons.classSet is deprecated.

Warning: React.addons.classSet will be deprecated in a future version. See http://fb.me/react-addons-classset

Disable calendar

I have implemented react-bootstrap-daterangepicker component in following way:

var React = require('react');
var Bs = require('react-bootstrap');
var DateTimeField = require('react-bootstrap-daterangepicker');
var moment = require('moment');
const InnerGlyphicon = <Bs.Glyphicon glyph='calendar' />;

var DateField = React.createClass({

    getInitialState: function () {
        return {
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'This Week': [moment().startOf('isoWeek'),moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment(this.props.startDate, 'DD/MM/YYYY'),
            endDate: moment(this.props.endDate, 'DD/MM/YYYY')
        };
    },

    render : function (){
       return (
           <div>
               <DateTimeField className={'datePicker'}
                              onEvent={this.handleDateEvents}
                              dateTime={moment().format('DD/MM/YYYY')}
                              startDate={this.state.startDate}
                              endDate={this.state.endDate}
                              minDate={this.props.minDate}
                              maxDate={this.props.maxDate}
                              ranges={this.state.ranges}
                              timePicker={true}
                              timePicker24Hour={true}
                              timePickerIncrement={1}
                              showWeekNumbers={true}
                              onShow={this.handleOnShow}
                              type={'datetimerange'}
                   >
                   <Bs.Input type='text' placeholder={moment(this.state.startDate).format('DD/MM/YYYY') + ' - ' + moment(this.state.endDate).format('DD/MM/YYYY')} addonAfter={InnerGlyphicon} />
               </DateTimeField>

           </div>

       );
    },

    /* This function updates Bs.Input date range according to  selected date*/
    handleDateEvents: function (event, picker) {


        if(event.type==='apply'){
            this.setState({
                startDate: picker.startDate,
                endDate:picker.endDate
            });
        }
       this.props.handleDateEvents(event,picker);
    }
});

This component is showing calendar like (Today, Yesterday, Last 7 Days etc.) no matter what i choose:

Instead of it i want, that calendar shows only on "Custom range", like in this example datepicker:

I can't figure out why dateTime doesn't act like in demo. Is there some config needed for it, or its just a bug or maybe i am doing something wrong?

npm run examples fails on Windows

Here's the error log:

C:\Projects\Git\react-bootstrap-datetimepicker>npm run examples

> [email protected] examples C:\Projects\Git\react-bootstrap-datetimepicker
> webpack-dev-server --config ./examples/webpack.config.js

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: listen EADDRINUSE
    at exports._errnoException (util.js:746:11)
    at Server._listen2 (net.js:1146:14)
    at listen (net.js:1172:10)
    at net.js:1270:9
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:81:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:99:10)

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "examples"
npm ERR! node v0.12.2
npm ERR! npm  v2.7.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] examples: `webpack-dev-server --config ./examples/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] examples script 'webpack-dev-server --config ./examples/webpack.config.js'.
npm ERR! This is most likely a problem with the react-bootstrap-datetimepicker package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config ./examples/webpack.config.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-bootstrap-datetimepicker
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Projects\Git\react-bootstrap-datetimepicker\npm-debug.log

Selecting previous (or next) month's day from current month's view does not select correct date

The issue is better to describe via example:

If you have May opened in the calendar and you would like to choose 30th of April from the calendar directly without moving to April through upper arrows, the selected date is 30th of May and not 30th of April as it should be. The same happens if you choose next month's first days like 1st, 2nd or 3rd. If you choose 1st of June without moving to June as a month, the selected date will be 1st of May instead of 1st of June. Tested with Google Chrome (Win 8.1).

Any way to go to the initial state when click time (clock) icon?

Hi,

Is there any way to go to the initial state when click time (clock) icon? I want to see the HH:MM AM page whenever I click the time icon. Is there any way to do that? Thanks.

component doesn't work

I'm using the version 0.0.18 (Chrome browser)

1. When I specify dateTime= date as a string it always shows "invalid date" (only dateTime=moment() works)
2. Typing ANY text in the edit box shows "invalid date"
3. onChange callback returns obscure values such as "1436964120000"

require("react/addons") is deprecated

Hi,
I have been using React 0.14.0-alpha3 and I see this warning:
require("react/addons") is deprecated. Access using require("react/addons/{addon}") instead.

See the image attached.

Broken on iPhone 6, iOS8

Hi,
The datetimepicker isn't working correctly on iPhone6 with iOS8+ (at least that's what I tested it on). It's working fine on Android 5.0+. On the iPhone6 it shows up and you can select the date and time but it doesn't go away when you click somewhere else on the screen.
Don't know if it's a problem with the CSS or something else.

z-index: 99999 !important;

I can't see any reason to have a hard-coded z-index that high. In my projects I keep my z-indexes in a sass file and I only increment them by 1 in an effort to keep them in the single digits. This has never resulted in a z-index over 10.

Can we change this to something more reasonable? Or is there a reason for it to be 99999 !important? At the moment it's overlapping my site header which is on a z-index of 2.

Position incorrect with dynamically created date fields

Hi, I have a table of editable data, for which one of the columns is a date field. Using the datetimepicker in a dynamically generated list of components fails to position the calendar popup correctly. It ends up at the top of the page, seemingly irrationally. The component positions fine when in a static section of the page.

Time only?

Is there a way to only show time and not date?

Thanks

Cannot be used globally despite code that implies otherwise

I'm trying to use the DateRangePicker component by loading the JavaScript via my index.html. It should be possible thanks to this in daterangepicker.js:

// Finally, as a browser global.
} else {
  root.daterangepicker = factory(root, {}, root.moment || moment, (root.jQuery || root.Zepto || root.ender || root.$));
}

After it is executed, window.daterangepicker exists, but is undefined.

TypeError: __webpack_require__(...) is undefined

hi,

i'm using datepicker as browser global but i get this error in firefox

TypeError: __webpack_require__(...) is undefined
  Glyphicon = __webpack_require__(4).Glyphicon;

freshly installed from bower, using the unminified version

No release done since 0.0.8

Hello,

no Github release was done since 0.0.8.

Using React-bootstrap-datetimepicker in Browser globals

how to Using React-bootstrap-datetimepicker in Browser globals.

Error with moment.js

Hello,

I am getting this error:
Uncaught ReferenceError: moment is not defined

I installed moment using npm but no joy - any idea what I need to do?

many thanks
Bernadette

Invalid dateTime type

Complains about the initial state default being a date object instead of a string.

<DateTimeField />

showToday not working

showToday prop seems to be not working. Tried setting it to 'true', but it still shows current from January 1970.

Hard to use keyboard for direct input

When providing both a datetime and an onChange as props, it is just about impossible to use the keyboard to change the value.

Say for instance that the field has a value 1979-11-18 9:17:25 AM, and you just want to change the month from 11 to 3. I would place the cursor behind 11, press backspace, and then immediately it would validate, re-bind the validated value, and the cursor jumps to the end...

I see that internally you set value={..} on the input field.. Have you thought about using defaultValue instead?

How can I disable time?

Hi guys,
is it possible to hide the time icon?
thanks!

Add webpack-dev-server to dpendencies

I'm a complete node beginner, and I wanted to see examples your lib. So I done as said in examples, but when I tried to execute npm run examples I got error saying that webpack-dev-server is not found. After about a hour of googling/meditating etc. I found that in package.json file there is only dependency for webpack only. Maybe there should be webpack-dev-server dependency as well? Or task for running examples is incorrect?

Eonasdan/bootstrap-datetimepicker version 4

is this updated to align with v4 of the original project?

Add CSS to the repo

I think it would be good to add the CSS file to the repository. Because I guess, everyone who is going to use this package also needs the styles. Pretty obvious I guess ;)

Warnings in js console

Hi,

I have following warnings in js console in browser when I using react-bootstrap-datetimepicker lib.

• Warning: React.addons.classSet will be deprecated in a future version. See http://fb.me/react-addons-classset
• Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of DateTimePickerMonths. See http://fb.me/react-warning-keys for more information.
• Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of DateTimePickerYears. See http://fb.me/react-warning-keys for more information.

InputName

There should be an inputName :)

React.createElement("input", React.__spread({type: "text", className: "form-control", onChange: this.onChange, value: this.state.inputValue, name: this.props.inputName},  this.props.inputProps))

DateTimeField doesn't work as expected

Hi,
The following component show me "invalid date". Any problem with that?

The second question is how to get the input value if I use the default value which means no change event is issued?

CSS Problem

Is there a convenient style will not have impact on the global

add calendarWeeks support

how is it possible?

Can the dateTime prop be really any string?

I tried to pass on a string like Wed Jan 21 2015 16:38:18 GMT+1300 (NZDT), defined the inputFormat as YY/MM/DD but somehow it shows that date wrong, as 70/01/01. Any ideas why?

set locale of moment.js

It would be great to expose a prop to set the locale

Pass the event along with onChange

I'm working on integrating this into newforms and it would be nice to have the event object passed along with the onChange method. Perhaps as the second argument, along side the formatted datetime.

DateTime field doesn't update on this.setState()

I am having an issue getting the datetime field to update after setting the state using a callback attached to onChange event. How can I access the value of the datetime field so I can update this value by using setState?

<DateTimeField inputFormat="MM/DD/YY h:mm A" onChange={this.handleChange}  value={this.state.start_time} />

 handleChange: function(event) {
      this.setState({start_time: event});
    },

Thanks so much for your help!

Uncaught ReferenceError: Icon is not defined

When i tried to use DateTimePicker, I get this error.

Got error on MAC OS

I'm facing the error on my local - MAC OS once importing and using the component in code

Error: Cannot find module 'react-bootstrap-datetimepicker' from ''
at /node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
at process (/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
at ondir (/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
at load (/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex /node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at Object.oncomplete (fs.js:108:15)

There's any one was facing and resolved this? Please help me thanks

Error using require('react-bootstrap-datetimepicker').DateTimePickerDays;

I Using require('react-bootstrap-datetimepicker').DateTimePickerDays;. Console log of firefox show error "TypeError: type is undefined (type.defaultProps) { ". How can I use DateTimePickerDays.........
Thank You.

Need information on Calendar positioning

I know I am reading the documentation and code correctly. I am trying to have the calendar 'popup' below the 'date input' with the left side of the calendar aligning to the left of the 'date input'.

The onClick() method in DateTimeField.js hard coded the "right: 40" and "left: 'auto'".

Is there a way I may change that to something akin to "right: 'auto'" and "left: 3px (about)"?

Cordially,
Entaro Adun.

P.S.

May I propose to add to props.direction four options: 'top left', 'top right', 'bottom left', and 'bottom right'?
Where "bottom left" would be something like:
var thisDim = this.getDOMNode().getBoundingClientRect();
style: {
top: thisDim.bottom,
left: thisDim.left + 3
right: 'auto'
}
Along this line.

The component doesn't work on Firefox 39.0

I'm facing 1 critical issue on the component on my app. Using Firefox browser 39.0, we cannot select the date on datepicker.

I tried to check on the demo page of the component and got the same issue.

Please help to clarify and fix it.

Regards,
Tin Nguyen

Get value via refs?

Hi thanks for the component again,man.
Just wanted to ask if there is a way to get the current date time value via refs? Or must we have to implement an onChange listener?

no grunt etc.

How can I use it without npm,grunt and all that stuff.

I only know basic react.js and I don't have time to learn grunt etc.

How can I just put a js file in my webpage with the react js file and BANG get it to work?
What dependencies would I need. The original project depended on moment.js and jquery. Does this also depend on moment.js?

Internalization support

Hello. Thanks for lib. Is this lib provided some Api for internalization(i18n) ?

Hide time switcher

In original http://eonasdan.github.io/bootstrap-datetimepicker/#min-view-mode
we can manage showing or hiding time switcher when set 'format' option.
In DateTimePicker.js you always render 'picker-switch' btn, so please, keep it sync with original.
Many thanks!

daysOfWeekDisabled for single day use not working properly

Found a wired 'feature' that it's causing the daysOfWeekDisabled to not accepting specific day

For example

// This guy disables Saturday but 3,4 and 5 are ignored
<DateTimeField daysOfWeekDisabled={[3,4,5,6]} /> 
<DateTimeField daysOfWeekDisabled={[4,5,6]} /> // doesn't work
<DateTimeField daysOfWeekDisabled={[5,6]} /> // doesn't work
<DateTimeField daysOfWeekDisabled={[6]} /> // doesn't work

So basically what I'm trying to do is disable Saturdays only.
Best,

Invalid date when setting dateTime value to string date like '1990-10-10'

Can we use ISOString as internal format?

Hello, in our app we use ISO String for our dates.
http://momentjs.com/docs/#/displaying/as-iso-string/

But I have not found a way to specify this format with dateTimePicker.
As I understand, it expects a format as a string like 'DD/MM/YY' but ISOString in momentJS is a method.

I can transform to a temporary format, but I'd rather not have to do this.

so the question is how to do this?

<DateTimeField 
  inputFormat="YYYY/MM/DD h:mm A"
  format="ISOString"
  dateTime={dateAsISO} />

There are some ISOString "format string" out there but I'd rather not to have to use that neither:

http://stackoverflow.com/questions/114983/given-a-datetime-object-how-do-i-get-a-iso-8601-date-in-string-format

How to display an empty field?

I'm trying to display an empty field when there's no date selected.
How do I do that?
Any help will be appreciated.

minDate & maxDate

Hi guys,
Can i set minDate & maxDate?

Ex: http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

Thanks!

Styling doesn't get applied

Hey Guys it seems like styling doesn't get applied to the components.
Anything I need to do to have this working with the styling??
Thanks

console logs on change time

Please remove console.log that appears on selecting/changing time.

How to display locale datetimepicker

how can I load locale datetimepicker.
my code is

It's not working.