ldx-widgets/src/components/date_picker.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
PropTypes = require 'prop-types'
ReactDatepicker = React.createFactory(require('react-datepicker').default)
moment = require 'moment'
_ = require 'lodash'

{div, span} = React.DOM


DatePicker = createClass

  displayName: 'DatePicker'

  propTypes:
    placeholderText: PropTypes.oneOfType [
      PropTypes.string
      PropTypes.number
    ]
    dateFormat: PropTypes.string
    className: PropTypes.string
    minDate: PropTypes.object
    maxDate: PropTypes.object
    onChange: PropTypes.func.isRequired
    tabIndex: PropTypes.number
    selected: PropTypes.oneOfType [
      PropTypes.string
      PropTypes.object
    ]

  getDefaultProps: ->
    placeholderText: 'Select a date'
    dateFormat: 'MM/DD/YYYY'
    className: null
    includeTime: no # yes to include time selection
    returnDateString: null # pass a date format string to get that format from the getValue method
    onChange: ->

  getInitialState: ->
    selected: @props.selected or moment()

  componentWillReceiveProps: (nextProps) ->
    if nextProps.selected?.format(@props.returnDateString or @props.dateFormat) isnt @props.selected?.format(@props.returnDateString or @props.dateFormat)
      @setState
        selected: nextProps.selected
    
  render: ->
    props = _.clone(@props)        
    props.onChange = @handleDateChange

    mainClass = 'datepicker-wrapper'
    mainClass += " #{className}" if className?

    div {
      className: mainClass
    }, ReactDatepicker(props)

  handleDateChange: (date) ->
    @setState
      selected: date
    , =>
      @props.onChange?(date)

  getValue: ->
    {returnDateString} = @props
    {selected} = @state
    if returnDateString? and selected? then selected.format(returnDateString) else selected or moment()
    

module.exports = DatePicker