├── .babelrc ├── jestEnvironment.js ├── .eslintignore ├── src ├── __tests__ │ ├── .eslintrc │ ├── DateTimeField-test.js │ ├── DateTimePickerYears-test.js │ ├── DateTimePickerHours-test.js │ ├── DateTimePickerMinutes-test.js │ └── DateTimePickerMonths-test.js ├── Constants.js ├── DateTimePickerYears.js ├── DateTimePickerMonths.js ├── DateTimePickerMinutes.js ├── DateTimePickerHours.js ├── DateTimePickerTime.js ├── DateTimePickerDays.js ├── DateTimePickerDate.js ├── DateTimePicker.js └── DateTimeField.js ├── .gitignore ├── examples ├── README.md ├── basic │ ├── index.html │ ├── ParentComponent.js │ └── basic.js ├── webpack.config.js └── bootstrap-datetimepicker.min.css ├── .npmignore ├── bower.json ├── TODO.md ├── karma.dev.js ├── .eslintrc ├── webpack.config.js ├── LICENSE ├── CONTRIBUTING.md ├── package.json ├── README.md ├── css ├── bootstrap-datetimepicker.min.css └── bootstrap-datetimepicker.css └── dist ├── react-bootstrap-datetimepicker.min.js └── react-bootstrap-datetimepicker.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "optional": ["runtime"], 3 | "stage": 0 4 | } 5 | -------------------------------------------------------------------------------- /jestEnvironment.js: -------------------------------------------------------------------------------- 1 | require.requireActual("babel/polyfill"); 2 | 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/* 2 | dist/* 3 | node_modules/* 4 | **/node_modules/* 5 | -------------------------------------------------------------------------------- /src/__tests__/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jasmine": true 4 | }, 5 | "globals": { 6 | "jest": false 7 | }, 8 | plugins: [ 9 | "jasmine" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | node_modules 3 | .DS_Store 4 | npm-debug.log 5 | test_bundle.js 6 | test-built/* 7 | .idea 8 | docs/*.html 9 | docs/assets/bundle.js 10 | lib/* 11 | /bower_components/ 12 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | == React Bootstrap Datetimepicker Examples 2 | 3 | 1. Clone this repo 4 | 2. Run npm install 5 | 3. Start dev server with `npm run examples` 6 | 4. Browse `http://localhost:8080` 7 | -------------------------------------------------------------------------------- /src/Constants.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | MODE_DATE: "date", 3 | MODE_DATETIME: "datetime", 4 | MODE_TIME: "time", 5 | 6 | SIZE_SMALL: "sm", 7 | SIZE_MEDIUM: "md", 8 | SIZE_LARGE: "lg" 9 | }; 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *~ 2 | node_modules 3 | .DS_Store 4 | npm-debug.log 5 | test_bundle.js 6 | test-built 7 | .idea 8 | docs 9 | src 10 | examples 11 | bower.json 12 | dist 13 | webpack.config.js 14 | TODO.md 15 | karma.dev.js 16 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bootstrap-datetimepicker", 3 | "version": "0.0.22", 4 | "main": [ 5 | "./dist/react-bootstrap-datetimepicker.min.js" 6 | ], 7 | "dependencies": { 8 | "react": ">=0.14", 9 | "moment": "^2.8.2", 10 | "react-bootstrap": "^0.16.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | - Add moment.js to the project dependencies 2 | - Improve positioning 3 | - Let edit the input field by typing 4 | - Write tests 5 | - Support minDate and maxDate 6 | - build a doc with examples 7 | - use bootstrap accordions for picker switching 8 | - support locales 9 | - build DateTimePickerHours and Minutes in the same manner than Years 10 | -------------------------------------------------------------------------------- /karma.dev.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | config.set({ 3 | 4 | basePath: "", 5 | 6 | frameworks: ["mocha", "chai"], 7 | 8 | files: [ 9 | "test_bundle.js" 10 | ], 11 | 12 | reporters: ["progress"], 13 | 14 | port: 9876, 15 | 16 | colors: true, 17 | 18 | logLevel: config.LOG_INFO, 19 | 20 | autoWatch: true, 21 | 22 | browsers: ["Chrome"], 23 | 24 | captureTimeout: 60000, 25 | 26 | singleRun: false 27 | }); 28 | }; 29 | -------------------------------------------------------------------------------- /examples/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | Basic Example 3 | 4 | 5 | 6 | 17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /examples/basic/ParentComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import DateTimeField from "react-bootstrap-datetimepicker"; 3 | 4 | class ParentComponent extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | date: "1990-06-05", 9 | format: "YYYY-MM-DD", 10 | inputFormat: "DD/MM/YYYY", 11 | mode: "date" 12 | }; 13 | } 14 | 15 | handleChange = (newDate) => { 16 | console.log("newDate", newDate); 17 | return this.setState({date: newDate}); 18 | } 19 | 20 | render() { 21 | const {date, format, mode, inputFormat} = this.state; 22 | return (); 29 | } 30 | } 31 | 32 | module.exports = ParentComponent; 33 | -------------------------------------------------------------------------------- /examples/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | var HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | module.exports = { 5 | 6 | entry: { 7 | "basic": "./examples/basic/basic.js" 8 | }, 9 | 10 | output: { 11 | path: __dirname, 12 | filename: "[name].js", 13 | chunkFilename: "[id].chunk.js", 14 | sourceMapFilename: "[name].map", 15 | assetPath: "/" 16 | }, 17 | 18 | resolve: { 19 | alias: { 20 | "react-bootstrap-datetimepicker": "../../src/DateTimeField" 21 | }, 22 | extensions: ["", ".js"] 23 | }, 24 | 25 | module: { 26 | loaders: [ 27 | { test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader" } 28 | ] 29 | }, 30 | 31 | 32 | devServer: { 33 | contentBase: "examples/", 34 | stats: {colors: true} 35 | }, 36 | 37 | devtool: "eval-source-map", 38 | plugins: [new HtmlWebpackPlugin({ 39 | template: path.join(__dirname, "/basic/index.html") 40 | })] 41 | 42 | }; 43 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "es6": true, 9 | "node": true 10 | }, 11 | "parser": "babel-eslint", 12 | "plugins": [ 13 | "react" 14 | ], 15 | "rules": { 16 | "curly": 0, 17 | "react/display-name": 0, 18 | "react/jsx-boolean-value": 2, 19 | "react/jsx-quotes": 2, 20 | "react/jsx-no-undef": 2, 21 | "react/jsx-sort-props": 1, 22 | "react/jsx-uses-react": 2, 23 | "react/jsx-uses-vars": 2, 24 | "react/no-did-mount-set-state": 2, 25 | "react/no-did-update-set-state": 2, 26 | "react/no-multi-comp": 1, 27 | "react/no-unknown-property": 2, 28 | "react/prop-types": 2, 29 | "react/react-in-jsx-scope": 2, 30 | "react/require-extension": 1, 31 | "react/self-closing-comp": 2, 32 | "react/wrap-multilines": 2, 33 | "space-after-keywords": [2, "always"], 34 | "space-before-blocks": [2, "always"], 35 | "space-in-parens": [2, "never"] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var path = require("path"); 3 | 4 | var plugins = [ 5 | new webpack.DefinePlugin({ 6 | "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) 7 | }) 8 | ]; 9 | 10 | if (process.env.COMPRESS) { 11 | plugins.push( 12 | new webpack.optimize.UglifyJsPlugin({ 13 | compressor: { 14 | warnings: false 15 | } 16 | }) 17 | ); 18 | } 19 | 20 | module.exports = { 21 | 22 | entry: ["./src/DateTimeField.js"], 23 | 24 | output: { 25 | path: path.join(__dirname, "/dist/"), 26 | library: "ReactBootstrapDatetimepicker", 27 | libraryTarget: "umd" 28 | }, 29 | 30 | resolve: { 31 | extensions: ["", ".js"] 32 | }, 33 | 34 | externals: { 35 | "react": "React", 36 | "react/addons": "React", 37 | "react-bootstrap": "ReactBootstrap", 38 | "moment": "moment" 39 | }, 40 | 41 | module: { 42 | loaders: [ 43 | { test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader" } 44 | ] 45 | }, 46 | 47 | plugins: plugins 48 | 49 | }; 50 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Quri, Loïc CHOLLIER 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/DateTimePickerYears.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import classnames from "classnames"; 3 | 4 | export default class DateTimePickerYears extends Component { 5 | static propTypes = { 6 | subtractDecade: PropTypes.func.isRequired, 7 | addDecade: PropTypes.func.isRequired, 8 | viewDate: PropTypes.object.isRequired, 9 | selectedDate: PropTypes.object.isRequired, 10 | setViewYear: PropTypes.func.isRequired 11 | } 12 | 13 | renderYears = () => { 14 | var classes, i, year, years; 15 | years = []; 16 | year = parseInt(this.props.viewDate.year() / 10, 10) * 10; 17 | year--; 18 | i = -1; 19 | while (i < 11) { 20 | classes = { 21 | year: true, 22 | old: i === -1 | i === 10, 23 | active: this.props.selectedDate.year() === year 24 | }; 25 | years.push({year}); 26 | year++; 27 | i++; 28 | } 29 | return years; 30 | } 31 | 32 | render() { 33 | var year; 34 | year = parseInt(this.props.viewDate.year() / 10, 10) * 10; 35 | return ( 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
‹{year} - {year + 9}›
{this.renderYears()}
54 |
55 | ); 56 | } 57 | } 58 | 59 | -------------------------------------------------------------------------------- /src/DateTimePickerMonths.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import classnames from "classnames"; 3 | import moment from "moment"; 4 | 5 | export default class DateTimePickerMonths extends Component { 6 | static propTypes = { 7 | subtractYear: PropTypes.func.isRequired, 8 | addYear: PropTypes.func.isRequired, 9 | viewDate: PropTypes.object.isRequired, 10 | selectedDate: PropTypes.object.isRequired, 11 | showYears: PropTypes.func.isRequired, 12 | setViewMonth: PropTypes.func.isRequired 13 | } 14 | 15 | renderMonths = () => { 16 | var classes, i, month, months, monthsShort; 17 | month = this.props.selectedDate.month(); 18 | monthsShort = moment.monthsShort(); 19 | i = 0; 20 | months = []; 21 | while (i < 12) { 22 | classes = { 23 | month: true, 24 | "active": i === month && this.props.viewDate.year() === this.props.selectedDate.year() 25 | }; 26 | months.push({monthsShort[i]}); 27 | i++; 28 | } 29 | return months; 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
‹{this.props.viewDate.year()}›
{this.renderMonths()}
52 |
53 | ); 54 | } 55 | } 56 | 57 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Thanks for contributing, you rock! 2 | 3 | If you use our code, it is now *our* code. 4 | 5 | - [Think You Found a Bug?](#bug) 6 | - [Proposing New or Changed API?](#api) 7 | - [Issue Not Getting Attention?](#attention) 8 | - [Making a Pull Request?](#pr) 9 | - [Development](#development) 10 | - [Hacking](#hacking) 11 | 12 | 13 | ## Think You Found a Bug? 14 | 15 | Please provide a test case of some sort. Best is a pull request with a failing test. Next is a link to CodePen/JS Bin or repository that illustrates the bug. Finally, some copy/pastable code is acceptable. 16 | 17 | 18 | ## Proposing New or Changed API? 19 | 20 | Please provide thoughtful comments and some sample code. Proposals without substance will be closed. 21 | 22 | 23 | ## Issue Not Getting Attention? 24 | 25 | If you need a bug fixed and nobody is fixing it, it is your responsibility to fix it. Issues with no activity for 30 days may be closed. 26 | 27 | 28 | ## Making a Pull Request? 29 | 30 | Do not include the results of `npm run build` / `npm run build-npm` / `npm run build-min`. This is done at the release cycle by the maintainer when publishing a new version. 31 | 32 | ### Tests 33 | 34 | All commits that fix bugs or add features need a test. 35 | 36 | ``Do not merge code without tests.`` 37 | 38 | ### Changelog 39 | 40 | All commits that change or add to the API must be done in a pull request that also: 41 | 42 | - Adds an entry to `CHANGES.md` with clear steps for updating code for changed or removed API 43 | - Updates examples 44 | - Updates the docs 45 | 46 | ## Development 47 | 48 | - `npm test` starts a karma test runner and watch for changes 49 | - `npm run examples` starts a webpack dev server that will watch for changes and build the examples 50 | 51 | ## Hacking 52 | 53 | The best way to hack on the router is to run examples. 54 | 55 | This guidelines are inspired by [reactjs/react-router](https://github.com/reactjs/react-router/blob/master/CONTRIBUTING.md) 56 | -------------------------------------------------------------------------------- /src/DateTimePickerMinutes.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import Constants from "./Constants.js"; 3 | 4 | export default class DateTimePickerMinutes extends Component { 5 | static propTypes = { 6 | setSelectedMinute: PropTypes.func.isRequired, 7 | onSwitch: PropTypes.func.isRequired, 8 | mode: PropTypes.string.isRequired 9 | } 10 | 11 | renderSwitchButton = () => { 12 | return this.props.mode === Constants.MODE_TIME ? 13 | ( 14 |
    15 |
  • 16 | 17 |
    • 18 |
19 | ) : 20 | null; 21 | } 22 | 23 | render() { 24 | return ( 25 |
26 | {this.renderSwitchButton()} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
00051015
20253035
40455055
60 |
61 | ); 62 | } 63 | } 64 | 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bootstrap-datetimepicker", 3 | "version": "0.0.22", 4 | "description": "A bootstrap datetime picker component for React.js", 5 | "homepage": "http://dev.quri.com/react-bootstrap-datetimepicker/", 6 | "repository": { 7 | "type": "git", 8 | "url": "http://github.com/quri/react-bootstrap-datetimepicker" 9 | }, 10 | "main": "./lib/DateTimeField.js", 11 | "scripts": { 12 | "build-npm": "babel --stage 0 ./src -d ./lib --ignore __tests__/*", 13 | "build": "NODE_ENV=production webpack --output-file react-bootstrap-datetimepicker.js", 14 | "build-min": "NODE_ENV=production COMPRESS=1 webpack --output-file react-bootstrap-datetimepicker.min.js", 15 | "examples": "webpack-dev-server --config ./examples/webpack.config.js", 16 | "test": "jest", 17 | "lint": "eslint ." 18 | }, 19 | "keywords": [ 20 | "react", 21 | "react-component", 22 | "bootstrap", 23 | "datetimepicker", 24 | "datetime" 25 | ], 26 | "author": "Loïc CHOLLIER ", 27 | "license": "MIT", 28 | "peerDependencies": { 29 | "react": ">=0.14" 30 | }, 31 | "jest": { 32 | "scriptPreprocessor": "/node_modules/babel-jest", 33 | "unmockedModulePathPatterns": [ 34 | "core-js/.*", 35 | "/node_modules/react", 36 | "babel", 37 | "/node_modules/babel", 38 | "/node_modules/react-dom", 39 | "/node_modules/react-addons-test-utils", 40 | "/node_modules/fbjs" 41 | ], 42 | "setupEnvScriptFile": "/jestEnvironment.js", 43 | "testFileExtensions": [ 44 | "es6", 45 | "js" 46 | ], 47 | "moduleFileExtensions": [ 48 | "js", 49 | "json", 50 | "es6" 51 | ], 52 | "testPathDirs": [ 53 | "src/" 54 | ] 55 | }, 56 | "devDependencies": { 57 | "babel": "^5.8.23", 58 | "babel-core": "^5.6.17", 59 | "babel-eslint": "^3.1.23", 60 | "babel-jest": "^5.3.0", 61 | "babel-loader": "^5.3.1", 62 | "envify": "~3.2.0", 63 | "eslint": "^0.24.1", 64 | "eslint-plugin-jasmine": "^1.1.0", 65 | "eslint-plugin-react": "^2.7.0", 66 | "grunt": "~0.4.2", 67 | "grunt-amd-wrap": "^1.0.1", 68 | "grunt-browserify": "~1.3.0", 69 | "grunt-cli": "~0.1.13", 70 | "grunt-contrib-clean": "~0.5.0", 71 | "grunt-contrib-copy": "~0.5.0", 72 | "grunt-contrib-requirejs": "~0.4.1", 73 | "grunt-contrib-uglify": "~0.3.2", 74 | "grunt-contrib-watch": "~0.5.3", 75 | "grunt-react": "~0.10.0", 76 | "grunt-shell": "~0.6.4", 77 | "html-webpack-plugin": "^1.1.0", 78 | "jest-cli": "^0.5.0", 79 | "jsx-loader": "^0.12.2", 80 | "react": "^0.14.2", 81 | "react-addons-test-utils": "^0.14.2", 82 | "react-dom": "^0.14.2", 83 | "requirejs": "~2.1.9", 84 | "webpack": "^1.5.1", 85 | "webpack-dev-server": "^1.7.0" 86 | }, 87 | "dependencies": { 88 | "babel-runtime": "^5.6.18", 89 | "classnames": "^2.1.2", 90 | "moment": "^2.8.2" 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/__tests__/DateTimeField-test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import TestUtils from "react-addons-test-utils"; 4 | 5 | jest.dontMock("moment"); 6 | jest.dontMock("../DateTimeField.js"); 7 | 8 | describe("DateTimeField", function() { 9 | const moment = require("moment"); 10 | const DateTimeField = require("../DateTimeField.js"); 11 | const happyDate = moment("1990-06-05 07:30"); 12 | let createParent, TestParent; 13 | 14 | 15 | describe("By default", function() { 16 | 17 | it("shows the right date for a given dateTime and inputFormat", function() { 18 | const component = TestUtils.renderIntoDocument(); 19 | const input = TestUtils.findRenderedDOMComponentWithTag(component, "input"); 20 | expect(input.value).toBe("06/05/90 7:30 AM"); 21 | }); 22 | 23 | it("allows a custom zIndex to be applied to overlay", function() { 24 | const component = TestUtils.renderIntoDocument(); 25 | const input = TestUtils.findRenderedDOMComponentWithClass(component, "input-group-addon"); 26 | TestUtils.Simulate.click(input); 27 | const overlay = TestUtils.findRenderedDOMComponentWithClass(component, "bootstrap-datetimepicker-overlay"); 28 | expect(ReactDOM.findDOMNode(overlay).style.zIndex).toBe('1234'); 29 | }); 30 | 31 | }); 32 | 33 | describe("When changing props", function() { 34 | 35 | beforeEach(() => { 36 | TestParent = React.createFactory(React.createClass({ 37 | getInitialState() { 38 | return { 39 | dateTime: happyDate.format("x"), 40 | ...this.props 41 | }; 42 | }, 43 | 44 | render() { 45 | return ; 46 | } 47 | })); 48 | createParent = (initalState) => TestUtils.renderIntoDocument(TestParent(initalState)); // eslint-disable-line 49 | }); 50 | 51 | it("changes the displayed date when dateTime changes", function() { 52 | const Parent = createParent(); 53 | const input = TestUtils.findRenderedDOMComponentWithTag(Parent, "input"); 54 | expect(input.value).toBe("06/05/90 7:30 AM"); 55 | Parent.setState({dateTime: moment("1981-06-04 05:45").format("x")}); 56 | expect(input.value).toBe("06/04/81 5:45 AM"); 57 | }); 58 | 59 | it("changes the displayed format when inputFormat changes", function() { 60 | const Parent = createParent(); 61 | const input = TestUtils.findRenderedDOMComponentWithTag(Parent, "input"); 62 | expect(input.value).toBe("06/05/90 7:30 AM"); 63 | Parent.setState({inputFormat: "x"}); 64 | expect(input.value).toBe(happyDate.format("x")); 65 | }); 66 | 67 | it("doesn't change the defaultText if dateTime didn't change", function() { 68 | const Parent = createParent({defaultText: "Pick a date"}); 69 | const input = TestUtils.findRenderedDOMComponentWithTag(Parent, "input"); 70 | expect(input.value).toBe("Pick a date"); 71 | Parent.setState({}); 72 | expect(input.value).toBe("Pick a date"); 73 | }); 74 | 75 | 76 | }); 77 | 78 | }); 79 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ⚠️ [DEPRECATED] react-bootstrap-datetimepicker 2 | =============================== 3 | 4 | ⚠️ This repository is not maintained anymore, please refer to this fork : https://github.com/YouCanBookMe/react-datetime 5 | 6 | This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js 7 | 8 | Usage 9 | =============================== 10 | 11 | Installation : 12 | ``` 13 | npm install react-bootstrap-datetimepicker 14 | ``` 15 | 16 | Then 17 | ```javascript 18 | var DateTimeField = require('react-bootstrap-datetimepicker'); 19 | 20 | ... 21 | 22 | render: function() { 23 | return ; 24 | } 25 | ``` 26 | See [Examples](examples/) for more details. 27 | 28 | API 29 | =============================== 30 | 31 | DateTimeField 32 | ======== 33 | 34 | | Name | Type | Default | Description | 35 | | ------------ | ------- | ------- | ----------- | 36 | | **dateTime** | string | moment().format('x') | Represents the inital dateTime, this string is then parsed by moment.js | 37 | | **format** | string | "x" | Defines the format moment.js should use to parse and output the date to onChange | 38 | | **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 | 39 | | **onChange** | function | x => console.log(x) | Callback trigger when the date changes. `x` is the new datetime value. | 40 | | **showToday** | boolean | true | Highlights today's date | 41 | | **size** | string | "md" | Changes the size of the date picker input field. Sizes: "sm", "md", "lg" | 42 | | **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | 43 | | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') | 44 | | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | 45 | | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | 46 | | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | 47 | | **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | 48 | | **defaultText** | string | {dateTime} | Sets the initial value. Could be an empty string, or helper text. | 49 | 50 | Update Warning 51 | =============================== 52 | 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. 53 | However now the package exports DateTimeField directly, no need to do : 54 | ```javascript 55 | var DateTimeField = require('react-bootstrap-datetimepicker').DateTimeField; 56 | ``` 57 | instead use : 58 | ```javascript 59 | var DateTimeField = require('react-bootstrap-datetimepicker'); 60 | ``` 61 | 62 | Contributions 63 | =============================== 64 | There is still plenty of features missing compared to the original date time picker, hence contributions would be highly appreciated. 65 | -------------------------------------------------------------------------------- /src/__tests__/DateTimePickerYears-test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TestUtils from "react-addons-test-utils"; 3 | 4 | jest.dontMock("../DateTimePickerYears.js"); 5 | jest.dontMock("moment"); 6 | 7 | describe("DateTimePickerYears", function() { 8 | const moment = require("moment"); 9 | const DateTimePickerYears = require("../DateTimePickerYears.js"); 10 | let subtractDecadeMock, addDecadeMock, setViewYearMock, years; 11 | 12 | beforeEach(() => { 13 | subtractDecadeMock = jest.genMockFunction(); 14 | addDecadeMock = jest.genMockFunction(); 15 | setViewYearMock = jest.genMockFunction(); 16 | years = TestUtils.renderIntoDocument( 17 | 24 | ); 25 | }); 26 | 27 | describe("Controls", function() { 28 | it("calls subtractDecade when clicking the prev arrow", function() { 29 | const prevArrow = TestUtils.findRenderedDOMComponentWithClass(years, "prev"); 30 | TestUtils.Simulate.click(prevArrow); 31 | expect(subtractDecadeMock.mock.calls.length).toBe(1); 32 | }); 33 | 34 | it("calls addDecade when clicking the next arrow", function() { 35 | const nextArrow = TestUtils.findRenderedDOMComponentWithClass(years, "next"); 36 | TestUtils.Simulate.click(nextArrow); 37 | expect(addDecadeMock.mock.calls.length).toBe(1); 38 | }); 39 | 40 | it("calls setViewYear when clicking a year", function() { 41 | const year = TestUtils.findRenderedDOMComponentWithClass(years, "active"); 42 | TestUtils.Simulate.click(year); 43 | expect(setViewYearMock.mock.calls.length).toBe(1); 44 | }); 45 | }); 46 | 47 | describe("UI", function() { 48 | it("renders 12 years", function() { 49 | const yearList = TestUtils.scryRenderedDOMComponentsWithClass(years, "year"); 50 | expect(yearList.length).toBe(12); 51 | }); 52 | 53 | it("renders the decade plus two extra", function() { 54 | const yearList = TestUtils.scryRenderedDOMComponentsWithClass(years, "year"); 55 | const beginningDecade = parseInt(moment().format("GGGG").substr(0, 3) + 0); // will produce 2010 for 2015. 56 | let array = []; 57 | for (let i = 0; i < 12; i++) { 58 | array.push(beginningDecade + i - 1); 59 | } // [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020] 60 | 61 | expect(yearList.map((x) => parseInt(x.textContent))).toEqual(array); 62 | 63 | }); 64 | 65 | it("has an active year that is now's year", function() { 66 | const active = TestUtils.findRenderedDOMComponentWithClass(years, "active"); 67 | expect(parseInt(active.textContent)).toBe(parseInt(moment().format("GGGG"))); 68 | }); 69 | 70 | it("has no active year that if viewDate is another decade than selectedDate", function() { 71 | years = TestUtils.renderIntoDocument( 72 | 79 | ); 80 | const active = TestUtils.scryRenderedDOMComponentsWithClass(years, "active"); 81 | expect(active.length).toBe(0); 82 | }); 83 | }); 84 | 85 | }); 86 | -------------------------------------------------------------------------------- /src/DateTimePickerHours.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import Constants from "./Constants.js"; 3 | 4 | export default class DateTimePickerHours extends Component { 5 | static propTypes = { 6 | setSelectedHour: PropTypes.func.isRequired, 7 | onSwitch: PropTypes.func.isRequired, 8 | mode: PropTypes.string.isRequired 9 | } 10 | 11 | renderSwitchButton = () => { 12 | return this.props.mode === Constants.MODE_TIME ? 13 | ( 14 |
    15 |
  • 16 | 17 |
    • 18 |
19 | ) : 20 | null; 21 | } 22 | 23 | render() { 24 | return ( 25 |
26 | {this.renderSwitchButton()} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 |
01020304
05060708
09101112
13141516
17181920
21222324
90 |
91 | ); 92 | } 93 | } 94 | 95 | -------------------------------------------------------------------------------- /src/__tests__/DateTimePickerHours-test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TestUtils from "react-addons-test-utils"; 3 | import Constants from "../Constants.js"; 4 | 5 | jest.dontMock("../DateTimePickerHours.js"); 6 | 7 | describe("DateTimePickerHours", function() { 8 | const DateTimePickerHours = require("../DateTimePickerHours.js"); 9 | let hours, onSwitchMock, setSelectedHourMock; 10 | 11 | 12 | describe("Controls", function() { 13 | 14 | beforeEach(() => { 15 | setSelectedHourMock = jest.genMockFunction(); 16 | onSwitchMock = jest.genMockFunction(); 17 | hours = TestUtils.renderIntoDocument( 18 | 23 | ); 24 | }); 25 | 26 | it("calls setSelectedHour when clicking a hour", function() { 27 | const hour = TestUtils.scryRenderedDOMComponentsWithClass(hours, "hour")[0]; 28 | TestUtils.Simulate.click(hour); 29 | expect(setSelectedHourMock.mock.calls.length).toBe(1); 30 | }); 31 | 32 | it("calls onSwitch when clicking the switch", function() { 33 | const switchIcon = TestUtils.findRenderedDOMComponentWithClass(hours, "picker-switch"); 34 | TestUtils.Simulate.click(switchIcon); 35 | expect(onSwitchMock.mock.calls.length).toBe(1); 36 | }); 37 | }); 38 | 39 | describe("UI", function() { 40 | beforeEach(() => { 41 | setSelectedHourMock = jest.genMockFunction(); 42 | onSwitchMock = jest.genMockFunction(); 43 | }); 44 | 45 | it("renders the switch if mode is time", function() { 46 | hours = TestUtils.renderIntoDocument( 47 | 52 | ); 53 | const switchList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "list-unstyled"); 54 | expect(switchList.length).toBe(1); 55 | }); 56 | 57 | it("does not render the switch if mode is date", function() { 58 | hours = TestUtils.renderIntoDocument( 59 | 64 | ); 65 | const switchList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "list-unstyled"); 66 | expect(switchList.length).toBe(0); 67 | }); 68 | 69 | it("renders 24 Hours", function() { 70 | hours = TestUtils.renderIntoDocument( 71 | 76 | ); 77 | const hourList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "hour"); 78 | expect(hourList.length).toBe(24); 79 | }); 80 | 81 | it("renders 01 to 24", function() { 82 | hours = TestUtils.renderIntoDocument( 83 | 88 | ); 89 | const hourList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "hour"); 90 | expect(hourList.map((x) => x.textContent)).toEqual(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"]); 91 | }); 92 | 93 | }); 94 | 95 | }); 96 | -------------------------------------------------------------------------------- /src/__tests__/DateTimePickerMinutes-test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TestUtils from "react-addons-test-utils"; 3 | import Constants from "../Constants.js"; 4 | 5 | jest.dontMock("../DateTimePickerMinutes.js"); 6 | 7 | describe("DateTimePickerMinutes", function() { 8 | const DateTimePickerMinutes = require("../DateTimePickerMinutes.js"); 9 | let minutes, onSwitchMock, setSelectedMinuteMock; 10 | 11 | 12 | describe("Controls", function() { 13 | 14 | beforeEach(() => { 15 | setSelectedMinuteMock = jest.genMockFunction(); 16 | onSwitchMock = jest.genMockFunction(); 17 | minutes = TestUtils.renderIntoDocument( 18 | 23 | ); 24 | }); 25 | 26 | it("calls setSelectedMinute when clicking a minute", function() { 27 | const minute = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "minute")[0]; 28 | TestUtils.Simulate.click(minute); 29 | expect(setSelectedMinuteMock.mock.calls.length).toBe(1); 30 | }); 31 | 32 | it("calls onSwitch when clicking the switch", function() { 33 | const switchIcon = TestUtils.findRenderedDOMComponentWithClass(minutes, "picker-switch"); 34 | TestUtils.Simulate.click(switchIcon); 35 | expect(onSwitchMock.mock.calls.length).toBe(1); 36 | }); 37 | }); 38 | 39 | describe("UI", function() { 40 | beforeEach(() => { 41 | setSelectedMinuteMock = jest.genMockFunction(); 42 | onSwitchMock = jest.genMockFunction(); 43 | }); 44 | 45 | it("renders the switch if mode is time", function() { 46 | minutes = TestUtils.renderIntoDocument( 47 | 52 | ); 53 | const switchList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "list-unstyled"); 54 | expect(switchList.length).toBe(1); 55 | }); 56 | 57 | it("does not render the switch if mode is date", function() { 58 | minutes = TestUtils.renderIntoDocument( 59 | 64 | ); 65 | const switchList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "list-unstyled"); 66 | expect(switchList.length).toBe(0); 67 | }); 68 | 69 | it("renders 12 different Minutes", function() { 70 | minutes = TestUtils.renderIntoDocument( 71 | 76 | ); 77 | const minuteList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "minute"); 78 | expect(minuteList.length).toBe(12); 79 | }); 80 | 81 | it("renders 01 to 24", function() { 82 | minutes = TestUtils.renderIntoDocument( 83 | 88 | ); 89 | const minuteList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "minute"); 90 | expect(minuteList.map((x) => x.textContent)).toEqual(["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]); 91 | }); 92 | 93 | }); 94 | 95 | }); 96 | -------------------------------------------------------------------------------- /src/__tests__/DateTimePickerMonths-test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TestUtils from "react-addons-test-utils"; 3 | 4 | jest.dontMock("moment"); 5 | jest.dontMock("../DateTimePickerMonths.js"); 6 | 7 | describe("DateTimePickerMonths", function() { 8 | const moment = require("moment"); 9 | const DateTimePickerMonths = require("../DateTimePickerMonths.js"); 10 | let subtractYearMock, addYearMock, setViewMonthMock, showYearsMock, months; 11 | 12 | beforeEach(() => { 13 | subtractYearMock = jest.genMockFunction(); 14 | addYearMock = jest.genMockFunction(); 15 | showYearsMock = jest.genMockFunction(); 16 | setViewMonthMock = jest.genMockFunction(); 17 | months = TestUtils.renderIntoDocument( 18 | 26 | ); 27 | }); 28 | 29 | describe("Controls", function() { 30 | it("calls subtractYear when clicking the prev arrow", function() { 31 | const prevArrow = TestUtils.findRenderedDOMComponentWithClass(months, "prev"); 32 | TestUtils.Simulate.click(prevArrow); 33 | expect(subtractYearMock.mock.calls.length).toBe(1); 34 | }); 35 | 36 | it("calls addYear when clicking the next arrow", function() { 37 | const nextArrow = TestUtils.findRenderedDOMComponentWithClass(months, "next"); 38 | TestUtils.Simulate.click(nextArrow); 39 | expect(addYearMock.mock.calls.length).toBe(1); 40 | }); 41 | 42 | it("calls showYears when clicking the year", function() { 43 | const year = TestUtils.findRenderedDOMComponentWithClass(months, "switch"); 44 | TestUtils.Simulate.click(year); 45 | expect(showYearsMock.mock.calls.length).toBe(1); 46 | }); 47 | 48 | it("calls setViewMonth when clicking a month", function() { 49 | const month = TestUtils.findRenderedDOMComponentWithClass(months, "active"); 50 | TestUtils.Simulate.click(month); 51 | expect(setViewMonthMock.mock.calls.length).toBe(1); 52 | }); 53 | }); 54 | 55 | describe("UI", function() { 56 | it("renders 12 months", function() { 57 | const monthList = TestUtils.scryRenderedDOMComponentsWithClass(months, "month"); 58 | expect(monthList.length).toBe(12); 59 | }); 60 | 61 | it("rendersJanuary through December", function() { 62 | const monthList = TestUtils.scryRenderedDOMComponentsWithClass(months, "month"); 63 | expect(monthList.map((x) => x.textContent)).toEqual(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]); 64 | }); 65 | 66 | it("has an active month that is now's month", function() { 67 | const active = TestUtils.findRenderedDOMComponentWithClass(months, "active"); 68 | expect(active.textContent).toBe(moment().format("MMM")); 69 | }); 70 | 71 | it("has no active month that if viewDate is another year than selectedDate", function() { 72 | months = TestUtils.renderIntoDocument( 73 | 81 | ); 82 | const active = TestUtils.scryRenderedDOMComponentsWithClass(months, "active"); 83 | expect(active.length).toBe(0); 84 | }); 85 | }); 86 | 87 | }); 88 | -------------------------------------------------------------------------------- /src/DateTimePickerTime.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import DateTimePickerMinutes from "./DateTimePickerMinutes"; 3 | import DateTimePickerHours from "./DateTimePickerHours"; 4 | import Constants from "./Constants.js"; 5 | 6 | export default class DateTimePickerTime extends Component { 7 | static propTypes = { 8 | setSelectedHour: PropTypes.func.isRequired, 9 | setSelectedMinute: PropTypes.func.isRequired, 10 | subtractHour: PropTypes.func.isRequired, 11 | addHour: PropTypes.func.isRequired, 12 | subtractMinute: PropTypes.func.isRequired, 13 | addMinute: PropTypes.func.isRequired, 14 | viewDate: PropTypes.object.isRequired, 15 | selectedDate: PropTypes.object.isRequired, 16 | togglePeriod: PropTypes.func.isRequired, 17 | mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]) 18 | } 19 | 20 | state = { 21 | minutesDisplayed: false, 22 | hoursDisplayed: false 23 | } 24 | 25 | goBack = () => { 26 | return this.setState({ 27 | minutesDisplayed: false, 28 | hoursDisplayed: false 29 | }); 30 | } 31 | 32 | showMinutes = () => { 33 | return this.setState({ 34 | minutesDisplayed: true 35 | }); 36 | } 37 | 38 | showHours = () => { 39 | return this.setState({ 40 | hoursDisplayed: true 41 | }); 42 | } 43 | 44 | renderMinutes = () => { 45 | if (this.state.minutesDisplayed) { 46 | return ; 47 | } else { 48 | return null; 49 | } 50 | } 51 | 52 | renderHours = () => { 53 | if (this.state.hoursDisplayed) { 54 | return ; 55 | } else { 56 | return null; 57 | } 58 | } 59 | 60 | renderPicker = () => { 61 | if (!this.state.minutesDisplayed && !this.state.hoursDisplayed) { 62 | return ( 63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |
{this.props.selectedDate.format("h")}:{this.props.selectedDate.format("mm")}
99 |
100 | ); 101 | } else { 102 | return ""; 103 | } 104 | } 105 | 106 | render() { 107 | return ( 108 |
109 | {this.renderPicker()} 110 | 111 | {this.renderHours()} 112 | 113 | {this.renderMinutes()} 114 |
115 | ); 116 | } 117 | } 118 | 119 | module.exports = DateTimePickerTime; 120 | -------------------------------------------------------------------------------- /src/DateTimePickerDays.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import moment from "moment"; 3 | import classnames from "classnames"; 4 | 5 | export default class DateTimePickerDays extends Component { 6 | static propTypes = { 7 | subtractMonth: PropTypes.func.isRequired, 8 | addMonth: PropTypes.func.isRequired, 9 | viewDate: PropTypes.object.isRequired, 10 | selectedDate: PropTypes.object.isRequired, 11 | showToday: PropTypes.bool, 12 | daysOfWeekDisabled: PropTypes.array, 13 | setSelectedDate: PropTypes.func.isRequired, 14 | showMonths: PropTypes.func.isRequired, 15 | minDate: PropTypes.object, 16 | maxDate: PropTypes.object 17 | } 18 | 19 | static defaultProps = { 20 | showToday: true 21 | } 22 | 23 | renderDays = () => { 24 | var cells, classes, days, html, month, nextMonth, prevMonth, minDate, maxDate, row, year; 25 | year = this.props.viewDate.year(); 26 | month = this.props.viewDate.month(); 27 | prevMonth = this.props.viewDate.clone().subtract(1, "months"); 28 | days = prevMonth.daysInMonth(); 29 | prevMonth.date(days).startOf("week"); 30 | nextMonth = moment(prevMonth).clone().add(42, "d"); 31 | minDate = this.props.minDate ? this.props.minDate.clone().subtract(1, "days") : this.props.minDate; 32 | maxDate = this.props.maxDate ? this.props.maxDate.clone() : this.props.maxDate; 33 | html = []; 34 | cells = []; 35 | while (prevMonth.isBefore(nextMonth)) { 36 | classes = { 37 | day: true 38 | }; 39 | if (prevMonth.year() < year || (prevMonth.year() === year && prevMonth.month() < month)) { 40 | classes.old = true; 41 | } else if (prevMonth.year() > year || (prevMonth.year() === year && prevMonth.month() > month)) { 42 | classes.new = true; 43 | } 44 | if (prevMonth.isSame(moment({ 45 | y: this.props.selectedDate.year(), 46 | M: this.props.selectedDate.month(), 47 | d: this.props.selectedDate.date() 48 | }))) { 49 | classes.active = true; 50 | } 51 | if (this.props.showToday) { 52 | if (prevMonth.isSame(moment(), "day")) { 53 | classes.today = true; 54 | } 55 | } 56 | if ((minDate && prevMonth.isBefore(minDate)) || (maxDate && prevMonth.isAfter(maxDate))) { 57 | classes.disabled = true; 58 | } 59 | if (this.props.daysOfWeekDisabled.length > 0) classes.disabled = this.props.daysOfWeekDisabled.indexOf(prevMonth.day()) !== -1; 60 | cells.push({prevMonth.date()}); 61 | if (prevMonth.weekday() === moment().endOf("week").weekday()) { 62 | row = {cells}; 63 | html.push(row); 64 | cells = []; 65 | } 66 | prevMonth.add(1, "d"); 67 | } 68 | return html; 69 | } 70 | 71 | render() { 72 | return ( 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | {this.renderDays()} 103 | 104 |
{moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()}
SuMoTuWeThFrSa
105 |
106 | ); 107 | } 108 | } 109 | 110 | -------------------------------------------------------------------------------- /css/bootstrap-datetimepicker.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Datetimepicker for Bootstrap v3 3 | * https://github.com/Eonasdan/bootstrap-datetimepicker/ 4 | */ 5 | .bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:none;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important} -------------------------------------------------------------------------------- /src/DateTimePickerDate.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import DateTimePickerDays from "./DateTimePickerDays"; 3 | import DateTimePickerMonths from "./DateTimePickerMonths"; 4 | import DateTimePickerYears from "./DateTimePickerYears"; 5 | 6 | export default class DateTimePickerDate extends Component { 7 | static propTypes = { 8 | subtractMonth: PropTypes.func.isRequired, 9 | addMonth: PropTypes.func.isRequired, 10 | viewDate: PropTypes.object.isRequired, 11 | selectedDate: PropTypes.object.isRequired, 12 | showToday: PropTypes.bool, 13 | viewMode: PropTypes.oneOfType([ 14 | PropTypes.string, 15 | PropTypes.number 16 | ]), 17 | daysOfWeekDisabled: PropTypes.array, 18 | setSelectedDate: PropTypes.func.isRequired, 19 | subtractYear: PropTypes.func.isRequired, 20 | addYear: PropTypes.func.isRequired, 21 | setViewMonth: PropTypes.func.isRequired, 22 | setViewYear: PropTypes.func.isRequired, 23 | addDecade: PropTypes.func.isRequired, 24 | subtractDecade: PropTypes.func.isRequired, 25 | minDate: PropTypes.object, 26 | maxDate: PropTypes.object 27 | } 28 | 29 | constructor(props) { 30 | super(props); 31 | const viewModes = { 32 | "days": { 33 | daysDisplayed: true, 34 | monthsDisplayed: false, 35 | yearsDisplayed: false 36 | }, 37 | "months": { 38 | daysDisplayed: false, 39 | monthsDisplayed: true, 40 | yearsDisplayed: false 41 | }, 42 | "years": { 43 | daysDisplayed: false, 44 | monthsDisplayed: false, 45 | yearsDisplayed: true 46 | } 47 | }; 48 | this.state = viewModes[this.props.viewMode] || viewModes[Object.keys(viewModes)[this.props.viewMode]] || viewModes.days; 49 | } 50 | 51 | showMonths = () => { 52 | return this.setState({ 53 | daysDisplayed: false, 54 | monthsDisplayed: true 55 | }); 56 | } 57 | 58 | showYears = () => { 59 | return this.setState({ 60 | monthsDisplayed: false, 61 | yearsDisplayed: true 62 | }); 63 | } 64 | 65 | setViewYear = (e) => { 66 | this.props.setViewYear(e.target.innerHTML); 67 | return this.setState({ 68 | yearsDisplayed: false, 69 | monthsDisplayed: true 70 | }); 71 | } 72 | 73 | setViewMonth = (e) => { 74 | this.props.setViewMonth(e.target.innerHTML); 75 | return this.setState({ 76 | monthsDisplayed: false, 77 | daysDisplayed: true 78 | }); 79 | } 80 | 81 | renderDays = () => { 82 | if (this.state.daysDisplayed) { 83 | return ( 84 | 96 | ); 97 | } else { 98 | return null; 99 | } 100 | } 101 | 102 | renderMonths = () => { 103 | if (this.state.monthsDisplayed) { 104 | return ( 105 | 113 | ); 114 | } else { 115 | return null; 116 | } 117 | } 118 | 119 | renderYears = () => { 120 | if (this.state.yearsDisplayed) { 121 | return ( 122 | 129 | ); 130 | } else { 131 | return null; 132 | } 133 | } 134 | 135 | render() { 136 | return ( 137 |
138 | {this.renderDays()} 139 | 140 | {this.renderMonths()} 141 | 142 | {this.renderYears()} 143 |
144 | ); 145 | } 146 | } 147 | 148 | -------------------------------------------------------------------------------- /src/DateTimePicker.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import classnames from "classnames"; 3 | import DateTimePickerDate from "./DateTimePickerDate.js"; 4 | import DateTimePickerTime from "./DateTimePickerTime.js"; 5 | import Constants from "./Constants.js"; 6 | 7 | export default class DateTimePicker extends Component { 8 | static propTypes = { 9 | showDatePicker: PropTypes.bool, 10 | showTimePicker: PropTypes.bool, 11 | subtractMonth: PropTypes.func.isRequired, 12 | addMonth: PropTypes.func.isRequired, 13 | viewDate: PropTypes.object.isRequired, 14 | selectedDate: PropTypes.object.isRequired, 15 | showToday: PropTypes.bool, 16 | viewMode: PropTypes.oneOfType([ 17 | PropTypes.string, 18 | PropTypes.number 19 | ]), 20 | mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), 21 | daysOfWeekDisabled: PropTypes.array, 22 | setSelectedDate: PropTypes.func.isRequired, 23 | subtractYear: PropTypes.func.isRequired, 24 | addYear: PropTypes.func.isRequired, 25 | setViewMonth: PropTypes.func.isRequired, 26 | setViewYear: PropTypes.func.isRequired, 27 | subtractHour: PropTypes.func.isRequired, 28 | addHour: PropTypes.func.isRequired, 29 | subtractMinute: PropTypes.func.isRequired, 30 | addMinute: PropTypes.func.isRequired, 31 | addDecade: PropTypes.func.isRequired, 32 | subtractDecade: PropTypes.func.isRequired, 33 | togglePeriod: PropTypes.func.isRequired, 34 | minDate: PropTypes.object, 35 | maxDate: PropTypes.object, 36 | widgetClasses: PropTypes.object, 37 | widgetStyle: PropTypes.object, 38 | togglePicker: PropTypes.func, 39 | setSelectedHour: PropTypes.func, 40 | setSelectedMinute: PropTypes.func 41 | } 42 | 43 | renderDatePicker = () => { 44 | if (this.props.showDatePicker) { 45 | return ( 46 |
  • 47 | 65 |
    • 66 | ); 67 | } 68 | } 69 | 70 | renderTimePicker = () => { 71 | if (this.props.showTimePicker) { 72 | return ( 73 |
  • 74 | 86 |
    • 87 | ); 88 | } 89 | } 90 | 91 | renderSwitchButton = () => { 92 | return this.props.mode === Constants.MODE_DATETIME ? 93 | ( 94 |
  • 95 | 96 |
    • 97 | ) : 98 | null; 99 | } 100 | 101 | render() { 102 | return ( 103 |
    104 | 105 |
      106 | 107 | {this.renderDatePicker()} 108 | 109 | {this.renderSwitchButton()} 110 | 111 | {this.renderTimePicker()} 112 | 113 |
    114 | 115 |
    116 | 117 | ); 118 | } 119 | } 120 | 121 | -------------------------------------------------------------------------------- /examples/basic/basic.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import DateTimeField from "react-bootstrap-datetimepicker"; 4 | import moment from "moment"; 5 | import ParentComponent from "./ParentComponent"; 6 | 7 | class Basic extends Component { 8 | 9 | render() { 10 | return ( 11 |
    12 |
    13 |
    14 |

    React Bootstrap DateTimePicker

    15 | This project is a port of     https://github.com/Eonasdan/bootstrap-datetimepicker for React.js 16 |
    17 |
    18 |
    19 |
    20 | Controlled Component example 21 | 22 | 
     23 |                   {`class ParentComponent extends Component {
 24 |   constructor(props) {
 25 |     super(props);
 26 |     this.state = {
 27 |       date: "1990-06-05",
 28 |       format: "YYYY-MM-DD",
 29 |       inputFormat: "DD/MM/YYYY",
 30 |       mode: "date"
 31 |     };
 32 |   }
 33 | 
 34 |   handleChange = (newDate) => {
 35 |     console.log("newDate", newDate);
 36 |     return this.setState({date: newDate});
 37 |   }
 38 | 
 39 |   render() {
 40 |     const {date, format, mode, inputFormat} = this.state;
 41 |     return ;
 48 |   }
 49 | }`}
 50 |
    51 |
    52 |
    53 |
    54 |
    55 | Example with default Text 56 | 59 | 
     {''}
    60 |
    61 |
    62 |
    63 |
    64 | Default Basic Example 65 | 66 | 
     {''}
    67 |
    68 |
    69 |
    70 |
    71 | Example with default Text 72 | 75 | 
     {''}
    76 |
    77 |
    78 |
    79 |
    80 | ViewMode set to years view with custom inputFormat 81 | 85 | 
     {''}
    86 |
    87 |
    88 |
    89 |
    90 | daysOfWeekDisabled 91 | 94 | 
     {''}
    95 | 96 |
    97 |
    98 |
    99 |
    100 | minDate and maxDate 101 | 105 | 
     {''}
    106 | 107 |
    108 |
    109 |
    110 |
    111 | just time picker 112 | 115 | 
     {''}
    116 |
    117 |
    118 |
    119 |
    120 | just date picker 121 | 124 | 
     {''}
    125 |
    126 |
    127 |
    128 | ); 129 | } 130 | } 131 | 132 | ReactDOM.render(React.createFactory(Basic)(), document.getElementById("example")); 133 | -------------------------------------------------------------------------------- /examples/bootstrap-datetimepicker.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Datetimepicker for Bootstrap v3 3 | //! version : 3.1.3 4 | * https://github.com/Eonasdan/bootstrap-datetimepicker/ 5 | */.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:99999!important;border-radius:4px}.bootstrap-datetimepicker-widget.timepicker-sbs{width:600px}.bootstrap-datetimepicker-widget.bottom:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:7px}.bootstrap-datetimepicker-widget.bottom:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:8px}.bootstrap-datetimepicker-widget.top:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.top:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;position:absolute;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget .dow{width:14.2857%}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget a[data-action]{padding:6px 0}.bootstrap-datetimepicker-widget a[data-action]:active{box-shadow:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:54px;font-weight:700;font-size:1.2em;margin:0}.bootstrap-datetimepicker-widget button[data-action]{padding:6px}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget td{height:54px;line-height:54px;width:54px}.bootstrap-datetimepicker-widget td.cw{font-size:10px;height:20px;line-height:20px;color:#777}.bootstrap-datetimepicker-widget td.day{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#777}.bootstrap-datetimepicker-widget td.today{position:relative}.bootstrap-datetimepicker-widget td.today:before{content:'';display:inline-block;border-left:7px solid transparent;border-bottom:7px solid #428bca;border-top-color:rgba(0,0,0,.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:inline-block;width:54px;height:54px;line-height:54px;margin:2px 1.5px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{background-color:#428bca;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.bootstrap-datetimepicker-widget td span.old{color:#777}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget th{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget th.picker-switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:0 0;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-group.date .input-group-addon span{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px}.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody>tr>td{padding:0!important}@media screen and (max-width:767px){.bootstrap-datetimepicker-widget.timepicker-sbs{width:283px}} 6 | -------------------------------------------------------------------------------- /css/bootstrap-datetimepicker.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Datetimepicker for Bootstrap v3 3 | * https://github.com/Eonasdan/bootstrap-datetimepicker/ 4 | */ 5 | .bootstrap-datetimepicker-widget { 6 | top: 0; 7 | left: 0; 8 | width: 250px; 9 | padding: 4px; 10 | margin-top: 1px; 11 | z-index: 99999 !important; 12 | border-radius: 4px; 13 | } 14 | .bootstrap-datetimepicker-widget.timepicker-sbs { 15 | width: 600px; 16 | } 17 | .bootstrap-datetimepicker-widget.bottom:before { 18 | content: ''; 19 | display: inline-block; 20 | border-left: 7px solid transparent; 21 | border-right: 7px solid transparent; 22 | border-bottom: 7px solid #ccc; 23 | border-bottom-color: rgba(0, 0, 0, 0.2); 24 | position: absolute; 25 | top: -7px; 26 | left: 7px; 27 | } 28 | .bootstrap-datetimepicker-widget.bottom:after { 29 | content: ''; 30 | display: inline-block; 31 | border-left: 6px solid transparent; 32 | border-right: 6px solid transparent; 33 | border-bottom: 6px solid white; 34 | position: absolute; 35 | top: -6px; 36 | left: 8px; 37 | } 38 | .bootstrap-datetimepicker-widget.top:before { 39 | content: ''; 40 | display: inline-block; 41 | border-left: 7px solid transparent; 42 | border-right: 7px solid transparent; 43 | border-top: 7px solid #ccc; 44 | border-top-color: rgba(0, 0, 0, 0.2); 45 | position: absolute; 46 | bottom: -7px; 47 | left: 6px; 48 | } 49 | .bootstrap-datetimepicker-widget.top:after { 50 | content: ''; 51 | display: inline-block; 52 | border-left: 6px solid transparent; 53 | border-right: 6px solid transparent; 54 | border-top: 6px solid white; 55 | position: absolute; 56 | bottom: -6px; 57 | left: 7px; 58 | } 59 | .bootstrap-datetimepicker-widget .dow { 60 | width: 14.2857%; 61 | } 62 | .bootstrap-datetimepicker-widget.pull-right:before { 63 | left: auto; 64 | right: 6px; 65 | } 66 | .bootstrap-datetimepicker-widget.pull-right:after { 67 | left: auto; 68 | right: 7px; 69 | } 70 | .bootstrap-datetimepicker-widget > ul { 71 | list-style-type: none; 72 | margin: 0; 73 | } 74 | .bootstrap-datetimepicker-widget .timepicker-hour, 75 | .bootstrap-datetimepicker-widget .timepicker-minute, 76 | .bootstrap-datetimepicker-widget .timepicker-second { 77 | width: 100%; 78 | font-weight: bold; 79 | font-size: 1.2em; 80 | } 81 | .bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator { 82 | width: 4px; 83 | padding: 0; 84 | margin: 0; 85 | } 86 | .bootstrap-datetimepicker-widget .datepicker > div { 87 | display: none; 88 | } 89 | .bootstrap-datetimepicker-widget .picker-switch { 90 | text-align: center; 91 | } 92 | .bootstrap-datetimepicker-widget table { 93 | width: 100%; 94 | margin: 0; 95 | } 96 | .bootstrap-datetimepicker-widget td, 97 | .bootstrap-datetimepicker-widget th { 98 | text-align: center; 99 | width: 20px; 100 | height: 20px; 101 | border-radius: 4px; 102 | } 103 | .bootstrap-datetimepicker-widget td.day:hover, 104 | .bootstrap-datetimepicker-widget td.hour:hover, 105 | .bootstrap-datetimepicker-widget td.minute:hover, 106 | .bootstrap-datetimepicker-widget td.second:hover { 107 | background: #eeeeee; 108 | cursor: pointer; 109 | } 110 | .bootstrap-datetimepicker-widget td.old, 111 | .bootstrap-datetimepicker-widget td.new { 112 | color: #999999; 113 | } 114 | .bootstrap-datetimepicker-widget td.today { 115 | position: relative; 116 | } 117 | .bootstrap-datetimepicker-widget td.today:before { 118 | content: ''; 119 | display: inline-block; 120 | border-left: 7px solid transparent; 121 | border-bottom: 7px solid #428bca; 122 | border-top-color: rgba(0, 0, 0, 0.2); 123 | position: absolute; 124 | bottom: 4px; 125 | right: 4px; 126 | } 127 | .bootstrap-datetimepicker-widget td.active, 128 | .bootstrap-datetimepicker-widget td.active:hover { 129 | background-color: #428bca; 130 | color: #fff; 131 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 132 | } 133 | .bootstrap-datetimepicker-widget td.active.today:before { 134 | border-bottom-color: #fff; 135 | } 136 | .bootstrap-datetimepicker-widget td.disabled, 137 | .bootstrap-datetimepicker-widget td.disabled:hover { 138 | background: none; 139 | color: #999999; 140 | cursor: not-allowed; 141 | } 142 | .bootstrap-datetimepicker-widget td span { 143 | display: block; 144 | width: 47px; 145 | height: 54px; 146 | line-height: 54px; 147 | float: left; 148 | margin: 2px; 149 | cursor: pointer; 150 | border-radius: 4px; 151 | } 152 | .bootstrap-datetimepicker-widget td span:hover { 153 | background: #eeeeee; 154 | } 155 | .bootstrap-datetimepicker-widget td span.active { 156 | background-color: #428bca; 157 | color: #fff; 158 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 159 | } 160 | .bootstrap-datetimepicker-widget td span.old { 161 | color: #999999; 162 | } 163 | .bootstrap-datetimepicker-widget td span.disabled, 164 | .bootstrap-datetimepicker-widget td span.disabled:hover { 165 | background: none; 166 | color: #999999; 167 | cursor: not-allowed; 168 | } 169 | .bootstrap-datetimepicker-widget th.switch { 170 | width: 145px; 171 | } 172 | .bootstrap-datetimepicker-widget th.next, 173 | .bootstrap-datetimepicker-widget th.prev { 174 | font-size: 21px; 175 | } 176 | .bootstrap-datetimepicker-widget th.disabled, 177 | .bootstrap-datetimepicker-widget th.disabled:hover { 178 | background: none; 179 | color: #999999; 180 | cursor: not-allowed; 181 | } 182 | .bootstrap-datetimepicker-widget thead tr:first-child th { 183 | cursor: pointer; 184 | } 185 | .bootstrap-datetimepicker-widget thead tr:first-child th:hover { 186 | background: #eeeeee; 187 | } 188 | .input-group.date .input-group-addon span { 189 | display: block; 190 | cursor: pointer; 191 | width: 16px; 192 | height: 16px; 193 | } 194 | .bootstrap-datetimepicker-widget.left-oriented:before { 195 | left: auto; 196 | right: 6px; 197 | } 198 | .bootstrap-datetimepicker-widget.left-oriented:after { 199 | left: auto; 200 | right: 7px; 201 | } 202 | .bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td { 203 | padding: 0px !important; 204 | } -------------------------------------------------------------------------------- /src/DateTimeField.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from "react"; 2 | import moment from "moment"; 3 | import classnames from "classnames"; 4 | import DateTimePicker from "./DateTimePicker.js"; 5 | import Constants from "./Constants.js"; 6 | 7 | export default class DateTimeField extends Component { 8 | static defaultProps = { 9 | dateTime: moment().format("x"), 10 | format: "x", 11 | showToday: true, 12 | viewMode: "days", 13 | daysOfWeekDisabled: [], 14 | size: Constants.SIZE_MEDIUM, 15 | mode: Constants.MODE_DATETIME, 16 | zIndex: 999, 17 | onChange: (x) => { 18 | console.log(x); 19 | } 20 | } 21 | 22 | resolvePropsInputFormat = () => { 23 | if (this.props.inputFormat) { return this.props.inputFormat; } 24 | switch (this.props.mode) { 25 | case Constants.MODE_TIME: 26 | return "h:mm A"; 27 | case Constants.MODE_DATE: 28 | return "MM/DD/YY"; 29 | default: 30 | return "MM/DD/YY h:mm A"; 31 | } 32 | } 33 | 34 | static propTypes = { 35 | dateTime: PropTypes.oneOfType([ 36 | PropTypes.string, 37 | PropTypes.number 38 | ]), 39 | onChange: PropTypes.func, 40 | format: PropTypes.string, 41 | inputProps: PropTypes.object, 42 | inputFormat: PropTypes.string, 43 | defaultText: PropTypes.string, 44 | mode: PropTypes.oneOf([Constants.MODE_DATE, Constants.MODE_DATETIME, Constants.MODE_TIME]), 45 | minDate: PropTypes.object, 46 | maxDate: PropTypes.object, 47 | direction: PropTypes.string, 48 | showToday: PropTypes.bool, 49 | viewMode: PropTypes.string, 50 | zIndex: PropTypes.number, 51 | size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]), 52 | daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.number) 53 | } 54 | 55 | state = { 56 | showDatePicker: this.props.mode !== Constants.MODE_TIME, 57 | showTimePicker: this.props.mode === Constants.MODE_TIME, 58 | inputFormat: this.resolvePropsInputFormat(), 59 | buttonIcon: this.props.mode === Constants.MODE_TIME ? "glyphicon-time" : "glyphicon-calendar", 60 | widgetStyle: { 61 | display: "block", 62 | position: "absolute", 63 | left: -9999, 64 | zIndex: "9999 !important" 65 | }, 66 | viewDate: moment(this.props.dateTime, this.props.format, true).startOf("month"), 67 | selectedDate: moment(this.props.dateTime, this.props.format, true), 68 | inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : moment(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) 69 | } 70 | 71 | componentWillReceiveProps = (nextProps) => { 72 | let state = {}; 73 | if (nextProps.inputFormat !== this.props.inputFormat) { 74 | state.inputFormat = nextProps.inputFormat; 75 | state.inputValue = moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat); 76 | } 77 | 78 | if (nextProps.dateTime !== this.props.dateTime && moment(nextProps.dateTime, nextProps.format, true).isValid()) { 79 | state.viewDate = moment(nextProps.dateTime, nextProps.format, true).startOf("month"); 80 | state.selectedDate = moment(nextProps.dateTime, nextProps.format, true); 81 | state.inputValue = moment(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat ? nextProps.inputFormat : this.state.inputFormat); 82 | } 83 | return this.setState(state); 84 | } 85 | 86 | 87 | 88 | onChange = (event) => { 89 | const value = event.target == null ? event : event.target.value; 90 | if (moment(value, this.state.inputFormat, true).isValid()) { 91 | this.setState({ 92 | selectedDate: moment(value, this.state.inputFormat, true), 93 | viewDate: moment(value, this.state.inputFormat, true).startOf("month") 94 | }); 95 | } 96 | 97 | return this.setState({ 98 | inputValue: value 99 | }, function() { 100 | return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); 101 | }); 102 | 103 | } 104 | 105 | getValue = () => { 106 | return moment(this.state.inputValue, this.props.inputFormat, true).format(this.props.format); 107 | } 108 | 109 | setSelectedDate = (e) => { 110 | const { target } = e; 111 | if (target.className && !target.className.match(/disabled/g)) { 112 | let month; 113 | if (target.className.indexOf("new") >= 0) month = this.state.viewDate.month() + 1; 114 | else if (target.className.indexOf("old") >= 0) month = this.state.viewDate.month() - 1; 115 | else month = this.state.viewDate.month(); 116 | return this.setState({ 117 | selectedDate: this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(this.state.selectedDate.hours()).minute(this.state.selectedDate.minutes()) 118 | }, function() { 119 | this.closePicker(); 120 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 121 | return this.setState({ 122 | inputValue: this.state.selectedDate.format(this.state.inputFormat) 123 | }); 124 | }); 125 | } 126 | } 127 | 128 | setSelectedHour = (e) => { 129 | return this.setState({ 130 | selectedDate: this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(this.state.selectedDate.minutes()) 131 | }, function() { 132 | this.closePicker(); 133 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 134 | return this.setState({ 135 | inputValue: this.state.selectedDate.format(this.state.inputFormat) 136 | }); 137 | }); 138 | } 139 | 140 | setSelectedMinute = (e) => { 141 | return this.setState({ 142 | selectedDate: this.state.selectedDate.clone().hour(this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) 143 | }, function() { 144 | this.closePicker(); 145 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 146 | return this.setState({ 147 | inputValue: this.state.selectedDate.format(this.state.inputFormat) 148 | }); 149 | }); 150 | } 151 | 152 | setViewMonth = (month) => { 153 | return this.setState({ 154 | viewDate: this.state.viewDate.clone().month(month) 155 | }); 156 | } 157 | 158 | setViewYear = (year) => { 159 | return this.setState({ 160 | viewDate: this.state.viewDate.clone().year(year) 161 | }); 162 | } 163 | 164 | addMinute = () => { 165 | return this.setState({ 166 | selectedDate: this.state.selectedDate.clone().add(1, "minutes") 167 | }, function() { 168 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 169 | return this.setState({ 170 | inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) 171 | }); 172 | }); 173 | } 174 | 175 | addHour = () => { 176 | return this.setState({ 177 | selectedDate: this.state.selectedDate.clone().add(1, "hours") 178 | }, function() { 179 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 180 | return this.setState({ 181 | inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) 182 | }); 183 | }); 184 | } 185 | 186 | addMonth = () => { 187 | return this.setState({ 188 | viewDate: this.state.viewDate.add(1, "months") 189 | }); 190 | } 191 | 192 | addYear = () => { 193 | return this.setState({ 194 | viewDate: this.state.viewDate.add(1, "years") 195 | }); 196 | } 197 | 198 | addDecade = () => { 199 | return this.setState({ 200 | viewDate: this.state.viewDate.add(10, "years") 201 | }); 202 | } 203 | 204 | subtractMinute = () => { 205 | return this.setState({ 206 | selectedDate: this.state.selectedDate.clone().subtract(1, "minutes") 207 | }, () => { 208 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 209 | return this.setState({ 210 | inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) 211 | }); 212 | }); 213 | } 214 | 215 | subtractHour = () => { 216 | return this.setState({ 217 | selectedDate: this.state.selectedDate.clone().subtract(1, "hours") 218 | }, () => { 219 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 220 | return this.setState({ 221 | inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) 222 | }); 223 | }); 224 | } 225 | 226 | subtractMonth = () => { 227 | return this.setState({ 228 | viewDate: this.state.viewDate.subtract(1, "months") 229 | }); 230 | } 231 | 232 | subtractYear = () => { 233 | return this.setState({ 234 | viewDate: this.state.viewDate.subtract(1, "years") 235 | }); 236 | } 237 | 238 | subtractDecade = () => { 239 | return this.setState({ 240 | viewDate: this.state.viewDate.subtract(10, "years") 241 | }); 242 | } 243 | 244 | togglePeriod = () => { 245 | if (this.state.selectedDate.hour() > 12) { 246 | return this.onChange(this.state.selectedDate.clone().subtract(12, "hours").format(this.state.inputFormat)); 247 | } else { 248 | return this.onChange(this.state.selectedDate.clone().add(12, "hours").format(this.state.inputFormat)); 249 | } 250 | } 251 | 252 | togglePicker = () => { 253 | return this.setState({ 254 | showDatePicker: !this.state.showDatePicker, 255 | showTimePicker: !this.state.showTimePicker 256 | }); 257 | } 258 | 259 | onClick = () => { 260 | let classes, gBCR, offset, placePosition, scrollTop, styles; 261 | if (this.state.showPicker) { 262 | return this.closePicker(); 263 | } else { 264 | this.setState({ 265 | showPicker: true 266 | }); 267 | gBCR = this.refs.dtpbutton.getBoundingClientRect(); 268 | classes = { 269 | "bootstrap-datetimepicker-widget": true, 270 | "dropdown-menu": true 271 | }; 272 | offset = { 273 | top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, 274 | left: gBCR.left + window.pageXOffset - document.documentElement.clientLeft 275 | }; 276 | offset.top = offset.top + this.refs.datetimepicker.offsetHeight; 277 | scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 278 | placePosition = this.props.direction === "up" ? "top" : this.props.direction === "bottom" ? "bottom" : this.props.direction === "auto" ? offset.top + this.refs.widget.offsetHeight > window.offsetHeight + scrollTop && this.refs.widget.offsetHeight + this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; 279 | if (placePosition === "top") { 280 | offset.top = -this.refs.widget.offsetHeight - this.clientHeight - 2; 281 | classes.top = true; 282 | classes.bottom = false; 283 | classes["pull-right"] = true; 284 | } else { 285 | offset.top = 40; 286 | classes.top = false; 287 | classes.bottom = true; 288 | classes["pull-right"] = true; 289 | } 290 | styles = { 291 | display: "block", 292 | position: "absolute", 293 | top: offset.top, 294 | left: "auto", 295 | right: 40 296 | }; 297 | return this.setState({ 298 | widgetStyle: styles, 299 | widgetClasses: classes 300 | }); 301 | } 302 | } 303 | 304 | closePicker = () => { 305 | let style = {...this.state.widgetStyle}; 306 | style.left = -9999; 307 | style.display = "none"; 308 | return this.setState({ 309 | showPicker: false, 310 | widgetStyle: style 311 | }); 312 | } 313 | 314 | size = () => { 315 | switch (this.props.size) { 316 | case Constants.SIZE_SMALL: 317 | return "form-group-sm"; 318 | case Constants.SIZE_LARGE: 319 | return "form-group-lg"; 320 | } 321 | 322 | return ""; 323 | } 324 | 325 | renderOverlay = () => { 326 | const styles = { 327 | position: "fixed", 328 | top: 0, 329 | bottom: 0, 330 | left: 0, 331 | right: 0, 332 | zIndex: `${this.props.zIndex}` 333 | }; 334 | if (this.state.showPicker) { 335 | return (
    ); 336 | } else { 337 | return ; 338 | } 339 | } 340 | 341 | render() { 342 | return ( 343 |
    344 | {this.renderOverlay()} 345 | 377 |
    378 | 379 | 380 | 381 | 382 |
    383 |
    384 | ); 385 | } 386 | } 387 | 388 | -------------------------------------------------------------------------------- /dist/react-bootstrap-datetimepicker.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("moment")):"function"==typeof define&&define.amd?define(["React","moment"],t):"object"==typeof exports?exports.ReactBootstrapDatetimepicker=t(require("React"),require("moment")):e.ReactBootstrapDatetimepicker=t(e.React,e.moment)}(this,function(e,t){return function(e){function t(s){if(a[s])return a[s].exports;var r=a[s]={exports:{},id:s,loaded:!1};return e[s].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){e.exports=a(1)},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(31)["default"],u=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var l=a(38),c=u(l),d=a(39),p=u(d),f=a(40),m=u(f),h=a(41),y=u(h),D=a(51),v=u(D),E=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.resolvePropsInputFormat=function(){if(e.props.inputFormat)return e.props.inputFormat;switch(e.props.mode){case v["default"].MODE_TIME:return"h:mm A";case v["default"].MODE_DATE:return"MM/DD/YY";default:return"MM/DD/YY h:mm A"}},this.state={showDatePicker:this.props.mode!==v["default"].MODE_TIME,showTimePicker:this.props.mode===v["default"].MODE_TIME,inputFormat:this.resolvePropsInputFormat(),buttonIcon:this.props.mode===v["default"].MODE_TIME?"glyphicon-time":"glyphicon-calendar",widgetStyle:{display:"block",position:"absolute",left:-9999,zIndex:"9999 !important"},viewDate:(0,p["default"])(this.props.dateTime,this.props.format,!0).startOf("month"),selectedDate:(0,p["default"])(this.props.dateTime,this.props.format,!0),inputValue:"undefined"!=typeof this.props.defaultText?this.props.defaultText:(0,p["default"])(this.props.dateTime,this.props.format,!0).format(this.resolvePropsInputFormat())},this.componentWillReceiveProps=function(t){var a={};return t.inputFormat!==e.props.inputFormat&&(a.inputFormat=t.inputFormat,a.inputValue=(0,p["default"])(t.dateTime,t.format,!0).format(t.inputFormat)),t.dateTime!==e.props.dateTime&&(0,p["default"])(t.dateTime,t.format,!0).isValid()&&(a.viewDate=(0,p["default"])(t.dateTime,t.format,!0).startOf("month"),a.selectedDate=(0,p["default"])(t.dateTime,t.format,!0),a.inputValue=(0,p["default"])(t.dateTime,t.format,!0).format(t.inputFormat?t.inputFormat:e.state.inputFormat)),e.setState(a)},this.onChange=function(t){var a=null==t.target?t:t.target.value;return(0,p["default"])(a,e.state.inputFormat,!0).isValid()&&e.setState({selectedDate:(0,p["default"])(a,e.state.inputFormat,!0),viewDate:(0,p["default"])(a,e.state.inputFormat,!0).startOf("month")}),e.setState({inputValue:a},function(){return this.props.onChange((0,p["default"])(this.state.inputValue,this.state.inputFormat,!0).format(this.props.format),a)})},this.getValue=function(){return(0,p["default"])(e.state.inputValue,e.props.inputFormat,!0).format(e.props.format)},this.setSelectedDate=function(t){var a=t.target;if(a.className&&!a.className.match(/disabled/g)){var s=void 0;return s=a.className.indexOf("new")>=0?e.state.viewDate.month()+1:a.className.indexOf("old")>=0?e.state.viewDate.month()-1:e.state.viewDate.month(),e.setState({selectedDate:e.state.viewDate.clone().month(s).date(parseInt(t.target.innerHTML)).hour(e.state.selectedDate.hours()).minute(e.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})}},this.setSelectedHour=function(t){return e.setState({selectedDate:e.state.selectedDate.clone().hour(parseInt(t.target.innerHTML)).minute(e.state.selectedDate.minutes())},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},this.setSelectedMinute=function(t){return e.setState({selectedDate:e.state.selectedDate.clone().hour(e.state.selectedDate.hours()).minute(parseInt(t.target.innerHTML))},function(){return this.closePicker(),this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.state.inputFormat)})})},this.setViewMonth=function(t){return e.setState({viewDate:e.state.viewDate.clone().month(t)})},this.setViewYear=function(t){return e.setState({viewDate:e.state.viewDate.clone().year(t)})},this.addMinute=function(){return e.setState({selectedDate:e.state.selectedDate.clone().add(1,"minutes")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.resolvePropsInputFormat())})})},this.addHour=function(){return e.setState({selectedDate:e.state.selectedDate.clone().add(1,"hours")},function(){return this.props.onChange(this.state.selectedDate.format(this.props.format)),this.setState({inputValue:this.state.selectedDate.format(this.resolvePropsInputFormat())})})},this.addMonth=function(){return e.setState({viewDate:e.state.viewDate.add(1,"months")})},this.addYear=function(){return e.setState({viewDate:e.state.viewDate.add(1,"years")})},this.addDecade=function(){return e.setState({viewDate:e.state.viewDate.add(10,"years")})},this.subtractMinute=function(){return e.setState({selectedDate:e.state.selectedDate.clone().subtract(1,"minutes")},function(){return e.props.onChange(e.state.selectedDate.format(e.props.format)),e.setState({inputValue:e.state.selectedDate.format(e.resolvePropsInputFormat())})})},this.subtractHour=function(){return e.setState({selectedDate:e.state.selectedDate.clone().subtract(1,"hours")},function(){return e.props.onChange(e.state.selectedDate.format(e.props.format)),e.setState({inputValue:e.state.selectedDate.format(e.resolvePropsInputFormat())})})},this.subtractMonth=function(){return e.setState({viewDate:e.state.viewDate.subtract(1,"months")})},this.subtractYear=function(){return e.setState({viewDate:e.state.viewDate.subtract(1,"years")})},this.subtractDecade=function(){return e.setState({viewDate:e.state.viewDate.subtract(10,"years")})},this.togglePeriod=function(){return e.state.selectedDate.hour()>12?e.onChange(e.state.selectedDate.clone().subtract(12,"hours").format(e.state.inputFormat)):e.onChange(e.state.selectedDate.clone().add(12,"hours").format(e.state.inputFormat))},this.togglePicker=function(){return e.setState({showDatePicker:!e.state.showDatePicker,showTimePicker:!e.state.showTimePicker})},this.onClick=function(){var t=void 0,a=void 0,s=void 0,r=void 0,o=void 0,n=void 0;return e.state.showPicker?e.closePicker():(e.setState({showPicker:!0}),a=e.refs.dtpbutton.getBoundingClientRect(),t={"bootstrap-datetimepicker-widget":!0,"dropdown-menu":!0},s={top:a.top+window.pageYOffset-document.documentElement.clientTop,left:a.left+window.pageXOffset-document.documentElement.clientLeft},s.top=s.top+e.refs.datetimepicker.offsetHeight,o=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,r="up"===e.props.direction?"top":"bottom"===e.props.direction?"bottom":"auto"===e.props.direction?s.top+e.refs.widget.offsetHeight>window.offsetHeight+o&&e.refs.widget.offsetHeight+e.refs.datetimepicker.offsetHeight>s.top?"top":"bottom":void 0,"top"===r?(s.top=-e.refs.widget.offsetHeight-e.clientHeight-2,t.top=!0,t.bottom=!1,t["pull-right"]=!0):(s.top=40,t.top=!1,t.bottom=!0,t["pull-right"]=!0),n={display:"block",position:"absolute",top:s.top,left:"auto",right:40},e.setState({widgetStyle:n,widgetClasses:t}))},this.closePicker=function(){var t=i({},e.state.widgetStyle);return t.left=-9999,t.display="none",e.setState({showPicker:!1,widgetStyle:t})},this.size=function(){switch(e.props.size){case v["default"].SIZE_SMALL:return"form-group-sm";case v["default"].SIZE_LARGE:return"form-group-lg"}return""},this.renderOverlay=function(){var t={position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"999"};return e.state.showPicker?c["default"].createElement("div",{onClick:e.closePicker,style:t}):c["default"].createElement("span",null)}}return r(t,e),o(t,[{key:"render",value:function(){return c["default"].createElement("div",null,this.renderOverlay(),c["default"].createElement(y["default"],{addDecade:this.addDecade,addHour:this.addHour,addMinute:this.addMinute,addMonth:this.addMonth,addYear:this.addYear,daysOfWeekDisabled:this.props.daysOfWeekDisabled,maxDate:this.props.maxDate,minDate:this.props.minDate,mode:this.props.mode,ref:"widget",selectedDate:this.state.selectedDate,setSelectedDate:this.setSelectedDate,setSelectedHour:this.setSelectedHour,setSelectedMinute:this.setSelectedMinute,setViewMonth:this.setViewMonth,setViewYear:this.setViewYear,showDatePicker:this.state.showDatePicker,showTimePicker:this.state.showTimePicker,showToday:this.props.showToday,subtractDecade:this.subtractDecade,subtractHour:this.subtractHour,subtractMinute:this.subtractMinute,subtractMonth:this.subtractMonth,subtractYear:this.subtractYear,togglePeriod:this.togglePeriod,togglePicker:this.togglePicker,viewDate:this.state.viewDate,viewMode:this.props.viewMode,widgetClasses:this.state.widgetClasses,widgetStyle:this.state.widgetStyle}),c["default"].createElement("div",{className:"input-group date "+this.size(),ref:"datetimepicker"},c["default"].createElement("input",i({className:"form-control",onChange:this.onChange,type:"text",value:this.state.inputValue},this.props.inputProps)),c["default"].createElement("span",{className:"input-group-addon",onBlur:this.onBlur,onClick:this.onClick,ref:"dtpbutton"},c["default"].createElement("span",{className:(0,m["default"])("glyphicon",this.state.buttonIcon)}))))}}],[{key:"defaultProps",value:{dateTime:(0,p["default"])().format("x"),format:"x",showToday:!0,viewMode:"days",daysOfWeekDisabled:[],size:v["default"].SIZE_MEDIUM,mode:v["default"].MODE_DATETIME,onChange:function(e){console.log(e)}},enumerable:!0},{key:"propTypes",value:{dateTime:l.PropTypes.oneOfType([l.PropTypes.string,l.PropTypes.number]),onChange:l.PropTypes.func,format:l.PropTypes.string,inputProps:l.PropTypes.object,inputFormat:l.PropTypes.string,defaultText:l.PropTypes.string,mode:l.PropTypes.oneOf([v["default"].MODE_DATE,v["default"].MODE_DATETIME,v["default"].MODE_TIME]),minDate:l.PropTypes.object,maxDate:l.PropTypes.object,direction:l.PropTypes.string,showToday:l.PropTypes.bool,viewMode:l.PropTypes.string,size:l.PropTypes.oneOf([v["default"].SIZE_SMALL,v["default"].SIZE_MEDIUM,v["default"].SIZE_LARGE]),daysOfWeekDisabled:l.PropTypes.arrayOf(l.PropTypes.number)},enumerable:!0}]),t}(l.Component);t["default"]=E,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(3)["default"];t["default"]=function(e,t,a){for(var r=!0;r;){var o=e,n=t,i=a;r=!1,null===o&&(o=Function.prototype);var u=s(o,n);if(void 0!==u){if("value"in u)return u.value;var l=u.get;return void 0===l?void 0:l.call(i)}var c=Object.getPrototypeOf(o);if(null===c)return void 0;e=c,t=n,a=i,r=!0,u=c=void 0}},t.__esModule=!0},function(e,t,a){e.exports={"default":a(4),__esModule:!0}},function(e,t,a){var s=a(5);a(6),e.exports=function(e,t){return s.getDesc(e,t)}},function(e,t){var a=Object;e.exports={create:a.create,getProto:a.getPrototypeOf,isEnum:{}.propertyIsEnumerable,getDesc:a.getOwnPropertyDescriptor,setDesc:a.defineProperty,setDescs:a.defineProperties,getKeys:a.keys,getNames:a.getOwnPropertyNames,getSymbols:a.getOwnPropertySymbols,each:[].forEach}},function(e,t,a){var s=a(7);a(11)("getOwnPropertyDescriptor",function(e){return function(t,a){return e(s(t),a)}})},function(e,t,a){var s=a(8),r=a(10);e.exports=function(e){return s(r(e))}},function(e,t,a){var s=a(9);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==s(e)?e.split(""):Object(e)}},function(e,t){var a={}.toString;e.exports=function(e){return a.call(e).slice(8,-1)}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,a){var s=a(12),r=a(14),o=a(17);e.exports=function(e,t){var a=(r.Object||{})[e]||Object[e],n={};n[e]=t(a),s(s.S+s.F*o(function(){a(1)}),"Object",n)}},function(e,t,a){var s=a(13),r=a(14),o=a(15),n="prototype",i=function(e,t,a){var u,l,c,d=e&i.F,p=e&i.G,f=e&i.S,m=e&i.P,h=e&i.B,y=e&i.W,D=p?r:r[t]||(r[t]={}),v=p?s:f?s[t]:(s[t]||{})[n];p&&(a=t);for(u in a)l=!d&&v&&u in v,l&&u in D||(c=l?v[u]:a[u],D[u]=p&&"function"!=typeof v[u]?a[u]:h&&l?o(c,s):y&&v[u]==c?function(e){var t=function(t){return this instanceof e?new e(t):e(t)};return t[n]=e[n],t}(c):m&&"function"==typeof c?o(Function.call,c):c,m&&((D[n]||(D[n]={}))[u]=c))};i.F=1,i.G=2,i.S=4,i.P=8,i.B=16,i.W=32,e.exports=i},function(e,t){var a=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=a)},function(e,t){var a=e.exports={version:"1.2.6"};"number"==typeof __e&&(__e=a)},function(e,t,a){var s=a(16);e.exports=function(e,t,a){if(s(e),void 0===t)return e;switch(a){case 1:return function(a){return e.call(t,a)};case 2:return function(a,s){return e.call(t,a,s)};case 3:return function(a,s,r){return e.call(t,a,s,r)}}return function(){return e.apply(t,arguments)}}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},function(e,t,a){"use strict";var s=a(19)["default"],r=a(21)["default"];t["default"]=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=s(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(r?r(e,t):e.__proto__=t)},t.__esModule=!0},function(e,t,a){e.exports={"default":a(20),__esModule:!0}},function(e,t,a){var s=a(5);e.exports=function(e,t){return s.create(e,t)}},function(e,t,a){e.exports={"default":a(22),__esModule:!0}},function(e,t,a){a(23),e.exports=a(14).Object.setPrototypeOf},function(e,t,a){var s=a(12);s(s.S,"Object",{setPrototypeOf:a(24).set})},function(e,t,a){var s=a(5).getDesc,r=a(25),o=a(26),n=function(e,t){if(o(e),!r(t)&&null!==t)throw TypeError(t+": can't set as prototype!")};e.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(e,t,r){try{r=a(15)(Function.call,s(Object.prototype,"__proto__").set,2),r(e,[]),t=!(e instanceof Array)}catch(o){t=!0}return function(e,a){return n(e,a),t?e.__proto__=a:r(e,a),e}}({},!1):void 0),check:n}},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,a){var s=a(25);e.exports=function(e){if(!s(e))throw TypeError(e+" is not an object!");return e}},function(e,t,a){"use strict";var s=a(28)["default"];t["default"]=function(){function e(e,t){for(var a=0;au;)for(var p,f=o(n[u++]),m=c?l(f).concat(c(f)):l(f),h=m.length,y=0;h>y;)d.call(f,p=m[y++])&&(a[p]=f[p]);return a}:Object.assign},function(e,t,a){var s=a(10);e.exports=function(e){return Object(s(e))}},function(e,t){"use strict";t["default"]=function(e){return e&&e.__esModule?e:{"default":e}},t.__esModule=!0},function(t,a){t.exports=e},function(e,a){e.exports=t},function(e,t,a){var s;/*! 2 | Copyright (c) 2015 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | !function(){"use strict";function r(){for(var e="",t=0;tm||i.year()===m&&i.month()>o)&&(a["new"]=!0),i.isSame((0,d["default"])({y:e.props.selectedDate.year(),M:e.props.selectedDate.month(),d:e.props.selectedDate.date()}))&&(a.active=!0),e.props.showToday&&i.isSame((0,d["default"])(),"day")&&(a.today=!0),(u&&i.isBefore(u)||c&&i.isAfter(c))&&(a.disabled=!0),e.props.daysOfWeekDisabled.length>0&&(a.disabled=-1!==e.props.daysOfWeekDisabled.indexOf(i.day())),t.push(l["default"].createElement("td",{className:(0,f["default"])(a),key:i.month()+"-"+i.date(),onClick:e.props.setSelectedDate},i.date())),i.weekday()===(0,d["default"])().endOf("week").weekday()&&(p=l["default"].createElement("tr",{key:i.month()+"-"+i.date()},t),r.push(p),t=[]),i.add(1,"d");return r}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"datepicker-days",style:{display:"block"}},l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("thead",null,l["default"].createElement("tr",null,l["default"].createElement("th",{className:"prev",onClick:this.props.subtractMonth},l["default"].createElement("span",{className:"glyphicon glyphicon-chevron-left"})),l["default"].createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showMonths},d["default"].months()[this.props.viewDate.month()]," ",this.props.viewDate.year()),l["default"].createElement("th",{className:"next",onClick:this.props.addMonth},l["default"].createElement("span",{className:"glyphicon glyphicon-chevron-right"}))),l["default"].createElement("tr",null,l["default"].createElement("th",{className:"dow"},"Su"),l["default"].createElement("th",{className:"dow"},"Mo"),l["default"].createElement("th",{className:"dow"},"Tu"),l["default"].createElement("th",{className:"dow"},"We"),l["default"].createElement("th",{className:"dow"},"Th"),l["default"].createElement("th",{className:"dow"},"Fr"),l["default"].createElement("th",{className:"dow"},"Sa"))),l["default"].createElement("tbody",null,this.renderDays())))}}],[{key:"propTypes",value:{subtractMonth:u.PropTypes.func.isRequired,addMonth:u.PropTypes.func.isRequired,viewDate:u.PropTypes.object.isRequired,selectedDate:u.PropTypes.object.isRequired,showToday:u.PropTypes.bool,daysOfWeekDisabled:u.PropTypes.array,setSelectedDate:u.PropTypes.func.isRequired,showMonths:u.PropTypes.func.isRequired,minDate:u.PropTypes.object,maxDate:u.PropTypes.object},enumerable:!0},{key:"defaultProps",value:{showToday:!0},enumerable:!0}]),t}(u.Component);t["default"]=m,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(40),d=i(c),p=a(39),f=i(p),m=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderMonths=function(){var t,a,s,r,o;for(s=e.props.selectedDate.month(),o=f["default"].monthsShort(),a=0,r=[];12>a;)t={month:!0,active:a===s&&e.props.viewDate.year()===e.props.selectedDate.year()},r.push(l["default"].createElement("span",{className:(0,d["default"])(t),key:a,onClick:e.props.setViewMonth},o[a])),a++;return r}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"datepicker-months",style:{display:"block"}},l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("thead",null,l["default"].createElement("tr",null,l["default"].createElement("th",{className:"prev",onClick:this.props.subtractYear},"‹"),l["default"].createElement("th",{className:"switch",colSpan:"5",onClick:this.props.showYears},this.props.viewDate.year()),l["default"].createElement("th",{className:"next",onClick:this.props.addYear},"›"))),l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{colSpan:"7"},this.renderMonths())))))}}],[{key:"propTypes",value:{subtractYear:u.PropTypes.func.isRequired,addYear:u.PropTypes.func.isRequired,viewDate:u.PropTypes.object.isRequired,selectedDate:u.PropTypes.object.isRequired,showYears:u.PropTypes.func.isRequired,setViewMonth:u.PropTypes.func.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=m,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(40),d=i(c),p=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderYears=function(){var t,a,s,r;for(r=[],s=10*parseInt(e.props.viewDate.year()/10,10),s--,a=-1;11>a;)t={year:!0,old:-1===a|10===a,active:e.props.selectedDate.year()===s},r.push(l["default"].createElement("span",{className:(0,d["default"])(t),key:s,onClick:e.props.setViewYear},s)),s++,a++;return r}}return r(t,e),o(t,[{key:"render",value:function(){var e;return e=10*parseInt(this.props.viewDate.year()/10,10),l["default"].createElement("div",{className:"datepicker-years",style:{display:"block"}},l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("thead",null,l["default"].createElement("tr",null,l["default"].createElement("th",{className:"prev",onClick:this.props.subtractDecade},"‹"),l["default"].createElement("th",{className:"switch",colSpan:"5"},e," - ",e+9),l["default"].createElement("th",{className:"next",onClick:this.props.addDecade},"›"))),l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{colSpan:"7"},this.renderYears())))))}}],[{key:"propTypes",value:{subtractDecade:u.PropTypes.func.isRequired,addDecade:u.PropTypes.func.isRequired,viewDate:u.PropTypes.object.isRequired,selectedDate:u.PropTypes.object.isRequired,setViewYear:u.PropTypes.func.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=p,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(31)["default"],u=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var l=a(38),c=u(l),d=a(50),p=u(d),f=a(52),m=u(f),h=a(51),y=u(h),D=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state={minutesDisplayed:!1,hoursDisplayed:!1},this.goBack=function(){return e.setState({minutesDisplayed:!1,hoursDisplayed:!1})},this.showMinutes=function(){return e.setState({minutesDisplayed:!0})},this.showHours=function(){return e.setState({hoursDisplayed:!0})},this.renderMinutes=function(){return e.state.minutesDisplayed?c["default"].createElement(p["default"],i({},e.props,{onSwitch:e.goBack})):null},this.renderHours=function(){return e.state.hoursDisplayed?c["default"].createElement(m["default"],i({},e.props,{onSwitch:e.goBack})):null},this.renderPicker=function(){return e.state.minutesDisplayed||e.state.hoursDisplayed?"":c["default"].createElement("div",{className:"timepicker-picker"},c["default"].createElement("table",{className:"table-condensed"},c["default"].createElement("tbody",null,c["default"].createElement("tr",null,c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.addHour},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-up"}))),c["default"].createElement("td",{className:"separator"}),c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.addMinute},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-up"}))),c["default"].createElement("td",{className:"separator"})),c["default"].createElement("tr",null,c["default"].createElement("td",null,c["default"].createElement("span",{className:"timepicker-hour",onClick:e.showHours},e.props.selectedDate.format("h"))),c["default"].createElement("td",{className:"separator"},":"),c["default"].createElement("td",null,c["default"].createElement("span",{className:"timepicker-minute",onClick:e.showMinutes},e.props.selectedDate.format("mm"))),c["default"].createElement("td",{className:"separator"}),c["default"].createElement("td",null,c["default"].createElement("button",{className:"btn btn-primary",onClick:e.props.togglePeriod,type:"button"},e.props.selectedDate.format("A")))),c["default"].createElement("tr",null,c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.subtractHour},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-down"}))),c["default"].createElement("td",{className:"separator"}),c["default"].createElement("td",null,c["default"].createElement("a",{className:"btn",onClick:e.props.subtractMinute},c["default"].createElement("span",{className:"glyphicon glyphicon-chevron-down"}))),c["default"].createElement("td",{className:"separator"})))))}}return r(t,e),o(t,[{key:"render",value:function(){return c["default"].createElement("div",{className:"timepicker"},this.renderPicker(),this.renderHours(),this.renderMinutes())}}],[{key:"propTypes",value:{setSelectedHour:l.PropTypes.func.isRequired,setSelectedMinute:l.PropTypes.func.isRequired,subtractHour:l.PropTypes.func.isRequired,addHour:l.PropTypes.func.isRequired,subtractMinute:l.PropTypes.func.isRequired,addMinute:l.PropTypes.func.isRequired,viewDate:l.PropTypes.object.isRequired,selectedDate:l.PropTypes.object.isRequired,togglePeriod:l.PropTypes.func.isRequired,mode:l.PropTypes.oneOf([y["default"].MODE_DATE,y["default"].MODE_DATETIME,y["default"].MODE_TIME])},enumerable:!0}]),t}(l.Component);t["default"]=D,e.exports=D,e.exports=t["default"]},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(51),d=i(c),p=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderSwitchButton=function(){return e.props.mode===d["default"].MODE_TIME?l["default"].createElement("ul",{className:"list-unstyled"},l["default"].createElement("li",null,l["default"].createElement("span",{className:"btn picker-switch",onClick:e.props.onSwitch,style:{width:"100%"}},l["default"].createElement("span",{className:"glyphicon glyphicon-time"})))):null}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"timepicker-minutes","data-action":"selectMinute",style:{display:"block"}},this.renderSwitchButton(),l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"00"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"05"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"10"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"15")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"20"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"25"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"30"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"35")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"40"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"45"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"50"),l["default"].createElement("td",{className:"minute",onClick:this.props.setSelectedMinute},"55")))))}}],[{key:"propTypes",value:{setSelectedMinute:u.PropTypes.func.isRequired,onSwitch:u.PropTypes.func.isRequired,mode:u.PropTypes.string.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=p,e.exports=t["default"]},function(e,t){"use strict";e.exports={MODE_DATE:"date",MODE_DATETIME:"datetime",MODE_TIME:"time",SIZE_SMALL:"sm",SIZE_MEDIUM:"md",SIZE_LARGE:"lg"}},function(e,t,a){"use strict";var s=a(2)["default"],r=a(18)["default"],o=a(27)["default"],n=a(30)["default"],i=a(37)["default"];Object.defineProperty(t,"__esModule",{value:!0});var u=a(38),l=i(u),c=a(51),d=i(c),p=function(e){function t(){var e=this;n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.renderSwitchButton=function(){return e.props.mode===d["default"].MODE_TIME?l["default"].createElement("ul",{className:"list-unstyled"},l["default"].createElement("li",null,l["default"].createElement("span",{className:"btn picker-switch",onClick:e.props.onSwitch,style:{width:"100%"}},l["default"].createElement("span",{className:"glyphicon glyphicon-time"})))):null}}return r(t,e),o(t,[{key:"render",value:function(){return l["default"].createElement("div",{className:"timepicker-hours","data-action":"selectHour",style:{display:"block"}},this.renderSwitchButton(),l["default"].createElement("table",{className:"table-condensed"},l["default"].createElement("tbody",null,l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"01"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"02"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"03"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"04")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"05"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"06"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"07"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"08")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"09"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"10"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"11"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"12")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"13"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"14"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"15"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"16")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"17"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"18"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"19"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"20")),l["default"].createElement("tr",null,l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"21"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"22"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"23"),l["default"].createElement("td",{className:"hour",onClick:this.props.setSelectedHour},"24")))))}}],[{key:"propTypes",value:{setSelectedHour:u.PropTypes.func.isRequired,onSwitch:u.PropTypes.func.isRequired,mode:u.PropTypes.string.isRequired},enumerable:!0}]),t}(u.Component);t["default"]=p,e.exports=t["default"]}])}); -------------------------------------------------------------------------------- /dist/react-bootstrap-datetimepicker.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("React"), require("moment")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["React", "moment"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactBootstrapDatetimepicker"] = factory(require("React"), require("moment")); 8 | else 9 | root["ReactBootstrapDatetimepicker"] = factory(root["React"], root["moment"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_38__, __WEBPACK_EXTERNAL_MODULE_39__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | 39 | 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | module.exports = __webpack_require__(1); 58 | 59 | 60 | /***/ }, 61 | /* 1 */ 62 | /***/ function(module, exports, __webpack_require__) { 63 | 64 | "use strict"; 65 | 66 | var _get = __webpack_require__(2)["default"]; 67 | 68 | var _inherits = __webpack_require__(18)["default"]; 69 | 70 | var _createClass = __webpack_require__(27)["default"]; 71 | 72 | var _classCallCheck = __webpack_require__(30)["default"]; 73 | 74 | var _extends = __webpack_require__(31)["default"]; 75 | 76 | var _interopRequireDefault = __webpack_require__(37)["default"]; 77 | 78 | Object.defineProperty(exports, "__esModule", { 79 | value: true 80 | }); 81 | 82 | var _react = __webpack_require__(38); 83 | 84 | var _react2 = _interopRequireDefault(_react); 85 | 86 | var _moment = __webpack_require__(39); 87 | 88 | var _moment2 = _interopRequireDefault(_moment); 89 | 90 | var _classnames = __webpack_require__(40); 91 | 92 | var _classnames2 = _interopRequireDefault(_classnames); 93 | 94 | var _DateTimePickerJs = __webpack_require__(41); 95 | 96 | var _DateTimePickerJs2 = _interopRequireDefault(_DateTimePickerJs); 97 | 98 | var _ConstantsJs = __webpack_require__(51); 99 | 100 | var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); 101 | 102 | var DateTimeField = (function (_Component) { 103 | _inherits(DateTimeField, _Component); 104 | 105 | function DateTimeField() { 106 | var _this = this; 107 | 108 | _classCallCheck(this, DateTimeField); 109 | 110 | _get(Object.getPrototypeOf(DateTimeField.prototype), "constructor", this).apply(this, arguments); 111 | 112 | this.resolvePropsInputFormat = function () { 113 | if (_this.props.inputFormat) { 114 | return _this.props.inputFormat; 115 | } 116 | switch (_this.props.mode) { 117 | case _ConstantsJs2["default"].MODE_TIME: 118 | return "h:mm A"; 119 | case _ConstantsJs2["default"].MODE_DATE: 120 | return "MM/DD/YY"; 121 | default: 122 | return "MM/DD/YY h:mm A"; 123 | } 124 | }; 125 | 126 | this.state = { 127 | showDatePicker: this.props.mode !== _ConstantsJs2["default"].MODE_TIME, 128 | showTimePicker: this.props.mode === _ConstantsJs2["default"].MODE_TIME, 129 | inputFormat: this.resolvePropsInputFormat(), 130 | buttonIcon: this.props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon-time" : "glyphicon-calendar", 131 | widgetStyle: { 132 | display: "block", 133 | position: "absolute", 134 | left: -9999, 135 | zIndex: "9999 !important" 136 | }, 137 | viewDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true).startOf("month"), 138 | selectedDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true), 139 | inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : (0, _moment2["default"])(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) 140 | }; 141 | 142 | this.componentWillReceiveProps = function (nextProps) { 143 | var state = {}; 144 | if (nextProps.inputFormat !== _this.props.inputFormat) { 145 | state.inputFormat = nextProps.inputFormat; 146 | state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat); 147 | } 148 | 149 | if (nextProps.dateTime !== _this.props.dateTime && (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).isValid()) { 150 | state.viewDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).startOf("month"); 151 | state.selectedDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true); 152 | state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat ? nextProps.inputFormat : _this.state.inputFormat); 153 | } 154 | return _this.setState(state); 155 | }; 156 | 157 | this.onChange = function (event) { 158 | var value = event.target == null ? event : event.target.value; 159 | if ((0, _moment2["default"])(value, _this.state.inputFormat, true).isValid()) { 160 | _this.setState({ 161 | selectedDate: (0, _moment2["default"])(value, _this.state.inputFormat, true), 162 | viewDate: (0, _moment2["default"])(value, _this.state.inputFormat, true).startOf("month") 163 | }); 164 | } 165 | 166 | return _this.setState({ 167 | inputValue: value 168 | }, function () { 169 | return this.props.onChange((0, _moment2["default"])(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); 170 | }); 171 | }; 172 | 173 | this.getValue = function () { 174 | return (0, _moment2["default"])(_this.state.inputValue, _this.props.inputFormat, true).format(_this.props.format); 175 | }; 176 | 177 | this.setSelectedDate = function (e) { 178 | var target = e.target; 179 | 180 | if (target.className && !target.className.match(/disabled/g)) { 181 | var month = undefined; 182 | if (target.className.indexOf("new") >= 0) month = _this.state.viewDate.month() + 1;else if (target.className.indexOf("old") >= 0) month = _this.state.viewDate.month() - 1;else month = _this.state.viewDate.month(); 183 | return _this.setState({ 184 | selectedDate: _this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(_this.state.selectedDate.hours()).minute(_this.state.selectedDate.minutes()) 185 | }, function () { 186 | this.closePicker(); 187 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 188 | return this.setState({ 189 | inputValue: this.state.selectedDate.format(this.state.inputFormat) 190 | }); 191 | }); 192 | } 193 | }; 194 | 195 | this.setSelectedHour = function (e) { 196 | return _this.setState({ 197 | selectedDate: _this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(_this.state.selectedDate.minutes()) 198 | }, function () { 199 | this.closePicker(); 200 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 201 | return this.setState({ 202 | inputValue: this.state.selectedDate.format(this.state.inputFormat) 203 | }); 204 | }); 205 | }; 206 | 207 | this.setSelectedMinute = function (e) { 208 | return _this.setState({ 209 | selectedDate: _this.state.selectedDate.clone().hour(_this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) 210 | }, function () { 211 | this.closePicker(); 212 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 213 | return this.setState({ 214 | inputValue: this.state.selectedDate.format(this.state.inputFormat) 215 | }); 216 | }); 217 | }; 218 | 219 | this.setViewMonth = function (month) { 220 | return _this.setState({ 221 | viewDate: _this.state.viewDate.clone().month(month) 222 | }); 223 | }; 224 | 225 | this.setViewYear = function (year) { 226 | return _this.setState({ 227 | viewDate: _this.state.viewDate.clone().year(year) 228 | }); 229 | }; 230 | 231 | this.addMinute = function () { 232 | return _this.setState({ 233 | selectedDate: _this.state.selectedDate.clone().add(1, "minutes") 234 | }, function () { 235 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 236 | return this.setState({ 237 | inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) 238 | }); 239 | }); 240 | }; 241 | 242 | this.addHour = function () { 243 | return _this.setState({ 244 | selectedDate: _this.state.selectedDate.clone().add(1, "hours") 245 | }, function () { 246 | this.props.onChange(this.state.selectedDate.format(this.props.format)); 247 | return this.setState({ 248 | inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) 249 | }); 250 | }); 251 | }; 252 | 253 | this.addMonth = function () { 254 | return _this.setState({ 255 | viewDate: _this.state.viewDate.add(1, "months") 256 | }); 257 | }; 258 | 259 | this.addYear = function () { 260 | return _this.setState({ 261 | viewDate: _this.state.viewDate.add(1, "years") 262 | }); 263 | }; 264 | 265 | this.addDecade = function () { 266 | return _this.setState({ 267 | viewDate: _this.state.viewDate.add(10, "years") 268 | }); 269 | }; 270 | 271 | this.subtractMinute = function () { 272 | return _this.setState({ 273 | selectedDate: _this.state.selectedDate.clone().subtract(1, "minutes") 274 | }, function () { 275 | _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); 276 | return _this.setState({ 277 | inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) 278 | }); 279 | }); 280 | }; 281 | 282 | this.subtractHour = function () { 283 | return _this.setState({ 284 | selectedDate: _this.state.selectedDate.clone().subtract(1, "hours") 285 | }, function () { 286 | _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); 287 | return _this.setState({ 288 | inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) 289 | }); 290 | }); 291 | }; 292 | 293 | this.subtractMonth = function () { 294 | return _this.setState({ 295 | viewDate: _this.state.viewDate.subtract(1, "months") 296 | }); 297 | }; 298 | 299 | this.subtractYear = function () { 300 | return _this.setState({ 301 | viewDate: _this.state.viewDate.subtract(1, "years") 302 | }); 303 | }; 304 | 305 | this.subtractDecade = function () { 306 | return _this.setState({ 307 | viewDate: _this.state.viewDate.subtract(10, "years") 308 | }); 309 | }; 310 | 311 | this.togglePeriod = function () { 312 | if (_this.state.selectedDate.hour() > 12) { 313 | return _this.onChange(_this.state.selectedDate.clone().subtract(12, "hours").format(_this.state.inputFormat)); 314 | } else { 315 | return _this.onChange(_this.state.selectedDate.clone().add(12, "hours").format(_this.state.inputFormat)); 316 | } 317 | }; 318 | 319 | this.togglePicker = function () { 320 | return _this.setState({ 321 | showDatePicker: !_this.state.showDatePicker, 322 | showTimePicker: !_this.state.showTimePicker 323 | }); 324 | }; 325 | 326 | this.onClick = function () { 327 | var classes = undefined, 328 | gBCR = undefined, 329 | offset = undefined, 330 | placePosition = undefined, 331 | scrollTop = undefined, 332 | styles = undefined; 333 | if (_this.state.showPicker) { 334 | return _this.closePicker(); 335 | } else { 336 | _this.setState({ 337 | showPicker: true 338 | }); 339 | gBCR = _this.refs.dtpbutton.getBoundingClientRect(); 340 | classes = { 341 | "bootstrap-datetimepicker-widget": true, 342 | "dropdown-menu": true 343 | }; 344 | offset = { 345 | top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, 346 | left: gBCR.left + window.pageXOffset - document.documentElement.clientLeft 347 | }; 348 | offset.top = offset.top + _this.refs.datetimepicker.offsetHeight; 349 | scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 350 | placePosition = _this.props.direction === "up" ? "top" : _this.props.direction === "bottom" ? "bottom" : _this.props.direction === "auto" ? offset.top + _this.refs.widget.offsetHeight > window.offsetHeight + scrollTop && _this.refs.widget.offsetHeight + _this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; 351 | if (placePosition === "top") { 352 | offset.top = -_this.refs.widget.offsetHeight - _this.clientHeight - 2; 353 | classes.top = true; 354 | classes.bottom = false; 355 | classes["pull-right"] = true; 356 | } else { 357 | offset.top = 40; 358 | classes.top = false; 359 | classes.bottom = true; 360 | classes["pull-right"] = true; 361 | } 362 | styles = { 363 | display: "block", 364 | position: "absolute", 365 | top: offset.top, 366 | left: "auto", 367 | right: 40 368 | }; 369 | return _this.setState({ 370 | widgetStyle: styles, 371 | widgetClasses: classes 372 | }); 373 | } 374 | }; 375 | 376 | this.closePicker = function () { 377 | var style = _extends({}, _this.state.widgetStyle); 378 | style.left = -9999; 379 | style.display = "none"; 380 | return _this.setState({ 381 | showPicker: false, 382 | widgetStyle: style 383 | }); 384 | }; 385 | 386 | this.size = function () { 387 | switch (_this.props.size) { 388 | case _ConstantsJs2["default"].SIZE_SMALL: 389 | return "form-group-sm"; 390 | case _ConstantsJs2["default"].SIZE_LARGE: 391 | return "form-group-lg"; 392 | } 393 | 394 | return ""; 395 | }; 396 | 397 | this.renderOverlay = function () { 398 | var styles = { 399 | position: "fixed", 400 | top: 0, 401 | bottom: 0, 402 | left: 0, 403 | right: 0, 404 | zIndex: "999" 405 | }; 406 | if (_this.state.showPicker) { 407 | return _react2["default"].createElement("div", { onClick: _this.closePicker, style: styles }); 408 | } else { 409 | return _react2["default"].createElement("span", null); 410 | } 411 | }; 412 | } 413 | 414 | _createClass(DateTimeField, [{ 415 | key: "render", 416 | value: function render() { 417 | return _react2["default"].createElement( 418 | "div", 419 | null, 420 | this.renderOverlay(), 421 | _react2["default"].createElement(_DateTimePickerJs2["default"], { 422 | addDecade: this.addDecade, 423 | addHour: this.addHour, 424 | addMinute: this.addMinute, 425 | addMonth: this.addMonth, 426 | addYear: this.addYear, 427 | daysOfWeekDisabled: this.props.daysOfWeekDisabled, 428 | maxDate: this.props.maxDate, 429 | minDate: this.props.minDate, 430 | mode: this.props.mode, 431 | ref: "widget", 432 | selectedDate: this.state.selectedDate, 433 | setSelectedDate: this.setSelectedDate, 434 | setSelectedHour: this.setSelectedHour, 435 | setSelectedMinute: this.setSelectedMinute, 436 | setViewMonth: this.setViewMonth, 437 | setViewYear: this.setViewYear, 438 | showDatePicker: this.state.showDatePicker, 439 | showTimePicker: this.state.showTimePicker, 440 | showToday: this.props.showToday, 441 | subtractDecade: this.subtractDecade, 442 | subtractHour: this.subtractHour, 443 | subtractMinute: this.subtractMinute, 444 | subtractMonth: this.subtractMonth, 445 | subtractYear: this.subtractYear, 446 | togglePeriod: this.togglePeriod, 447 | togglePicker: this.togglePicker, 448 | viewDate: this.state.viewDate, 449 | viewMode: this.props.viewMode, 450 | widgetClasses: this.state.widgetClasses, 451 | widgetStyle: this.state.widgetStyle 452 | }), 453 | _react2["default"].createElement( 454 | "div", 455 | { className: "input-group date " + this.size(), ref: "datetimepicker" }, 456 | _react2["default"].createElement("input", _extends({ className: "form-control", onChange: this.onChange, type: "text", value: this.state.inputValue }, this.props.inputProps)), 457 | _react2["default"].createElement( 458 | "span", 459 | { className: "input-group-addon", onBlur: this.onBlur, onClick: this.onClick, ref: "dtpbutton" }, 460 | _react2["default"].createElement("span", { className: (0, _classnames2["default"])("glyphicon", this.state.buttonIcon) }) 461 | ) 462 | ) 463 | ); 464 | } 465 | }], [{ 466 | key: "defaultProps", 467 | value: { 468 | dateTime: (0, _moment2["default"])().format("x"), 469 | format: "x", 470 | showToday: true, 471 | viewMode: "days", 472 | daysOfWeekDisabled: [], 473 | size: _ConstantsJs2["default"].SIZE_MEDIUM, 474 | mode: _ConstantsJs2["default"].MODE_DATETIME, 475 | onChange: function onChange(x) { 476 | console.log(x); 477 | } 478 | }, 479 | enumerable: true 480 | }, { 481 | key: "propTypes", 482 | value: { 483 | dateTime: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), 484 | onChange: _react.PropTypes.func, 485 | format: _react.PropTypes.string, 486 | inputProps: _react.PropTypes.object, 487 | inputFormat: _react.PropTypes.string, 488 | defaultText: _react.PropTypes.string, 489 | mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), 490 | minDate: _react.PropTypes.object, 491 | maxDate: _react.PropTypes.object, 492 | direction: _react.PropTypes.string, 493 | showToday: _react.PropTypes.bool, 494 | viewMode: _react.PropTypes.string, 495 | size: _react.PropTypes.oneOf([_ConstantsJs2["default"].SIZE_SMALL, _ConstantsJs2["default"].SIZE_MEDIUM, _ConstantsJs2["default"].SIZE_LARGE]), 496 | daysOfWeekDisabled: _react.PropTypes.arrayOf(_react.PropTypes.number) 497 | }, 498 | enumerable: true 499 | }]); 500 | 501 | return DateTimeField; 502 | })(_react.Component); 503 | 504 | exports["default"] = DateTimeField; 505 | module.exports = exports["default"]; 506 | 507 | /***/ }, 508 | /* 2 */ 509 | /***/ function(module, exports, __webpack_require__) { 510 | 511 | "use strict"; 512 | 513 | var _Object$getOwnPropertyDescriptor = __webpack_require__(3)["default"]; 514 | 515 | exports["default"] = function get(_x, _x2, _x3) { 516 | var _again = true; 517 | 518 | _function: while (_again) { 519 | var object = _x, 520 | property = _x2, 521 | receiver = _x3; 522 | _again = false; 523 | if (object === null) object = Function.prototype; 524 | 525 | var desc = _Object$getOwnPropertyDescriptor(object, property); 526 | 527 | if (desc === undefined) { 528 | var parent = Object.getPrototypeOf(object); 529 | 530 | if (parent === null) { 531 | return undefined; 532 | } else { 533 | _x = parent; 534 | _x2 = property; 535 | _x3 = receiver; 536 | _again = true; 537 | desc = parent = undefined; 538 | continue _function; 539 | } 540 | } else if ("value" in desc) { 541 | return desc.value; 542 | } else { 543 | var getter = desc.get; 544 | 545 | if (getter === undefined) { 546 | return undefined; 547 | } 548 | 549 | return getter.call(receiver); 550 | } 551 | } 552 | }; 553 | 554 | exports.__esModule = true; 555 | 556 | /***/ }, 557 | /* 3 */ 558 | /***/ function(module, exports, __webpack_require__) { 559 | 560 | module.exports = { "default": __webpack_require__(4), __esModule: true }; 561 | 562 | /***/ }, 563 | /* 4 */ 564 | /***/ function(module, exports, __webpack_require__) { 565 | 566 | var $ = __webpack_require__(5); 567 | __webpack_require__(6); 568 | module.exports = function getOwnPropertyDescriptor(it, key){ 569 | return $.getDesc(it, key); 570 | }; 571 | 572 | /***/ }, 573 | /* 5 */ 574 | /***/ function(module, exports) { 575 | 576 | var $Object = Object; 577 | module.exports = { 578 | create: $Object.create, 579 | getProto: $Object.getPrototypeOf, 580 | isEnum: {}.propertyIsEnumerable, 581 | getDesc: $Object.getOwnPropertyDescriptor, 582 | setDesc: $Object.defineProperty, 583 | setDescs: $Object.defineProperties, 584 | getKeys: $Object.keys, 585 | getNames: $Object.getOwnPropertyNames, 586 | getSymbols: $Object.getOwnPropertySymbols, 587 | each: [].forEach 588 | }; 589 | 590 | /***/ }, 591 | /* 6 */ 592 | /***/ function(module, exports, __webpack_require__) { 593 | 594 | // 19.1.2.6 Object.getOwnPropertyDescriptor(O, P) 595 | var toIObject = __webpack_require__(7); 596 | 597 | __webpack_require__(11)('getOwnPropertyDescriptor', function($getOwnPropertyDescriptor){ 598 | return function getOwnPropertyDescriptor(it, key){ 599 | return $getOwnPropertyDescriptor(toIObject(it), key); 600 | }; 601 | }); 602 | 603 | /***/ }, 604 | /* 7 */ 605 | /***/ function(module, exports, __webpack_require__) { 606 | 607 | // to indexed object, toObject with fallback for non-array-like ES3 strings 608 | var IObject = __webpack_require__(8) 609 | , defined = __webpack_require__(10); 610 | module.exports = function(it){ 611 | return IObject(defined(it)); 612 | }; 613 | 614 | /***/ }, 615 | /* 8 */ 616 | /***/ function(module, exports, __webpack_require__) { 617 | 618 | // fallback for non-array-like ES3 and non-enumerable old V8 strings 619 | var cof = __webpack_require__(9); 620 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){ 621 | return cof(it) == 'String' ? it.split('') : Object(it); 622 | }; 623 | 624 | /***/ }, 625 | /* 9 */ 626 | /***/ function(module, exports) { 627 | 628 | var toString = {}.toString; 629 | 630 | module.exports = function(it){ 631 | return toString.call(it).slice(8, -1); 632 | }; 633 | 634 | /***/ }, 635 | /* 10 */ 636 | /***/ function(module, exports) { 637 | 638 | // 7.2.1 RequireObjectCoercible(argument) 639 | module.exports = function(it){ 640 | if(it == undefined)throw TypeError("Can't call method on " + it); 641 | return it; 642 | }; 643 | 644 | /***/ }, 645 | /* 11 */ 646 | /***/ function(module, exports, __webpack_require__) { 647 | 648 | // most Object methods by ES6 should accept primitives 649 | var $export = __webpack_require__(12) 650 | , core = __webpack_require__(14) 651 | , fails = __webpack_require__(17); 652 | module.exports = function(KEY, exec){ 653 | var fn = (core.Object || {})[KEY] || Object[KEY] 654 | , exp = {}; 655 | exp[KEY] = exec(fn); 656 | $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp); 657 | }; 658 | 659 | /***/ }, 660 | /* 12 */ 661 | /***/ function(module, exports, __webpack_require__) { 662 | 663 | var global = __webpack_require__(13) 664 | , core = __webpack_require__(14) 665 | , ctx = __webpack_require__(15) 666 | , PROTOTYPE = 'prototype'; 667 | 668 | var $export = function(type, name, source){ 669 | var IS_FORCED = type & $export.F 670 | , IS_GLOBAL = type & $export.G 671 | , IS_STATIC = type & $export.S 672 | , IS_PROTO = type & $export.P 673 | , IS_BIND = type & $export.B 674 | , IS_WRAP = type & $export.W 675 | , exports = IS_GLOBAL ? core : core[name] || (core[name] = {}) 676 | , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE] 677 | , key, own, out; 678 | if(IS_GLOBAL)source = name; 679 | for(key in source){ 680 | // contains in native 681 | own = !IS_FORCED && target && key in target; 682 | if(own && key in exports)continue; 683 | // export native or passed 684 | out = own ? target[key] : source[key]; 685 | // prevent global pollution for namespaces 686 | exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key] 687 | // bind timers to global for call from export context 688 | : IS_BIND && own ? ctx(out, global) 689 | // wrap global constructors for prevent change them in library 690 | : IS_WRAP && target[key] == out ? (function(C){ 691 | var F = function(param){ 692 | return this instanceof C ? new C(param) : C(param); 693 | }; 694 | F[PROTOTYPE] = C[PROTOTYPE]; 695 | return F; 696 | // make static versions for prototype methods 697 | })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; 698 | if(IS_PROTO)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out; 699 | } 700 | }; 701 | // type bitmap 702 | $export.F = 1; // forced 703 | $export.G = 2; // global 704 | $export.S = 4; // static 705 | $export.P = 8; // proto 706 | $export.B = 16; // bind 707 | $export.W = 32; // wrap 708 | module.exports = $export; 709 | 710 | /***/ }, 711 | /* 13 */ 712 | /***/ function(module, exports) { 713 | 714 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 715 | var global = module.exports = typeof window != 'undefined' && window.Math == Math 716 | ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')(); 717 | if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef 718 | 719 | /***/ }, 720 | /* 14 */ 721 | /***/ function(module, exports) { 722 | 723 | var core = module.exports = {version: '1.2.6'}; 724 | if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef 725 | 726 | /***/ }, 727 | /* 15 */ 728 | /***/ function(module, exports, __webpack_require__) { 729 | 730 | // optional / simple context binding 731 | var aFunction = __webpack_require__(16); 732 | module.exports = function(fn, that, length){ 733 | aFunction(fn); 734 | if(that === undefined)return fn; 735 | switch(length){ 736 | case 1: return function(a){ 737 | return fn.call(that, a); 738 | }; 739 | case 2: return function(a, b){ 740 | return fn.call(that, a, b); 741 | }; 742 | case 3: return function(a, b, c){ 743 | return fn.call(that, a, b, c); 744 | }; 745 | } 746 | return function(/* ...args */){ 747 | return fn.apply(that, arguments); 748 | }; 749 | }; 750 | 751 | /***/ }, 752 | /* 16 */ 753 | /***/ function(module, exports) { 754 | 755 | module.exports = function(it){ 756 | if(typeof it != 'function')throw TypeError(it + ' is not a function!'); 757 | return it; 758 | }; 759 | 760 | /***/ }, 761 | /* 17 */ 762 | /***/ function(module, exports) { 763 | 764 | module.exports = function(exec){ 765 | try { 766 | return !!exec(); 767 | } catch(e){ 768 | return true; 769 | } 770 | }; 771 | 772 | /***/ }, 773 | /* 18 */ 774 | /***/ function(module, exports, __webpack_require__) { 775 | 776 | "use strict"; 777 | 778 | var _Object$create = __webpack_require__(19)["default"]; 779 | 780 | var _Object$setPrototypeOf = __webpack_require__(21)["default"]; 781 | 782 | exports["default"] = function (subClass, superClass) { 783 | if (typeof superClass !== "function" && superClass !== null) { 784 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 785 | } 786 | 787 | subClass.prototype = _Object$create(superClass && superClass.prototype, { 788 | constructor: { 789 | value: subClass, 790 | enumerable: false, 791 | writable: true, 792 | configurable: true 793 | } 794 | }); 795 | if (superClass) _Object$setPrototypeOf ? _Object$setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 796 | }; 797 | 798 | exports.__esModule = true; 799 | 800 | /***/ }, 801 | /* 19 */ 802 | /***/ function(module, exports, __webpack_require__) { 803 | 804 | module.exports = { "default": __webpack_require__(20), __esModule: true }; 805 | 806 | /***/ }, 807 | /* 20 */ 808 | /***/ function(module, exports, __webpack_require__) { 809 | 810 | var $ = __webpack_require__(5); 811 | module.exports = function create(P, D){ 812 | return $.create(P, D); 813 | }; 814 | 815 | /***/ }, 816 | /* 21 */ 817 | /***/ function(module, exports, __webpack_require__) { 818 | 819 | module.exports = { "default": __webpack_require__(22), __esModule: true }; 820 | 821 | /***/ }, 822 | /* 22 */ 823 | /***/ function(module, exports, __webpack_require__) { 824 | 825 | __webpack_require__(23); 826 | module.exports = __webpack_require__(14).Object.setPrototypeOf; 827 | 828 | /***/ }, 829 | /* 23 */ 830 | /***/ function(module, exports, __webpack_require__) { 831 | 832 | // 19.1.3.19 Object.setPrototypeOf(O, proto) 833 | var $export = __webpack_require__(12); 834 | $export($export.S, 'Object', {setPrototypeOf: __webpack_require__(24).set}); 835 | 836 | /***/ }, 837 | /* 24 */ 838 | /***/ function(module, exports, __webpack_require__) { 839 | 840 | // Works with __proto__ only. Old v8 can't work with null proto objects. 841 | /* eslint-disable no-proto */ 842 | var getDesc = __webpack_require__(5).getDesc 843 | , isObject = __webpack_require__(25) 844 | , anObject = __webpack_require__(26); 845 | var check = function(O, proto){ 846 | anObject(O); 847 | if(!isObject(proto) && proto !== null)throw TypeError(proto + ": can't set as prototype!"); 848 | }; 849 | module.exports = { 850 | set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line 851 | function(test, buggy, set){ 852 | try { 853 | set = __webpack_require__(15)(Function.call, getDesc(Object.prototype, '__proto__').set, 2); 854 | set(test, []); 855 | buggy = !(test instanceof Array); 856 | } catch(e){ buggy = true; } 857 | return function setPrototypeOf(O, proto){ 858 | check(O, proto); 859 | if(buggy)O.__proto__ = proto; 860 | else set(O, proto); 861 | return O; 862 | }; 863 | }({}, false) : undefined), 864 | check: check 865 | }; 866 | 867 | /***/ }, 868 | /* 25 */ 869 | /***/ function(module, exports) { 870 | 871 | module.exports = function(it){ 872 | return typeof it === 'object' ? it !== null : typeof it === 'function'; 873 | }; 874 | 875 | /***/ }, 876 | /* 26 */ 877 | /***/ function(module, exports, __webpack_require__) { 878 | 879 | var isObject = __webpack_require__(25); 880 | module.exports = function(it){ 881 | if(!isObject(it))throw TypeError(it + ' is not an object!'); 882 | return it; 883 | }; 884 | 885 | /***/ }, 886 | /* 27 */ 887 | /***/ function(module, exports, __webpack_require__) { 888 | 889 | "use strict"; 890 | 891 | var _Object$defineProperty = __webpack_require__(28)["default"]; 892 | 893 | exports["default"] = (function () { 894 | function defineProperties(target, props) { 895 | for (var i = 0; i < props.length; i++) { 896 | var descriptor = props[i]; 897 | descriptor.enumerable = descriptor.enumerable || false; 898 | descriptor.configurable = true; 899 | if ("value" in descriptor) descriptor.writable = true; 900 | 901 | _Object$defineProperty(target, descriptor.key, descriptor); 902 | } 903 | } 904 | 905 | return function (Constructor, protoProps, staticProps) { 906 | if (protoProps) defineProperties(Constructor.prototype, protoProps); 907 | if (staticProps) defineProperties(Constructor, staticProps); 908 | return Constructor; 909 | }; 910 | })(); 911 | 912 | exports.__esModule = true; 913 | 914 | /***/ }, 915 | /* 28 */ 916 | /***/ function(module, exports, __webpack_require__) { 917 | 918 | module.exports = { "default": __webpack_require__(29), __esModule: true }; 919 | 920 | /***/ }, 921 | /* 29 */ 922 | /***/ function(module, exports, __webpack_require__) { 923 | 924 | var $ = __webpack_require__(5); 925 | module.exports = function defineProperty(it, key, desc){ 926 | return $.setDesc(it, key, desc); 927 | }; 928 | 929 | /***/ }, 930 | /* 30 */ 931 | /***/ function(module, exports) { 932 | 933 | "use strict"; 934 | 935 | exports["default"] = function (instance, Constructor) { 936 | if (!(instance instanceof Constructor)) { 937 | throw new TypeError("Cannot call a class as a function"); 938 | } 939 | }; 940 | 941 | exports.__esModule = true; 942 | 943 | /***/ }, 944 | /* 31 */ 945 | /***/ function(module, exports, __webpack_require__) { 946 | 947 | "use strict"; 948 | 949 | var _Object$assign = __webpack_require__(32)["default"]; 950 | 951 | exports["default"] = _Object$assign || function (target) { 952 | for (var i = 1; i < arguments.length; i++) { 953 | var source = arguments[i]; 954 | 955 | for (var key in source) { 956 | if (Object.prototype.hasOwnProperty.call(source, key)) { 957 | target[key] = source[key]; 958 | } 959 | } 960 | } 961 | 962 | return target; 963 | }; 964 | 965 | exports.__esModule = true; 966 | 967 | /***/ }, 968 | /* 32 */ 969 | /***/ function(module, exports, __webpack_require__) { 970 | 971 | module.exports = { "default": __webpack_require__(33), __esModule: true }; 972 | 973 | /***/ }, 974 | /* 33 */ 975 | /***/ function(module, exports, __webpack_require__) { 976 | 977 | __webpack_require__(34); 978 | module.exports = __webpack_require__(14).Object.assign; 979 | 980 | /***/ }, 981 | /* 34 */ 982 | /***/ function(module, exports, __webpack_require__) { 983 | 984 | // 19.1.3.1 Object.assign(target, source) 985 | var $export = __webpack_require__(12); 986 | 987 | $export($export.S + $export.F, 'Object', {assign: __webpack_require__(35)}); 988 | 989 | /***/ }, 990 | /* 35 */ 991 | /***/ function(module, exports, __webpack_require__) { 992 | 993 | // 19.1.2.1 Object.assign(target, source, ...) 994 | var $ = __webpack_require__(5) 995 | , toObject = __webpack_require__(36) 996 | , IObject = __webpack_require__(8); 997 | 998 | // should work with symbols and should have deterministic property order (V8 bug) 999 | module.exports = __webpack_require__(17)(function(){ 1000 | var a = Object.assign 1001 | , A = {} 1002 | , B = {} 1003 | , S = Symbol() 1004 | , K = 'abcdefghijklmnopqrst'; 1005 | A[S] = 7; 1006 | K.split('').forEach(function(k){ B[k] = k; }); 1007 | return a({}, A)[S] != 7 || Object.keys(a({}, B)).join('') != K; 1008 | }) ? function assign(target, source){ // eslint-disable-line no-unused-vars 1009 | var T = toObject(target) 1010 | , $$ = arguments 1011 | , $$len = $$.length 1012 | , index = 1 1013 | , getKeys = $.getKeys 1014 | , getSymbols = $.getSymbols 1015 | , isEnum = $.isEnum; 1016 | while($$len > index){ 1017 | var S = IObject($$[index++]) 1018 | , keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S) 1019 | , length = keys.length 1020 | , j = 0 1021 | , key; 1022 | while(length > j)if(isEnum.call(S, key = keys[j++]))T[key] = S[key]; 1023 | } 1024 | return T; 1025 | } : Object.assign; 1026 | 1027 | /***/ }, 1028 | /* 36 */ 1029 | /***/ function(module, exports, __webpack_require__) { 1030 | 1031 | // 7.1.13 ToObject(argument) 1032 | var defined = __webpack_require__(10); 1033 | module.exports = function(it){ 1034 | return Object(defined(it)); 1035 | }; 1036 | 1037 | /***/ }, 1038 | /* 37 */ 1039 | /***/ function(module, exports) { 1040 | 1041 | "use strict"; 1042 | 1043 | exports["default"] = function (obj) { 1044 | return obj && obj.__esModule ? obj : { 1045 | "default": obj 1046 | }; 1047 | }; 1048 | 1049 | exports.__esModule = true; 1050 | 1051 | /***/ }, 1052 | /* 38 */ 1053 | /***/ function(module, exports) { 1054 | 1055 | module.exports = __WEBPACK_EXTERNAL_MODULE_38__; 1056 | 1057 | /***/ }, 1058 | /* 39 */ 1059 | /***/ function(module, exports) { 1060 | 1061 | module.exports = __WEBPACK_EXTERNAL_MODULE_39__; 1062 | 1063 | /***/ }, 1064 | /* 40 */ 1065 | /***/ function(module, exports, __webpack_require__) { 1066 | 1067 | var __WEBPACK_AMD_DEFINE_RESULT__;/*! 1068 | Copyright (c) 2015 Jed Watson. 1069 | Licensed under the MIT License (MIT), see 1070 | http://jedwatson.github.io/classnames 1071 | */ 1072 | /* global define */ 1073 | 1074 | (function () { 1075 | 'use strict'; 1076 | 1077 | var hasOwn = {}.hasOwnProperty; 1078 | 1079 | function classNames () { 1080 | var classes = ''; 1081 | 1082 | for (var i = 0; i < arguments.length; i++) { 1083 | var arg = arguments[i]; 1084 | if (!arg) continue; 1085 | 1086 | var argType = typeof arg; 1087 | 1088 | if (argType === 'string' || argType === 'number') { 1089 | classes += ' ' + arg; 1090 | } else if (Array.isArray(arg)) { 1091 | classes += ' ' + classNames.apply(null, arg); 1092 | } else if (argType === 'object') { 1093 | for (var key in arg) { 1094 | if (hasOwn.call(arg, key) && arg[key]) { 1095 | classes += ' ' + key; 1096 | } 1097 | } 1098 | } 1099 | } 1100 | 1101 | return classes.substr(1); 1102 | } 1103 | 1104 | if (typeof module !== 'undefined' && module.exports) { 1105 | module.exports = classNames; 1106 | } else if (true) { 1107 | // register as 'classnames', consistent with npm package name 1108 | !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { 1109 | return classNames; 1110 | }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 1111 | } else { 1112 | window.classNames = classNames; 1113 | } 1114 | }()); 1115 | 1116 | 1117 | /***/ }, 1118 | /* 41 */ 1119 | /***/ function(module, exports, __webpack_require__) { 1120 | 1121 | "use strict"; 1122 | 1123 | var _get = __webpack_require__(2)["default"]; 1124 | 1125 | var _inherits = __webpack_require__(18)["default"]; 1126 | 1127 | var _createClass = __webpack_require__(27)["default"]; 1128 | 1129 | var _classCallCheck = __webpack_require__(30)["default"]; 1130 | 1131 | var _interopRequireDefault = __webpack_require__(37)["default"]; 1132 | 1133 | Object.defineProperty(exports, "__esModule", { 1134 | value: true 1135 | }); 1136 | 1137 | var _react = __webpack_require__(38); 1138 | 1139 | var _react2 = _interopRequireDefault(_react); 1140 | 1141 | var _classnames = __webpack_require__(40); 1142 | 1143 | var _classnames2 = _interopRequireDefault(_classnames); 1144 | 1145 | var _DateTimePickerDateJs = __webpack_require__(42); 1146 | 1147 | var _DateTimePickerDateJs2 = _interopRequireDefault(_DateTimePickerDateJs); 1148 | 1149 | var _DateTimePickerTimeJs = __webpack_require__(49); 1150 | 1151 | var _DateTimePickerTimeJs2 = _interopRequireDefault(_DateTimePickerTimeJs); 1152 | 1153 | var _ConstantsJs = __webpack_require__(51); 1154 | 1155 | var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); 1156 | 1157 | var DateTimePicker = (function (_Component) { 1158 | _inherits(DateTimePicker, _Component); 1159 | 1160 | function DateTimePicker() { 1161 | var _this = this; 1162 | 1163 | _classCallCheck(this, DateTimePicker); 1164 | 1165 | _get(Object.getPrototypeOf(DateTimePicker.prototype), "constructor", this).apply(this, arguments); 1166 | 1167 | this.renderDatePicker = function () { 1168 | if (_this.props.showDatePicker) { 1169 | return _react2["default"].createElement( 1170 | "li", 1171 | null, 1172 | _react2["default"].createElement(_DateTimePickerDateJs2["default"], { 1173 | addDecade: _this.props.addDecade, 1174 | addMonth: _this.props.addMonth, 1175 | addYear: _this.props.addYear, 1176 | daysOfWeekDisabled: _this.props.daysOfWeekDisabled, 1177 | maxDate: _this.props.maxDate, 1178 | minDate: _this.props.minDate, 1179 | selectedDate: _this.props.selectedDate, 1180 | setSelectedDate: _this.props.setSelectedDate, 1181 | setViewMonth: _this.props.setViewMonth, 1182 | setViewYear: _this.props.setViewYear, 1183 | showToday: _this.props.showToday, 1184 | subtractDecade: _this.props.subtractDecade, 1185 | subtractMonth: _this.props.subtractMonth, 1186 | subtractYear: _this.props.subtractYear, 1187 | viewDate: _this.props.viewDate, 1188 | viewMode: _this.props.viewMode 1189 | }) 1190 | ); 1191 | } 1192 | }; 1193 | 1194 | this.renderTimePicker = function () { 1195 | if (_this.props.showTimePicker) { 1196 | return _react2["default"].createElement( 1197 | "li", 1198 | null, 1199 | _react2["default"].createElement(_DateTimePickerTimeJs2["default"], { 1200 | addHour: _this.props.addHour, 1201 | addMinute: _this.props.addMinute, 1202 | mode: _this.props.mode, 1203 | selectedDate: _this.props.selectedDate, 1204 | setSelectedHour: _this.props.setSelectedHour, 1205 | setSelectedMinute: _this.props.setSelectedMinute, 1206 | subtractHour: _this.props.subtractHour, 1207 | subtractMinute: _this.props.subtractMinute, 1208 | togglePeriod: _this.props.togglePeriod, 1209 | viewDate: _this.props.viewDate 1210 | }) 1211 | ); 1212 | } 1213 | }; 1214 | 1215 | this.renderSwitchButton = function () { 1216 | return _this.props.mode === _ConstantsJs2["default"].MODE_DATETIME ? _react2["default"].createElement( 1217 | "li", 1218 | null, 1219 | _react2["default"].createElement( 1220 | "span", 1221 | { className: "btn picker-switch", onClick: _this.props.togglePicker, style: { width: "100%" } }, 1222 | _react2["default"].createElement("span", { className: (0, _classnames2["default"])("glyphicon", _this.props.showTimePicker ? "glyphicon-calendar" : "glyphicon-time") }) 1223 | ) 1224 | ) : null; 1225 | }; 1226 | } 1227 | 1228 | _createClass(DateTimePicker, [{ 1229 | key: "render", 1230 | value: function render() { 1231 | return _react2["default"].createElement( 1232 | "div", 1233 | { className: (0, _classnames2["default"])(this.props.widgetClasses), style: this.props.widgetStyle }, 1234 | _react2["default"].createElement( 1235 | "ul", 1236 | { className: "list-unstyled" }, 1237 | this.renderDatePicker(), 1238 | this.renderSwitchButton(), 1239 | this.renderTimePicker() 1240 | ) 1241 | ); 1242 | } 1243 | }], [{ 1244 | key: "propTypes", 1245 | value: { 1246 | showDatePicker: _react.PropTypes.bool, 1247 | showTimePicker: _react.PropTypes.bool, 1248 | subtractMonth: _react.PropTypes.func.isRequired, 1249 | addMonth: _react.PropTypes.func.isRequired, 1250 | viewDate: _react.PropTypes.object.isRequired, 1251 | selectedDate: _react.PropTypes.object.isRequired, 1252 | showToday: _react.PropTypes.bool, 1253 | viewMode: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), 1254 | mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), 1255 | daysOfWeekDisabled: _react.PropTypes.array, 1256 | setSelectedDate: _react.PropTypes.func.isRequired, 1257 | subtractYear: _react.PropTypes.func.isRequired, 1258 | addYear: _react.PropTypes.func.isRequired, 1259 | setViewMonth: _react.PropTypes.func.isRequired, 1260 | setViewYear: _react.PropTypes.func.isRequired, 1261 | subtractHour: _react.PropTypes.func.isRequired, 1262 | addHour: _react.PropTypes.func.isRequired, 1263 | subtractMinute: _react.PropTypes.func.isRequired, 1264 | addMinute: _react.PropTypes.func.isRequired, 1265 | addDecade: _react.PropTypes.func.isRequired, 1266 | subtractDecade: _react.PropTypes.func.isRequired, 1267 | togglePeriod: _react.PropTypes.func.isRequired, 1268 | minDate: _react.PropTypes.object, 1269 | maxDate: _react.PropTypes.object, 1270 | widgetClasses: _react.PropTypes.object, 1271 | widgetStyle: _react.PropTypes.object, 1272 | togglePicker: _react.PropTypes.func, 1273 | setSelectedHour: _react.PropTypes.func, 1274 | setSelectedMinute: _react.PropTypes.func 1275 | }, 1276 | enumerable: true 1277 | }]); 1278 | 1279 | return DateTimePicker; 1280 | })(_react.Component); 1281 | 1282 | exports["default"] = DateTimePicker; 1283 | module.exports = exports["default"]; 1284 | 1285 | /***/ }, 1286 | /* 42 */ 1287 | /***/ function(module, exports, __webpack_require__) { 1288 | 1289 | "use strict"; 1290 | 1291 | var _get = __webpack_require__(2)["default"]; 1292 | 1293 | var _inherits = __webpack_require__(18)["default"]; 1294 | 1295 | var _createClass = __webpack_require__(27)["default"]; 1296 | 1297 | var _classCallCheck = __webpack_require__(30)["default"]; 1298 | 1299 | var _Object$keys = __webpack_require__(43)["default"]; 1300 | 1301 | var _interopRequireDefault = __webpack_require__(37)["default"]; 1302 | 1303 | Object.defineProperty(exports, "__esModule", { 1304 | value: true 1305 | }); 1306 | 1307 | var _react = __webpack_require__(38); 1308 | 1309 | var _react2 = _interopRequireDefault(_react); 1310 | 1311 | var _DateTimePickerDays = __webpack_require__(46); 1312 | 1313 | var _DateTimePickerDays2 = _interopRequireDefault(_DateTimePickerDays); 1314 | 1315 | var _DateTimePickerMonths = __webpack_require__(47); 1316 | 1317 | var _DateTimePickerMonths2 = _interopRequireDefault(_DateTimePickerMonths); 1318 | 1319 | var _DateTimePickerYears = __webpack_require__(48); 1320 | 1321 | var _DateTimePickerYears2 = _interopRequireDefault(_DateTimePickerYears); 1322 | 1323 | var DateTimePickerDate = (function (_Component) { 1324 | _inherits(DateTimePickerDate, _Component); 1325 | 1326 | _createClass(DateTimePickerDate, null, [{ 1327 | key: "propTypes", 1328 | value: { 1329 | subtractMonth: _react.PropTypes.func.isRequired, 1330 | addMonth: _react.PropTypes.func.isRequired, 1331 | viewDate: _react.PropTypes.object.isRequired, 1332 | selectedDate: _react.PropTypes.object.isRequired, 1333 | showToday: _react.PropTypes.bool, 1334 | viewMode: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), 1335 | daysOfWeekDisabled: _react.PropTypes.array, 1336 | setSelectedDate: _react.PropTypes.func.isRequired, 1337 | subtractYear: _react.PropTypes.func.isRequired, 1338 | addYear: _react.PropTypes.func.isRequired, 1339 | setViewMonth: _react.PropTypes.func.isRequired, 1340 | setViewYear: _react.PropTypes.func.isRequired, 1341 | addDecade: _react.PropTypes.func.isRequired, 1342 | subtractDecade: _react.PropTypes.func.isRequired, 1343 | minDate: _react.PropTypes.object, 1344 | maxDate: _react.PropTypes.object 1345 | }, 1346 | enumerable: true 1347 | }]); 1348 | 1349 | function DateTimePickerDate(props) { 1350 | var _this = this; 1351 | 1352 | _classCallCheck(this, DateTimePickerDate); 1353 | 1354 | _get(Object.getPrototypeOf(DateTimePickerDate.prototype), "constructor", this).call(this, props); 1355 | 1356 | this.showMonths = function () { 1357 | return _this.setState({ 1358 | daysDisplayed: false, 1359 | monthsDisplayed: true 1360 | }); 1361 | }; 1362 | 1363 | this.showYears = function () { 1364 | return _this.setState({ 1365 | monthsDisplayed: false, 1366 | yearsDisplayed: true 1367 | }); 1368 | }; 1369 | 1370 | this.setViewYear = function (e) { 1371 | _this.props.setViewYear(e.target.innerHTML); 1372 | return _this.setState({ 1373 | yearsDisplayed: false, 1374 | monthsDisplayed: true 1375 | }); 1376 | }; 1377 | 1378 | this.setViewMonth = function (e) { 1379 | _this.props.setViewMonth(e.target.innerHTML); 1380 | return _this.setState({ 1381 | monthsDisplayed: false, 1382 | daysDisplayed: true 1383 | }); 1384 | }; 1385 | 1386 | this.renderDays = function () { 1387 | if (_this.state.daysDisplayed) { 1388 | return _react2["default"].createElement(_DateTimePickerDays2["default"], { 1389 | addMonth: _this.props.addMonth, 1390 | daysOfWeekDisabled: _this.props.daysOfWeekDisabled, 1391 | maxDate: _this.props.maxDate, 1392 | minDate: _this.props.minDate, 1393 | selectedDate: _this.props.selectedDate, 1394 | setSelectedDate: _this.props.setSelectedDate, 1395 | showMonths: _this.showMonths, 1396 | showToday: _this.props.showToday, 1397 | subtractMonth: _this.props.subtractMonth, 1398 | viewDate: _this.props.viewDate 1399 | }); 1400 | } else { 1401 | return null; 1402 | } 1403 | }; 1404 | 1405 | this.renderMonths = function () { 1406 | if (_this.state.monthsDisplayed) { 1407 | return _react2["default"].createElement(_DateTimePickerMonths2["default"], { 1408 | addYear: _this.props.addYear, 1409 | selectedDate: _this.props.selectedDate, 1410 | setViewMonth: _this.setViewMonth, 1411 | showYears: _this.showYears, 1412 | subtractYear: _this.props.subtractYear, 1413 | viewDate: _this.props.viewDate 1414 | }); 1415 | } else { 1416 | return null; 1417 | } 1418 | }; 1419 | 1420 | this.renderYears = function () { 1421 | if (_this.state.yearsDisplayed) { 1422 | return _react2["default"].createElement(_DateTimePickerYears2["default"], { 1423 | addDecade: _this.props.addDecade, 1424 | selectedDate: _this.props.selectedDate, 1425 | setViewYear: _this.setViewYear, 1426 | subtractDecade: _this.props.subtractDecade, 1427 | viewDate: _this.props.viewDate 1428 | }); 1429 | } else { 1430 | return null; 1431 | } 1432 | }; 1433 | 1434 | var viewModes = { 1435 | "days": { 1436 | daysDisplayed: true, 1437 | monthsDisplayed: false, 1438 | yearsDisplayed: false 1439 | }, 1440 | "months": { 1441 | daysDisplayed: false, 1442 | monthsDisplayed: true, 1443 | yearsDisplayed: false 1444 | }, 1445 | "years": { 1446 | daysDisplayed: false, 1447 | monthsDisplayed: false, 1448 | yearsDisplayed: true 1449 | } 1450 | }; 1451 | this.state = viewModes[this.props.viewMode] || viewModes[_Object$keys(viewModes)[this.props.viewMode]] || viewModes.days; 1452 | } 1453 | 1454 | _createClass(DateTimePickerDate, [{ 1455 | key: "render", 1456 | value: function render() { 1457 | return _react2["default"].createElement( 1458 | "div", 1459 | { className: "datepicker" }, 1460 | this.renderDays(), 1461 | this.renderMonths(), 1462 | this.renderYears() 1463 | ); 1464 | } 1465 | }]); 1466 | 1467 | return DateTimePickerDate; 1468 | })(_react.Component); 1469 | 1470 | exports["default"] = DateTimePickerDate; 1471 | module.exports = exports["default"]; 1472 | 1473 | /***/ }, 1474 | /* 43 */ 1475 | /***/ function(module, exports, __webpack_require__) { 1476 | 1477 | module.exports = { "default": __webpack_require__(44), __esModule: true }; 1478 | 1479 | /***/ }, 1480 | /* 44 */ 1481 | /***/ function(module, exports, __webpack_require__) { 1482 | 1483 | __webpack_require__(45); 1484 | module.exports = __webpack_require__(14).Object.keys; 1485 | 1486 | /***/ }, 1487 | /* 45 */ 1488 | /***/ function(module, exports, __webpack_require__) { 1489 | 1490 | // 19.1.2.14 Object.keys(O) 1491 | var toObject = __webpack_require__(36); 1492 | 1493 | __webpack_require__(11)('keys', function($keys){ 1494 | return function keys(it){ 1495 | return $keys(toObject(it)); 1496 | }; 1497 | }); 1498 | 1499 | /***/ }, 1500 | /* 46 */ 1501 | /***/ function(module, exports, __webpack_require__) { 1502 | 1503 | "use strict"; 1504 | 1505 | var _get = __webpack_require__(2)["default"]; 1506 | 1507 | var _inherits = __webpack_require__(18)["default"]; 1508 | 1509 | var _createClass = __webpack_require__(27)["default"]; 1510 | 1511 | var _classCallCheck = __webpack_require__(30)["default"]; 1512 | 1513 | var _interopRequireDefault = __webpack_require__(37)["default"]; 1514 | 1515 | Object.defineProperty(exports, "__esModule", { 1516 | value: true 1517 | }); 1518 | 1519 | var _react = __webpack_require__(38); 1520 | 1521 | var _react2 = _interopRequireDefault(_react); 1522 | 1523 | var _moment = __webpack_require__(39); 1524 | 1525 | var _moment2 = _interopRequireDefault(_moment); 1526 | 1527 | var _classnames = __webpack_require__(40); 1528 | 1529 | var _classnames2 = _interopRequireDefault(_classnames); 1530 | 1531 | var DateTimePickerDays = (function (_Component) { 1532 | _inherits(DateTimePickerDays, _Component); 1533 | 1534 | function DateTimePickerDays() { 1535 | var _this = this; 1536 | 1537 | _classCallCheck(this, DateTimePickerDays); 1538 | 1539 | _get(Object.getPrototypeOf(DateTimePickerDays.prototype), "constructor", this).apply(this, arguments); 1540 | 1541 | this.renderDays = function () { 1542 | var cells, classes, days, html, month, nextMonth, prevMonth, minDate, maxDate, row, year; 1543 | year = _this.props.viewDate.year(); 1544 | month = _this.props.viewDate.month(); 1545 | prevMonth = _this.props.viewDate.clone().subtract(1, "months"); 1546 | days = prevMonth.daysInMonth(); 1547 | prevMonth.date(days).startOf("week"); 1548 | nextMonth = (0, _moment2["default"])(prevMonth).clone().add(42, "d"); 1549 | minDate = _this.props.minDate ? _this.props.minDate.clone().subtract(1, "days") : _this.props.minDate; 1550 | maxDate = _this.props.maxDate ? _this.props.maxDate.clone() : _this.props.maxDate; 1551 | html = []; 1552 | cells = []; 1553 | while (prevMonth.isBefore(nextMonth)) { 1554 | classes = { 1555 | day: true 1556 | }; 1557 | if (prevMonth.year() < year || prevMonth.year() === year && prevMonth.month() < month) { 1558 | classes.old = true; 1559 | } else if (prevMonth.year() > year || prevMonth.year() === year && prevMonth.month() > month) { 1560 | classes["new"] = true; 1561 | } 1562 | if (prevMonth.isSame((0, _moment2["default"])({ 1563 | y: _this.props.selectedDate.year(), 1564 | M: _this.props.selectedDate.month(), 1565 | d: _this.props.selectedDate.date() 1566 | }))) { 1567 | classes.active = true; 1568 | } 1569 | if (_this.props.showToday) { 1570 | if (prevMonth.isSame((0, _moment2["default"])(), "day")) { 1571 | classes.today = true; 1572 | } 1573 | } 1574 | if (minDate && prevMonth.isBefore(minDate) || maxDate && prevMonth.isAfter(maxDate)) { 1575 | classes.disabled = true; 1576 | } 1577 | if (_this.props.daysOfWeekDisabled.length > 0) classes.disabled = _this.props.daysOfWeekDisabled.indexOf(prevMonth.day()) !== -1; 1578 | cells.push(_react2["default"].createElement( 1579 | "td", 1580 | { className: (0, _classnames2["default"])(classes), key: prevMonth.month() + "-" + prevMonth.date(), onClick: _this.props.setSelectedDate }, 1581 | prevMonth.date() 1582 | )); 1583 | if (prevMonth.weekday() === (0, _moment2["default"])().endOf("week").weekday()) { 1584 | row = _react2["default"].createElement( 1585 | "tr", 1586 | { key: prevMonth.month() + "-" + prevMonth.date() }, 1587 | cells 1588 | ); 1589 | html.push(row); 1590 | cells = []; 1591 | } 1592 | prevMonth.add(1, "d"); 1593 | } 1594 | return html; 1595 | }; 1596 | } 1597 | 1598 | _createClass(DateTimePickerDays, [{ 1599 | key: "render", 1600 | value: function render() { 1601 | return _react2["default"].createElement( 1602 | "div", 1603 | { className: "datepicker-days", style: { display: "block" } }, 1604 | _react2["default"].createElement( 1605 | "table", 1606 | { className: "table-condensed" }, 1607 | _react2["default"].createElement( 1608 | "thead", 1609 | null, 1610 | _react2["default"].createElement( 1611 | "tr", 1612 | null, 1613 | _react2["default"].createElement( 1614 | "th", 1615 | { className: "prev", onClick: this.props.subtractMonth }, 1616 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-left" }) 1617 | ), 1618 | _react2["default"].createElement( 1619 | "th", 1620 | { className: "switch", colSpan: "5", onClick: this.props.showMonths }, 1621 | _moment2["default"].months()[this.props.viewDate.month()], 1622 | " ", 1623 | this.props.viewDate.year() 1624 | ), 1625 | _react2["default"].createElement( 1626 | "th", 1627 | { className: "next", onClick: this.props.addMonth }, 1628 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-right" }) 1629 | ) 1630 | ), 1631 | _react2["default"].createElement( 1632 | "tr", 1633 | null, 1634 | _react2["default"].createElement( 1635 | "th", 1636 | { className: "dow" }, 1637 | "Su" 1638 | ), 1639 | _react2["default"].createElement( 1640 | "th", 1641 | { className: "dow" }, 1642 | "Mo" 1643 | ), 1644 | _react2["default"].createElement( 1645 | "th", 1646 | { className: "dow" }, 1647 | "Tu" 1648 | ), 1649 | _react2["default"].createElement( 1650 | "th", 1651 | { className: "dow" }, 1652 | "We" 1653 | ), 1654 | _react2["default"].createElement( 1655 | "th", 1656 | { className: "dow" }, 1657 | "Th" 1658 | ), 1659 | _react2["default"].createElement( 1660 | "th", 1661 | { className: "dow" }, 1662 | "Fr" 1663 | ), 1664 | _react2["default"].createElement( 1665 | "th", 1666 | { className: "dow" }, 1667 | "Sa" 1668 | ) 1669 | ) 1670 | ), 1671 | _react2["default"].createElement( 1672 | "tbody", 1673 | null, 1674 | this.renderDays() 1675 | ) 1676 | ) 1677 | ); 1678 | } 1679 | }], [{ 1680 | key: "propTypes", 1681 | value: { 1682 | subtractMonth: _react.PropTypes.func.isRequired, 1683 | addMonth: _react.PropTypes.func.isRequired, 1684 | viewDate: _react.PropTypes.object.isRequired, 1685 | selectedDate: _react.PropTypes.object.isRequired, 1686 | showToday: _react.PropTypes.bool, 1687 | daysOfWeekDisabled: _react.PropTypes.array, 1688 | setSelectedDate: _react.PropTypes.func.isRequired, 1689 | showMonths: _react.PropTypes.func.isRequired, 1690 | minDate: _react.PropTypes.object, 1691 | maxDate: _react.PropTypes.object 1692 | }, 1693 | enumerable: true 1694 | }, { 1695 | key: "defaultProps", 1696 | value: { 1697 | showToday: true 1698 | }, 1699 | enumerable: true 1700 | }]); 1701 | 1702 | return DateTimePickerDays; 1703 | })(_react.Component); 1704 | 1705 | exports["default"] = DateTimePickerDays; 1706 | module.exports = exports["default"]; 1707 | 1708 | /***/ }, 1709 | /* 47 */ 1710 | /***/ function(module, exports, __webpack_require__) { 1711 | 1712 | "use strict"; 1713 | 1714 | var _get = __webpack_require__(2)["default"]; 1715 | 1716 | var _inherits = __webpack_require__(18)["default"]; 1717 | 1718 | var _createClass = __webpack_require__(27)["default"]; 1719 | 1720 | var _classCallCheck = __webpack_require__(30)["default"]; 1721 | 1722 | var _interopRequireDefault = __webpack_require__(37)["default"]; 1723 | 1724 | Object.defineProperty(exports, "__esModule", { 1725 | value: true 1726 | }); 1727 | 1728 | var _react = __webpack_require__(38); 1729 | 1730 | var _react2 = _interopRequireDefault(_react); 1731 | 1732 | var _classnames = __webpack_require__(40); 1733 | 1734 | var _classnames2 = _interopRequireDefault(_classnames); 1735 | 1736 | var _moment = __webpack_require__(39); 1737 | 1738 | var _moment2 = _interopRequireDefault(_moment); 1739 | 1740 | var DateTimePickerMonths = (function (_Component) { 1741 | _inherits(DateTimePickerMonths, _Component); 1742 | 1743 | function DateTimePickerMonths() { 1744 | var _this = this; 1745 | 1746 | _classCallCheck(this, DateTimePickerMonths); 1747 | 1748 | _get(Object.getPrototypeOf(DateTimePickerMonths.prototype), "constructor", this).apply(this, arguments); 1749 | 1750 | this.renderMonths = function () { 1751 | var classes, i, month, months, monthsShort; 1752 | month = _this.props.selectedDate.month(); 1753 | monthsShort = _moment2["default"].monthsShort(); 1754 | i = 0; 1755 | months = []; 1756 | while (i < 12) { 1757 | classes = { 1758 | month: true, 1759 | "active": i === month && _this.props.viewDate.year() === _this.props.selectedDate.year() 1760 | }; 1761 | months.push(_react2["default"].createElement( 1762 | "span", 1763 | { className: (0, _classnames2["default"])(classes), key: i, onClick: _this.props.setViewMonth }, 1764 | monthsShort[i] 1765 | )); 1766 | i++; 1767 | } 1768 | return months; 1769 | }; 1770 | } 1771 | 1772 | _createClass(DateTimePickerMonths, [{ 1773 | key: "render", 1774 | value: function render() { 1775 | return _react2["default"].createElement( 1776 | "div", 1777 | { className: "datepicker-months", style: { display: "block" } }, 1778 | _react2["default"].createElement( 1779 | "table", 1780 | { className: "table-condensed" }, 1781 | _react2["default"].createElement( 1782 | "thead", 1783 | null, 1784 | _react2["default"].createElement( 1785 | "tr", 1786 | null, 1787 | _react2["default"].createElement( 1788 | "th", 1789 | { className: "prev", onClick: this.props.subtractYear }, 1790 | "‹" 1791 | ), 1792 | _react2["default"].createElement( 1793 | "th", 1794 | { className: "switch", colSpan: "5", onClick: this.props.showYears }, 1795 | this.props.viewDate.year() 1796 | ), 1797 | _react2["default"].createElement( 1798 | "th", 1799 | { className: "next", onClick: this.props.addYear }, 1800 | "›" 1801 | ) 1802 | ) 1803 | ), 1804 | _react2["default"].createElement( 1805 | "tbody", 1806 | null, 1807 | _react2["default"].createElement( 1808 | "tr", 1809 | null, 1810 | _react2["default"].createElement( 1811 | "td", 1812 | { colSpan: "7" }, 1813 | this.renderMonths() 1814 | ) 1815 | ) 1816 | ) 1817 | ) 1818 | ); 1819 | } 1820 | }], [{ 1821 | key: "propTypes", 1822 | value: { 1823 | subtractYear: _react.PropTypes.func.isRequired, 1824 | addYear: _react.PropTypes.func.isRequired, 1825 | viewDate: _react.PropTypes.object.isRequired, 1826 | selectedDate: _react.PropTypes.object.isRequired, 1827 | showYears: _react.PropTypes.func.isRequired, 1828 | setViewMonth: _react.PropTypes.func.isRequired 1829 | }, 1830 | enumerable: true 1831 | }]); 1832 | 1833 | return DateTimePickerMonths; 1834 | })(_react.Component); 1835 | 1836 | exports["default"] = DateTimePickerMonths; 1837 | module.exports = exports["default"]; 1838 | 1839 | /***/ }, 1840 | /* 48 */ 1841 | /***/ function(module, exports, __webpack_require__) { 1842 | 1843 | "use strict"; 1844 | 1845 | var _get = __webpack_require__(2)["default"]; 1846 | 1847 | var _inherits = __webpack_require__(18)["default"]; 1848 | 1849 | var _createClass = __webpack_require__(27)["default"]; 1850 | 1851 | var _classCallCheck = __webpack_require__(30)["default"]; 1852 | 1853 | var _interopRequireDefault = __webpack_require__(37)["default"]; 1854 | 1855 | Object.defineProperty(exports, "__esModule", { 1856 | value: true 1857 | }); 1858 | 1859 | var _react = __webpack_require__(38); 1860 | 1861 | var _react2 = _interopRequireDefault(_react); 1862 | 1863 | var _classnames = __webpack_require__(40); 1864 | 1865 | var _classnames2 = _interopRequireDefault(_classnames); 1866 | 1867 | var DateTimePickerYears = (function (_Component) { 1868 | _inherits(DateTimePickerYears, _Component); 1869 | 1870 | function DateTimePickerYears() { 1871 | var _this = this; 1872 | 1873 | _classCallCheck(this, DateTimePickerYears); 1874 | 1875 | _get(Object.getPrototypeOf(DateTimePickerYears.prototype), "constructor", this).apply(this, arguments); 1876 | 1877 | this.renderYears = function () { 1878 | var classes, i, year, years; 1879 | years = []; 1880 | year = parseInt(_this.props.viewDate.year() / 10, 10) * 10; 1881 | year--; 1882 | i = -1; 1883 | while (i < 11) { 1884 | classes = { 1885 | year: true, 1886 | old: i === -1 | i === 10, 1887 | active: _this.props.selectedDate.year() === year 1888 | }; 1889 | years.push(_react2["default"].createElement( 1890 | "span", 1891 | { className: (0, _classnames2["default"])(classes), key: year, onClick: _this.props.setViewYear }, 1892 | year 1893 | )); 1894 | year++; 1895 | i++; 1896 | } 1897 | return years; 1898 | }; 1899 | } 1900 | 1901 | _createClass(DateTimePickerYears, [{ 1902 | key: "render", 1903 | value: function render() { 1904 | var year; 1905 | year = parseInt(this.props.viewDate.year() / 10, 10) * 10; 1906 | return _react2["default"].createElement( 1907 | "div", 1908 | { className: "datepicker-years", style: { display: "block" } }, 1909 | _react2["default"].createElement( 1910 | "table", 1911 | { className: "table-condensed" }, 1912 | _react2["default"].createElement( 1913 | "thead", 1914 | null, 1915 | _react2["default"].createElement( 1916 | "tr", 1917 | null, 1918 | _react2["default"].createElement( 1919 | "th", 1920 | { className: "prev", onClick: this.props.subtractDecade }, 1921 | "‹" 1922 | ), 1923 | _react2["default"].createElement( 1924 | "th", 1925 | { className: "switch", colSpan: "5" }, 1926 | year, 1927 | " - ", 1928 | year + 9 1929 | ), 1930 | _react2["default"].createElement( 1931 | "th", 1932 | { className: "next", onClick: this.props.addDecade }, 1933 | "›" 1934 | ) 1935 | ) 1936 | ), 1937 | _react2["default"].createElement( 1938 | "tbody", 1939 | null, 1940 | _react2["default"].createElement( 1941 | "tr", 1942 | null, 1943 | _react2["default"].createElement( 1944 | "td", 1945 | { colSpan: "7" }, 1946 | this.renderYears() 1947 | ) 1948 | ) 1949 | ) 1950 | ) 1951 | ); 1952 | } 1953 | }], [{ 1954 | key: "propTypes", 1955 | value: { 1956 | subtractDecade: _react.PropTypes.func.isRequired, 1957 | addDecade: _react.PropTypes.func.isRequired, 1958 | viewDate: _react.PropTypes.object.isRequired, 1959 | selectedDate: _react.PropTypes.object.isRequired, 1960 | setViewYear: _react.PropTypes.func.isRequired 1961 | }, 1962 | enumerable: true 1963 | }]); 1964 | 1965 | return DateTimePickerYears; 1966 | })(_react.Component); 1967 | 1968 | exports["default"] = DateTimePickerYears; 1969 | module.exports = exports["default"]; 1970 | 1971 | /***/ }, 1972 | /* 49 */ 1973 | /***/ function(module, exports, __webpack_require__) { 1974 | 1975 | "use strict"; 1976 | 1977 | var _get = __webpack_require__(2)["default"]; 1978 | 1979 | var _inherits = __webpack_require__(18)["default"]; 1980 | 1981 | var _createClass = __webpack_require__(27)["default"]; 1982 | 1983 | var _classCallCheck = __webpack_require__(30)["default"]; 1984 | 1985 | var _extends = __webpack_require__(31)["default"]; 1986 | 1987 | var _interopRequireDefault = __webpack_require__(37)["default"]; 1988 | 1989 | Object.defineProperty(exports, "__esModule", { 1990 | value: true 1991 | }); 1992 | 1993 | var _react = __webpack_require__(38); 1994 | 1995 | var _react2 = _interopRequireDefault(_react); 1996 | 1997 | var _DateTimePickerMinutes = __webpack_require__(50); 1998 | 1999 | var _DateTimePickerMinutes2 = _interopRequireDefault(_DateTimePickerMinutes); 2000 | 2001 | var _DateTimePickerHours = __webpack_require__(52); 2002 | 2003 | var _DateTimePickerHours2 = _interopRequireDefault(_DateTimePickerHours); 2004 | 2005 | var _ConstantsJs = __webpack_require__(51); 2006 | 2007 | var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); 2008 | 2009 | var DateTimePickerTime = (function (_Component) { 2010 | _inherits(DateTimePickerTime, _Component); 2011 | 2012 | function DateTimePickerTime() { 2013 | var _this = this; 2014 | 2015 | _classCallCheck(this, DateTimePickerTime); 2016 | 2017 | _get(Object.getPrototypeOf(DateTimePickerTime.prototype), "constructor", this).apply(this, arguments); 2018 | 2019 | this.state = { 2020 | minutesDisplayed: false, 2021 | hoursDisplayed: false 2022 | }; 2023 | 2024 | this.goBack = function () { 2025 | return _this.setState({ 2026 | minutesDisplayed: false, 2027 | hoursDisplayed: false 2028 | }); 2029 | }; 2030 | 2031 | this.showMinutes = function () { 2032 | return _this.setState({ 2033 | minutesDisplayed: true 2034 | }); 2035 | }; 2036 | 2037 | this.showHours = function () { 2038 | return _this.setState({ 2039 | hoursDisplayed: true 2040 | }); 2041 | }; 2042 | 2043 | this.renderMinutes = function () { 2044 | if (_this.state.minutesDisplayed) { 2045 | return _react2["default"].createElement(_DateTimePickerMinutes2["default"], _extends({}, _this.props, { onSwitch: _this.goBack })); 2046 | } else { 2047 | return null; 2048 | } 2049 | }; 2050 | 2051 | this.renderHours = function () { 2052 | if (_this.state.hoursDisplayed) { 2053 | return _react2["default"].createElement(_DateTimePickerHours2["default"], _extends({}, _this.props, { onSwitch: _this.goBack })); 2054 | } else { 2055 | return null; 2056 | } 2057 | }; 2058 | 2059 | this.renderPicker = function () { 2060 | if (!_this.state.minutesDisplayed && !_this.state.hoursDisplayed) { 2061 | return _react2["default"].createElement( 2062 | "div", 2063 | { className: "timepicker-picker" }, 2064 | _react2["default"].createElement( 2065 | "table", 2066 | { className: "table-condensed" }, 2067 | _react2["default"].createElement( 2068 | "tbody", 2069 | null, 2070 | _react2["default"].createElement( 2071 | "tr", 2072 | null, 2073 | _react2["default"].createElement( 2074 | "td", 2075 | null, 2076 | _react2["default"].createElement( 2077 | "a", 2078 | { className: "btn", onClick: _this.props.addHour }, 2079 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-up" }) 2080 | ) 2081 | ), 2082 | _react2["default"].createElement("td", { className: "separator" }), 2083 | _react2["default"].createElement( 2084 | "td", 2085 | null, 2086 | _react2["default"].createElement( 2087 | "a", 2088 | { className: "btn", onClick: _this.props.addMinute }, 2089 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-up" }) 2090 | ) 2091 | ), 2092 | _react2["default"].createElement("td", { className: "separator" }) 2093 | ), 2094 | _react2["default"].createElement( 2095 | "tr", 2096 | null, 2097 | _react2["default"].createElement( 2098 | "td", 2099 | null, 2100 | _react2["default"].createElement( 2101 | "span", 2102 | { className: "timepicker-hour", onClick: _this.showHours }, 2103 | _this.props.selectedDate.format("h") 2104 | ) 2105 | ), 2106 | _react2["default"].createElement( 2107 | "td", 2108 | { className: "separator" }, 2109 | ":" 2110 | ), 2111 | _react2["default"].createElement( 2112 | "td", 2113 | null, 2114 | _react2["default"].createElement( 2115 | "span", 2116 | { className: "timepicker-minute", onClick: _this.showMinutes }, 2117 | _this.props.selectedDate.format("mm") 2118 | ) 2119 | ), 2120 | _react2["default"].createElement("td", { className: "separator" }), 2121 | _react2["default"].createElement( 2122 | "td", 2123 | null, 2124 | _react2["default"].createElement( 2125 | "button", 2126 | { className: "btn btn-primary", onClick: _this.props.togglePeriod, type: "button" }, 2127 | _this.props.selectedDate.format("A") 2128 | ) 2129 | ) 2130 | ), 2131 | _react2["default"].createElement( 2132 | "tr", 2133 | null, 2134 | _react2["default"].createElement( 2135 | "td", 2136 | null, 2137 | _react2["default"].createElement( 2138 | "a", 2139 | { className: "btn", onClick: _this.props.subtractHour }, 2140 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-down" }) 2141 | ) 2142 | ), 2143 | _react2["default"].createElement("td", { className: "separator" }), 2144 | _react2["default"].createElement( 2145 | "td", 2146 | null, 2147 | _react2["default"].createElement( 2148 | "a", 2149 | { className: "btn", onClick: _this.props.subtractMinute }, 2150 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-chevron-down" }) 2151 | ) 2152 | ), 2153 | _react2["default"].createElement("td", { className: "separator" }) 2154 | ) 2155 | ) 2156 | ) 2157 | ); 2158 | } else { 2159 | return ""; 2160 | } 2161 | }; 2162 | } 2163 | 2164 | _createClass(DateTimePickerTime, [{ 2165 | key: "render", 2166 | value: function render() { 2167 | return _react2["default"].createElement( 2168 | "div", 2169 | { className: "timepicker" }, 2170 | this.renderPicker(), 2171 | this.renderHours(), 2172 | this.renderMinutes() 2173 | ); 2174 | } 2175 | }], [{ 2176 | key: "propTypes", 2177 | value: { 2178 | setSelectedHour: _react.PropTypes.func.isRequired, 2179 | setSelectedMinute: _react.PropTypes.func.isRequired, 2180 | subtractHour: _react.PropTypes.func.isRequired, 2181 | addHour: _react.PropTypes.func.isRequired, 2182 | subtractMinute: _react.PropTypes.func.isRequired, 2183 | addMinute: _react.PropTypes.func.isRequired, 2184 | viewDate: _react.PropTypes.object.isRequired, 2185 | selectedDate: _react.PropTypes.object.isRequired, 2186 | togglePeriod: _react.PropTypes.func.isRequired, 2187 | mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]) 2188 | }, 2189 | enumerable: true 2190 | }]); 2191 | 2192 | return DateTimePickerTime; 2193 | })(_react.Component); 2194 | 2195 | exports["default"] = DateTimePickerTime; 2196 | 2197 | module.exports = DateTimePickerTime; 2198 | module.exports = exports["default"]; 2199 | 2200 | /***/ }, 2201 | /* 50 */ 2202 | /***/ function(module, exports, __webpack_require__) { 2203 | 2204 | "use strict"; 2205 | 2206 | var _get = __webpack_require__(2)["default"]; 2207 | 2208 | var _inherits = __webpack_require__(18)["default"]; 2209 | 2210 | var _createClass = __webpack_require__(27)["default"]; 2211 | 2212 | var _classCallCheck = __webpack_require__(30)["default"]; 2213 | 2214 | var _interopRequireDefault = __webpack_require__(37)["default"]; 2215 | 2216 | Object.defineProperty(exports, "__esModule", { 2217 | value: true 2218 | }); 2219 | 2220 | var _react = __webpack_require__(38); 2221 | 2222 | var _react2 = _interopRequireDefault(_react); 2223 | 2224 | var _ConstantsJs = __webpack_require__(51); 2225 | 2226 | var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); 2227 | 2228 | var DateTimePickerMinutes = (function (_Component) { 2229 | _inherits(DateTimePickerMinutes, _Component); 2230 | 2231 | function DateTimePickerMinutes() { 2232 | var _this = this; 2233 | 2234 | _classCallCheck(this, DateTimePickerMinutes); 2235 | 2236 | _get(Object.getPrototypeOf(DateTimePickerMinutes.prototype), "constructor", this).apply(this, arguments); 2237 | 2238 | this.renderSwitchButton = function () { 2239 | return _this.props.mode === _ConstantsJs2["default"].MODE_TIME ? _react2["default"].createElement( 2240 | "ul", 2241 | { className: "list-unstyled" }, 2242 | _react2["default"].createElement( 2243 | "li", 2244 | null, 2245 | _react2["default"].createElement( 2246 | "span", 2247 | { className: "btn picker-switch", onClick: _this.props.onSwitch, style: { width: "100%" } }, 2248 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-time" }) 2249 | ) 2250 | ) 2251 | ) : null; 2252 | }; 2253 | } 2254 | 2255 | _createClass(DateTimePickerMinutes, [{ 2256 | key: "render", 2257 | value: function render() { 2258 | return _react2["default"].createElement( 2259 | "div", 2260 | { className: "timepicker-minutes", "data-action": "selectMinute", style: { display: "block" } }, 2261 | this.renderSwitchButton(), 2262 | _react2["default"].createElement( 2263 | "table", 2264 | { className: "table-condensed" }, 2265 | _react2["default"].createElement( 2266 | "tbody", 2267 | null, 2268 | _react2["default"].createElement( 2269 | "tr", 2270 | null, 2271 | _react2["default"].createElement( 2272 | "td", 2273 | { className: "minute", onClick: this.props.setSelectedMinute }, 2274 | "00" 2275 | ), 2276 | _react2["default"].createElement( 2277 | "td", 2278 | { className: "minute", onClick: this.props.setSelectedMinute }, 2279 | "05" 2280 | ), 2281 | _react2["default"].createElement( 2282 | "td", 2283 | { className: "minute", onClick: this.props.setSelectedMinute }, 2284 | "10" 2285 | ), 2286 | _react2["default"].createElement( 2287 | "td", 2288 | { className: "minute", onClick: this.props.setSelectedMinute }, 2289 | "15" 2290 | ) 2291 | ), 2292 | _react2["default"].createElement( 2293 | "tr", 2294 | null, 2295 | _react2["default"].createElement( 2296 | "td", 2297 | { className: "minute", onClick: this.props.setSelectedMinute }, 2298 | "20" 2299 | ), 2300 | _react2["default"].createElement( 2301 | "td", 2302 | { className: "minute", onClick: this.props.setSelectedMinute }, 2303 | "25" 2304 | ), 2305 | _react2["default"].createElement( 2306 | "td", 2307 | { className: "minute", onClick: this.props.setSelectedMinute }, 2308 | "30" 2309 | ), 2310 | _react2["default"].createElement( 2311 | "td", 2312 | { className: "minute", onClick: this.props.setSelectedMinute }, 2313 | "35" 2314 | ) 2315 | ), 2316 | _react2["default"].createElement( 2317 | "tr", 2318 | null, 2319 | _react2["default"].createElement( 2320 | "td", 2321 | { className: "minute", onClick: this.props.setSelectedMinute }, 2322 | "40" 2323 | ), 2324 | _react2["default"].createElement( 2325 | "td", 2326 | { className: "minute", onClick: this.props.setSelectedMinute }, 2327 | "45" 2328 | ), 2329 | _react2["default"].createElement( 2330 | "td", 2331 | { className: "minute", onClick: this.props.setSelectedMinute }, 2332 | "50" 2333 | ), 2334 | _react2["default"].createElement( 2335 | "td", 2336 | { className: "minute", onClick: this.props.setSelectedMinute }, 2337 | "55" 2338 | ) 2339 | ) 2340 | ) 2341 | ) 2342 | ); 2343 | } 2344 | }], [{ 2345 | key: "propTypes", 2346 | value: { 2347 | setSelectedMinute: _react.PropTypes.func.isRequired, 2348 | onSwitch: _react.PropTypes.func.isRequired, 2349 | mode: _react.PropTypes.string.isRequired 2350 | }, 2351 | enumerable: true 2352 | }]); 2353 | 2354 | return DateTimePickerMinutes; 2355 | })(_react.Component); 2356 | 2357 | exports["default"] = DateTimePickerMinutes; 2358 | module.exports = exports["default"]; 2359 | 2360 | /***/ }, 2361 | /* 51 */ 2362 | /***/ function(module, exports) { 2363 | 2364 | "use strict"; 2365 | 2366 | module.exports = { 2367 | MODE_DATE: "date", 2368 | MODE_DATETIME: "datetime", 2369 | MODE_TIME: "time", 2370 | 2371 | SIZE_SMALL: "sm", 2372 | SIZE_MEDIUM: "md", 2373 | SIZE_LARGE: "lg" 2374 | }; 2375 | 2376 | /***/ }, 2377 | /* 52 */ 2378 | /***/ function(module, exports, __webpack_require__) { 2379 | 2380 | "use strict"; 2381 | 2382 | var _get = __webpack_require__(2)["default"]; 2383 | 2384 | var _inherits = __webpack_require__(18)["default"]; 2385 | 2386 | var _createClass = __webpack_require__(27)["default"]; 2387 | 2388 | var _classCallCheck = __webpack_require__(30)["default"]; 2389 | 2390 | var _interopRequireDefault = __webpack_require__(37)["default"]; 2391 | 2392 | Object.defineProperty(exports, "__esModule", { 2393 | value: true 2394 | }); 2395 | 2396 | var _react = __webpack_require__(38); 2397 | 2398 | var _react2 = _interopRequireDefault(_react); 2399 | 2400 | var _ConstantsJs = __webpack_require__(51); 2401 | 2402 | var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); 2403 | 2404 | var DateTimePickerHours = (function (_Component) { 2405 | _inherits(DateTimePickerHours, _Component); 2406 | 2407 | function DateTimePickerHours() { 2408 | var _this = this; 2409 | 2410 | _classCallCheck(this, DateTimePickerHours); 2411 | 2412 | _get(Object.getPrototypeOf(DateTimePickerHours.prototype), "constructor", this).apply(this, arguments); 2413 | 2414 | this.renderSwitchButton = function () { 2415 | return _this.props.mode === _ConstantsJs2["default"].MODE_TIME ? _react2["default"].createElement( 2416 | "ul", 2417 | { className: "list-unstyled" }, 2418 | _react2["default"].createElement( 2419 | "li", 2420 | null, 2421 | _react2["default"].createElement( 2422 | "span", 2423 | { className: "btn picker-switch", onClick: _this.props.onSwitch, style: { width: "100%" } }, 2424 | _react2["default"].createElement("span", { className: "glyphicon glyphicon-time" }) 2425 | ) 2426 | ) 2427 | ) : null; 2428 | }; 2429 | } 2430 | 2431 | _createClass(DateTimePickerHours, [{ 2432 | key: "render", 2433 | value: function render() { 2434 | return _react2["default"].createElement( 2435 | "div", 2436 | { className: "timepicker-hours", "data-action": "selectHour", style: { display: "block" } }, 2437 | this.renderSwitchButton(), 2438 | _react2["default"].createElement( 2439 | "table", 2440 | { className: "table-condensed" }, 2441 | _react2["default"].createElement( 2442 | "tbody", 2443 | null, 2444 | _react2["default"].createElement( 2445 | "tr", 2446 | null, 2447 | _react2["default"].createElement( 2448 | "td", 2449 | { className: "hour", onClick: this.props.setSelectedHour }, 2450 | "01" 2451 | ), 2452 | _react2["default"].createElement( 2453 | "td", 2454 | { className: "hour", onClick: this.props.setSelectedHour }, 2455 | "02" 2456 | ), 2457 | _react2["default"].createElement( 2458 | "td", 2459 | { className: "hour", onClick: this.props.setSelectedHour }, 2460 | "03" 2461 | ), 2462 | _react2["default"].createElement( 2463 | "td", 2464 | { className: "hour", onClick: this.props.setSelectedHour }, 2465 | "04" 2466 | ) 2467 | ), 2468 | _react2["default"].createElement( 2469 | "tr", 2470 | null, 2471 | _react2["default"].createElement( 2472 | "td", 2473 | { className: "hour", onClick: this.props.setSelectedHour }, 2474 | "05" 2475 | ), 2476 | _react2["default"].createElement( 2477 | "td", 2478 | { className: "hour", onClick: this.props.setSelectedHour }, 2479 | "06" 2480 | ), 2481 | _react2["default"].createElement( 2482 | "td", 2483 | { className: "hour", onClick: this.props.setSelectedHour }, 2484 | "07" 2485 | ), 2486 | _react2["default"].createElement( 2487 | "td", 2488 | { className: "hour", onClick: this.props.setSelectedHour }, 2489 | "08" 2490 | ) 2491 | ), 2492 | _react2["default"].createElement( 2493 | "tr", 2494 | null, 2495 | _react2["default"].createElement( 2496 | "td", 2497 | { className: "hour", onClick: this.props.setSelectedHour }, 2498 | "09" 2499 | ), 2500 | _react2["default"].createElement( 2501 | "td", 2502 | { className: "hour", onClick: this.props.setSelectedHour }, 2503 | "10" 2504 | ), 2505 | _react2["default"].createElement( 2506 | "td", 2507 | { className: "hour", onClick: this.props.setSelectedHour }, 2508 | "11" 2509 | ), 2510 | _react2["default"].createElement( 2511 | "td", 2512 | { className: "hour", onClick: this.props.setSelectedHour }, 2513 | "12" 2514 | ) 2515 | ), 2516 | _react2["default"].createElement( 2517 | "tr", 2518 | null, 2519 | _react2["default"].createElement( 2520 | "td", 2521 | { className: "hour", onClick: this.props.setSelectedHour }, 2522 | "13" 2523 | ), 2524 | _react2["default"].createElement( 2525 | "td", 2526 | { className: "hour", onClick: this.props.setSelectedHour }, 2527 | "14" 2528 | ), 2529 | _react2["default"].createElement( 2530 | "td", 2531 | { className: "hour", onClick: this.props.setSelectedHour }, 2532 | "15" 2533 | ), 2534 | _react2["default"].createElement( 2535 | "td", 2536 | { className: "hour", onClick: this.props.setSelectedHour }, 2537 | "16" 2538 | ) 2539 | ), 2540 | _react2["default"].createElement( 2541 | "tr", 2542 | null, 2543 | _react2["default"].createElement( 2544 | "td", 2545 | { className: "hour", onClick: this.props.setSelectedHour }, 2546 | "17" 2547 | ), 2548 | _react2["default"].createElement( 2549 | "td", 2550 | { className: "hour", onClick: this.props.setSelectedHour }, 2551 | "18" 2552 | ), 2553 | _react2["default"].createElement( 2554 | "td", 2555 | { className: "hour", onClick: this.props.setSelectedHour }, 2556 | "19" 2557 | ), 2558 | _react2["default"].createElement( 2559 | "td", 2560 | { className: "hour", onClick: this.props.setSelectedHour }, 2561 | "20" 2562 | ) 2563 | ), 2564 | _react2["default"].createElement( 2565 | "tr", 2566 | null, 2567 | _react2["default"].createElement( 2568 | "td", 2569 | { className: "hour", onClick: this.props.setSelectedHour }, 2570 | "21" 2571 | ), 2572 | _react2["default"].createElement( 2573 | "td", 2574 | { className: "hour", onClick: this.props.setSelectedHour }, 2575 | "22" 2576 | ), 2577 | _react2["default"].createElement( 2578 | "td", 2579 | { className: "hour", onClick: this.props.setSelectedHour }, 2580 | "23" 2581 | ), 2582 | _react2["default"].createElement( 2583 | "td", 2584 | { className: "hour", onClick: this.props.setSelectedHour }, 2585 | "24" 2586 | ) 2587 | ) 2588 | ) 2589 | ) 2590 | ); 2591 | } 2592 | }], [{ 2593 | key: "propTypes", 2594 | value: { 2595 | setSelectedHour: _react.PropTypes.func.isRequired, 2596 | onSwitch: _react.PropTypes.func.isRequired, 2597 | mode: _react.PropTypes.string.isRequired 2598 | }, 2599 | enumerable: true 2600 | }]); 2601 | 2602 | return DateTimePickerHours; 2603 | })(_react.Component); 2604 | 2605 | exports["default"] = DateTimePickerHours; 2606 | module.exports = exports["default"]; 2607 | 2608 | /***/ } 2609 | /******/ ]) 2610 | }); 2611 | ; --------------------------------------------------------------------------------