parent: 088e511e | patch | commit | ignore whitespace
Jeremy Liberman
2017-07-24 6daddbaf190461d54422a311d18f782830ff6dd7 
Create proper demo application

The demo app is just a basic create-react-app app with some customizable examples
showing off how react-datetime can be used.

Deploy the demo with `npm run deploy`

Access the demo (after deploying) from https://YouCanBookMe.github.io/react-datetime
14 files added
20517 ■■■■■ changed files
demo/.gitignore 21 ●●●●● patch | view | raw | blame | history
demo/README.md 32 ●●●●● patch | view | raw | blame | history
demo/package-lock.json 7423 ●●●●● patch | view | raw | blame | history
demo/package.json 24 ●●●●● patch | view | raw | blame | history
demo/public/favicon.ico patch | view | raw | blame | history
demo/public/index.html 42 ●●●●● patch | view | raw | blame | history
demo/public/manifest.json 15 ●●●●● patch | view | raw | blame | history
demo/src/App.js 46 ●●●●● patch | view | raw | blame | history
demo/src/CustomizableExample.js 104 ●●●●● patch | view | raw | blame | history
demo/src/OpenExample.js 16 ●●●●● patch | view | raw | blame | history
demo/src/ValidatedExample.js 21 ●●●●● patch | view | raw | blame | history
demo/src/index.js 5 ●●●●● patch | view | raw | blame | history
demo/yarn.lock 6401 ●●●●● patch | view | raw | blame | history
package-lock.json 6367 ●●●●● patch | view | raw | blame | history 
 demo/.gitignore


New file


@@ -0,0 +1,21 @@


# See https://help.github.com/ignore-files/ for more about ignoring files.




# dependencies


/node_modules




# testing


/coverage




# production


/build




# misc


.DS_Store


.env.local


.env.development.local


.env.test.local


.env.production.local




npm-debug.log*


yarn-debug.log*


yarn-error.log*




 demo/README.md


New file


@@ -0,0 +1,32 @@


# react-datetime demo app




