 class DateRangePickerElement extends Component
 
   @tag 'tao-date-range-picker'
+
+  @attribute 'prefix'
+  @attribute 'suffix'
+  @attribute 'separator', default: ','
 
   @attribute 'dateValueFormat', default: 'YYYY-MM-DD'
 

      @_initMoment()
      @namespacedTrigger 'ready'

  _initMoment: ->
    dates = @field.val().split(',')

    if dates.length > 0
      @startDate = moment _.trim(dates[0]), @dateValueFormat
      @endDate = moment _.trim(dates[1]), @dateValueFormat
      @startDatePicker.setMoment @startDate.clone()
      @endDatePicker.setMoment @endDate.clone()
      @startDatePicker.disableAfter @endDate.clone()
      @endDatePicker.disableBefore @startDate.clone()
    else
      @startDatePicker.setMoment ''
      @endDatePicker.setMoment ''
      @startDate = null
      @endDate = null

  _syncMoment: ->
    if @startDatePicker.moment && @endDatePicker.moment
      startDateValue = @startDatePicker.moment.format(@dateValueFormat)
      endDateValue = @endDatePicker.moment.format(@dateValueFormat)

      @field.val "#{startDateValue},#{endDateValue}"
      @startDate = @startDatePicker.moment.clone()
      @endDate = @endDatePicker.moment.clone()
    else
      @field.val ''
      @startDate = null
      @endDate = null

export default DateRangePickerElement.register()

      else
        @startDatePicker.disableAfter datePicker.moment
      @_syncMoment()
      @namespacedTrigger('change', [@value])

    startDatePickerDeferred = $.Deferred()
    endDatePickerDeferred = $.Deferred()
