feat(Datetime): add component

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -25,7 +25,7 @@ Extra.propTypes = {
   title: PropTypes.node,
 }
 
-const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name)
+const getTagType = tag => _.get(tag, 'type.type') === 'AllLiteral' ? 'any' : _.get(tag, 'type.name')
 
 /**
  * Displays a table of a Component's PropTypes.

docs/app/Examples/addons/Datetime/Content/DatetimeExampleFormatters.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+// IE or standard language
+const locale = navigator.userLanguage || navigator.language
+
+// Locale formatted date
+const dateFormatter = date => date.toLocaleDateString(locale)
+
+// Locale formatted 12-hour time with seconds removed
+const timeFormatter = date => {
+  return date.toLocaleTimeString(locale, { hour12: true }).replace(/:\d+ /, ' ')
+}
+
+const DatetimeExampleFormatters = () => (
+  <Datetime
+    time
+    defaultValue={new Date()}
+    dateFormatter={dateFormatter}
+    timeFormatter={timeFormatter}
+  />
+)
+
+export default DatetimeExampleFormatters

docs/app/Examples/addons/Datetime/Content/Time24HourExample.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const Time24HourExample = () => (
+  <Datetime
+    time
+    icon='time'
+    date={false}
+    defaultValue={new Date()}
+    onChange={(e, {value}) => {
+      console.log("Time selected: ", value)
+    }}
+    hourFormatter={(date) => {
+        const options = { hour12: false }
+        return date.toLocaleTimeString('en-US', options).substr(0, 5)
+    }}
+    timeFormatter={(date) => {
+        const options = { hour12: false }
+        return date.toLocaleTimeString('en-US', options).substr(0, 5)
+    }}
+  />
+)
+
+export default Time24HourExample

docs/app/Examples/addons/Datetime/Content/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeContentExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Using custom Date and Time formatters'
+      description='A date time component can use custom date and time formatting functions.'
+      examplePath='modules/Datetime/Content/DatetimeExampleFormatters'
+    />
+    <ComponentExample
+      title='Time only with forced 24H format'
+      description='A full Time selector, where the time display is set to US locale but forced into a 24 hour clock'
+      examplePath='modules/Datetime/Content/Time24HourExample'
+    />
+  </ExampleSection>
+)
+
+export default DatetimeContentExamples

docs/app/Examples/addons/Datetime/States/DatetimeExampleDisabled.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleDisabled = () => (
+  <Datetime time={false} placeholder='Disabled Date' disabled />
+)
+
+export default DatetimeExampleDisabled

docs/app/Examples/addons/Datetime/States/DatetimeExampleDisabledDays.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+function yesterday() {
+  const _date = new Date()
+  _date.setDate(_date.getDate() - 1)
+  return _date
+}
+
+function tomorrow() {
+  const _date = new Date()
+  _date.setDate(_date.getDate() + 1)
+  return _date
+}
+
+const disabledDates = [
+  yesterday(),
+  new Date(),
+  tomorrow(),
+]
+const DatetimeExampleDisabledDays = () => (
+  <Datetime
+    time={false}
+    placeholder='Disabled days'
+    disabledDates={disabledDates}
+  />
+)
+
+export default DatetimeExampleDisabledDays

docs/app/Examples/addons/Datetime/States/DatetimeExampleError.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleError = () => (
+  <Datetime time={false} placeholder='Select Date' error />
+)
+
+export default DatetimeExampleError

docs/app/Examples/addons/Datetime/States/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DatetimeStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Calendar with disabled days'
+      description={[
+        'A calendar can specify a set of disabled dates.',
+        'This example has today, yesterday and tomorrow disabled.',
+      ].join(' ')}
+      examplePath='modules/Datetime/States/DatetimeExampleDisabledDays'
+    />
+    <ComponentExample
+      title='Error'
+      description='A calendar can show an error state'
+      examplePath='modules/Datetime/States/DatetimeExampleError'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='A calendar can be disabled'
+      examplePath='modules/Datetime/States/DatetimeExampleDisabled'
+    />
+  </ExampleSection>
+)
+
+export default DatetimeStatesExamples

docs/app/Examples/addons/Datetime/Types/DateRangeExample.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DateRangeExample = () => (
+  <Datetime.Range
+    defaultValue={[]}
+    dateHandler='native'
+    name='date_range'
+    defaultValue={[new Date('2017-02-28'), new Date('2017-03-10')]}
+    onChange={(e, {rangeId, name, value}) => {
+      console.log("Date selected: ", name, rangeId, value)
+    }}
+  />
+)
+
+export default DateRangeExample

docs/app/Examples/addons/Datetime/Types/DatetimeExampleDateOnly.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleDateOnly = () => (
+  <Datetime
+    time={false} 
+    defaultValue={new Date('2017-04-24')}
+    placeholder='Select Date'
+  />
+)
+
+export default DatetimeExampleDateOnly

docs/app/Examples/addons/Datetime/Types/DatetimeExampleFirstWeekDay.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Datetime } from 'semantic-ui-react'
+
+const DatetimeExampleStartSunday = () => (
+  <div className='ui two column grid'>
+    <div className='column'>
+      <Datetime time={false} placeholder='Week starts Sunday' firstDayOfWeek={0} />
+    </div>
+    <div className='column'>
+      <Datetime time={false} placeholder='Week starts Monday' />
+    </div>
+  </div>
+)
+
+export default DatetimeExampleStartSunday