const React = require('react');
const moment = require('moment');

const dateShape = React.PropTypes.oneOfType([
    React.PropTypes.number,
    React.PropTypes.string,
    React.PropTypes.instanceOf(Date)
]);

const DateSpan =  React.createClass({
    propTypes: {
        date:            dateShape.isRequired,
        refreshInterval: React.PropTypes.number,
        format:          React.PropTypes.string
    },

    contextTypes: {
        now: dateShape
    },

    getDefaultProps: function() {
        return {
            format:          '',
            refreshInterval: 10*1000
        };
    },

    getInitialState: function() {
        return {
            now: 0
        };
    },

    tick: function() {
        this.setState({
            now: Date.now()
        });
    },

    componentDidMount: function() {
        let { refreshInterval, format } = this.props;

        if (format) {
            return;
        }

        this.interval = setInterval(this.tick, refreshInterval);
    },

    componentWillUnmount: function() {
        if (!this.interval) {
            return;
        }

        clearInterval(this.interval);
    },

    render: function() {
        let { date, format } = this.props;
        let now = this.state.now || this.context.now;
        let displayDate;

        // Apply formating if provided
        if (format) {
            displayDate = moment(date).format(format);
        } else {
            displayDate = moment(date).from(now);
        }

        return <span>{displayDate}</span>;
    }
});

const DateContext =  React.createClass({
    propTypes: {
        children: React.PropTypes.node,
        now:      dateShape
    },

    childContextTypes: {
        now: dateShape
    },

    getChildContext: function() {
        return {
            now: this.props.now
        };
    },

    render: function() {
        return (React.Children.only(this.props.children));
    }
});

module.exports = DateSpan;
module.exports.shape = dateShape;
module.exports.Context = DateContext;

@@ -251,32 +251,59 @@
    propTypes: %7B%0A
+        // Date to display%0A
         date:   
@@ -341,31 +341,66 @@
         
-refreshInterval
+// Interval to refresh the display%0A        refresh
 : React.
@@ -413,24 +413,53 @@
 pes.number,%0A
+        // Format for output%0A
         form
@@ -493,16 +493,102 @@
 s.string
+,%0A        // Is the date in UTC or Local%0A        utc:             React.PropTypes.bool
 %0A    %7D,%0A
@@ -709,23 +709,16 @@
  format:
-       
    '',%0A 
@@ -728,24 +728,17 @@
         
-refreshI
+i
 nterval:
@@ -745,16 +745,44 @@
  10*1000
+,%0A            utc:      true
 %0A       
@@ -1034,24 +1034,16 @@
  refresh
-Interval
 , format
@@ -1167,24 +1167,16 @@
  refresh
-Interval
 );%0A    %7D
@@ -1367,32 +1367,37 @@
 t %7B date, format
+, utc
  %7D = this.props;
@@ -1477,16 +1477,159 @@
 yDate;%0A%0A
+        // Parse the date%0A        if (utc) %7B%0A            date = moment.utc(date);%0A        %7D else %7B%0A            date = moment(date);%0A        %7D%0A%0A
         
@@ -1707,28 +1707,20 @@
 yDate = 
-moment(
 date
-)
 .format(
@@ -1771,28 +1771,20 @@
 yDate = 
-moment(
 date
-)
 .from(no

Use UTC date by default in DateSpan