[Demo](https://YouCanBookMe.github.io/react-datetime)




#### How to Start




```bash


npm start


```




#### How to Deploy




Run "deploy" from the demo directory:




```bash


  cd ~/react-datetime/demo


  npm run deploy


```




#### How to Run the demo with your local changes




If you are working on some change and you want to use the demo to test them out, you have to link your local "react-datetime" directory to the demo:




```bash


  cd ~/react-datetime


  npm link




  cd demo


  npm link react-datetime




  npm start


```




 demo/package-lock.json


New file


Diff too large




 demo/package.json


New file


@@ -0,0 +1,24 @@


{


  "name": "demo",


  "version": "0.1.0",


  "private": true,


  "homepage": "https://YouCanBookMe.github.io/react-datetime",


  "devDependencies": {


    "react-scripts": "1.0.10"


  },


  "dependencies": {


    "gh-pages": "^1.0.0",


    "moment": "^2.18.1",


    "react": "^15.6.1",


    "react-datetime": "^2.8.10",


    "react-dom": "^15.6.1"


  },


  "scripts": {


    "predeploy": "npm run build",


    "deploy": "gh-pages -d build",


    "start": "react-scripts start",


    "build": "react-scripts build",


    "test": "react-scripts test --env=jsdom",


    "eject": "react-scripts eject"


  }


}




 demo/public/favicon.ico




 demo/public/index.html


New file


@@ -0,0 +1,42 @@


<!doctype html>


<html lang="en">


  <head>


    <meta charset="utf-8">


    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <meta name="theme-color" content="#000000">


    <!--


      manifest.json provides metadata used when your web app is added to the


      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/


    -->


    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">


    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">


    <!--


      Notice the use of %PUBLIC_URL% in the tags above.


      It will be replaced with the URL of the `public` folder during the build.


      Only files inside the `public` folder can be referenced from the HTML.




      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will


      work correctly both with client-side routing and a non-root public URL.


      Learn how to configure a non-root public URL by running `npm run build`.


    -->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




    <title>react-datetime demo</title>


  </head>


  <body>


    <noscript>


      You need to enable JavaScript to run this app.


    </noscript>


    <div id="root"></div>


    <!--


      This HTML file is a template.


      If you open it directly in the browser, you will see an empty page.




      You can add webfonts, meta tags, or analytics to this file.


      The build step will place the bundled scripts into the <body> tag.




      To begin the development, run `npm start` or `yarn start`.


      To create a production bundle, use `npm run build` or `yarn build`.


    -->


  </body>


</html>




 demo/public/manifest.json


New file


@@ -0,0 +1,15 @@


{


  "short_name": "React App",


  "name": "Create React App Sample",


  "icons": [


    {


      "src": "favicon.ico",


      "sizes": "192x192",


      "type": "image/png"


    }


  ],


  "start_url": "./index.html",


  "display": "standalone",


  "theme_color": "#000000",


  "background_color": "#ffffff"


}




 demo/src/App.js


New file


@@ -0,0 +1,46 @@


import React, { Component } from 'react'


import 'react-datetime/css/react-datetime.css'




import CustomizableExample from './CustomizableExample'


import OpenExample from './OpenExample'


import ValidatedExample from './ValidatedExample'




export default class App extends Component {


  render() {


    return (


      <div>


        <nav className="navbar navbar-inverse navbar-static-top">


          <div className="container">


            <a


              className="navbar-brand"


              href="https://github.com/YouCanBookMe/react-datetime"


              target="_blank"


              rel="noopener noreferrer"


            >react-datetime</a>


          </div>


        </nav>




        <div className="container">


          <div className="jumbotron">


            <h2>react-datetime</h2>


            <p>


              A lightweight but complete datetime picker react component.


            </p>


          </div>




          <div className="row">


            <div className="col-xs-4">


              <CustomizableExample />


            </div>


            <div className="col-xs-4">


              <OpenExample />


            </div>


            <div className="col-xs-4">


              <ValidatedExample />


            </div>


          </div>


        </div>


      </div>


    );


  }


}




 demo/src/CustomizableExample.js


New file


@@ -0,0 +1,104 @@


import React, { Component } from 'react'


import DateTime from 'react-datetime'




export default class CustomizableExample extends Component {


  state = {


    viewMode: 'days',


    dateFormat: 'MM/DD/YYYY',


    timeFormat: 'HH:mm A',


    input: true,


    utc: false,


    closeOnSelect: false,


    closeOnTab: true,


  }




  render() {


    const Select = ({name, children}) => (


      <div className="form-group">


        <label className="control-label col-xs-6">


          {name}


        </label>




        <div className="col-xs-6">


          <select


            className="form-control"


            value={this.state[name]}


            onChange={e => this.setState({ [name]: e.target.value })}


          >


            {children}


          </select>


        </div>


      </div>


    )




    const Checkbox = ({name}) => (


      <div className="form-group">


        <label className="control-label col-xs-6">


          {name}


        </label>




        <div className="col-xs-6">


          <input


            type="checkbox"


            checked={this.state[name]}


            onChange={e => this.setState({ [name]: e.target.checked })}


          />


        </div>


      </div>


    )




    return (


      <div className="form-horizontal">


        <h2>Customization props</h2>


        <p>


          Try out various configuration options and see how they affect the component.


        </p>




        <DateTime


          defaultValue={new Date()}


          onChange={console.log}


          {...this.state}


        />




        <hr />




        <Select name="dateFormat">


          <option value="">false</option>


          <option>YYYY-MM-DD</option>


          <option>MM/DD/YYYY</option>


          <option>DD.MM.YYYY</option>


          <option>MM-DD</option>


          <option>MMMM</option>


          <option>YYYY/MM</option>


          <option>YYYY</option>


          <option>L</option>


          <option>LL</option>


        </Select>




        <Select name="timeFormat">


          <option value="">false</option>


          <option>HH:mm A</option>


          <option>HH:mm:ss</option>


          <option>HH:mm:SSS</option>


          <option>hmm</option>


          <option>HH:mm Z</option>


          <option>LT</option>


          <option>LTS</option>


        </Select>




        <Select name="viewMode">


          <option>years</option>


          <option>months</option>


          <option>days</option>


          <option>time</option>


        </Select>




        <Checkbox name="utc" />




        <Checkbox name="closeOnSelect" />




        <Checkbox name="closeOnTab" />


      </div>


    )


  }


}




 demo/src/OpenExample.js


New file


@@ -0,0 +1,16 @@


import React, { Component } from 'react'


import DateTime from 'react-datetime'




export default class OpenExample extends Component {


  render() {


    return (


      <div>


        <h2>open</h2>


        <p>


          The "open" prop is only consumed when the component is mounted. Useful for embedding inside your own popover components.


        </p>


        <DateTime open input={false} onChange={console.log} />


      </div>


    )


  }


}




 demo/src/ValidatedExample.js


New file


@@ -0,0 +1,21 @@


import React, { Component } from 'react'


import DateTime from 'react-datetime'




export default class ValidatedExample extends Component {


  render() {


    return (


      <div>


        <h2>isValidDate</h2>


        <p>


          You can use "isValidDate" to disable all dates after last month.


        </p>


        <DateTime


          viewMode='months'


          dateFormat='MMMM'


          isValidDate={current => current.isBefore(DateTime.moment().startOf('month'))}


          onChange={console.log}


        />


      </div>


    )


  }


}




 demo/src/index.js


New file


@@ -0,0 +1,5 @@


import React from 'react';


import ReactDOM from 'react-dom';


import App from './App';




ReactDOM.render(<App />, document.getElementById('root'));




 demo/yarn.lock


New file


Diff too large




 package-lock.json


New file


Diff too large