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
    wrapperClass: PropTypes.string
    className: PropTypes.string
    minDate: PropTypes.object
    maxDate: PropTypes.object
    onChange: PropTypes.func.isRequired
    tabIndex: PropTypes.number
    hasDefaultDate: PropTypes.bool
    selected: PropTypes.oneOfType [
      PropTypes.string
      PropTypes.object
    ]

  getDefaultProps: ->
    hasDefaultDate: yes # yes to have a default date in the date picker
    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: ->
    {hasDefaultDate} = @props

    # set initial state for selected
    # if selected is in props and hasDefaultDate value then props.selected date else if hasDefaultDate then today's date else null
    if hasDefaultDate and @props.selected?
      selected = @props.selected
    else if hasDefaultDate
      selected = moment()
    else
      selected = null
    
    {
      selected: selected
    }
    
  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
    {wrapperClass} = props
    
    mainClass = 'datepicker-wrapper'
    mainClass += " #{wrapperClass}" if wrapperClass?

    div {
      className: mainClass
    }, ReactDatepicker(props)

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

  getValue: ->
    {returnDateString, hasDefaultDate} = @props
    {selected} = @state

    # if hasDefaultDate is false and nothing is selected then return an empty string
    if returnDateString? and selected?
      selected.format(returnDateString) 
    else if selected?
      selected
    else if hasDefaultDate
      moment()
    else
      ''   


module.exports = DatePicker