react-datetime custom appearance demo

react-datetime-custom-appearance-demo.markdown

react-datetime custom appearance demo

A Pen by Simon on CodePen.

License.

script.js

var renderers = {
  renderDay: function( props, currentDate, selectedDate ){
    return <td {...props}>{ '0' + currentDate.date() }</td>;
  },
  renderMonth: function( props, month, year, selectedDate){
    return <td {...props}>{ month }</td>;
  },
  renderYear: function( props, year, selectedDate ){
    return <td {...props}>{ year % 100 }</td>;
  }
}

React.render(
  <div>
    <Datetime input={false}
            renderDay={ renderers.renderDay } 
            renderMonth={ renderers.renderMonth } 
            renderYear={ renderers.renderYear } />
  </div>,
  document.body
);

scripts

<script src="https://codepen.io/chriscoyier/pen/yIgqi.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://rawgit.com/arqex/react-datetime/master/dist/react-datetime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.js"></script>

styles

<link href="https://rawgit.com/arqex/react-datetime/master/css/react-datetime.css" rel="stylesheet" />