Allow date range to auto-submit the enclosing form on value change

app/cells/date_range/date_range.coffee

@@ -25,11 +25,13 @@ $(document).on 'uic:domchange', (e) ->
   defaults = {
     ranges: ranges,
     opens: 'right',
-    format: 'YYYY-MM-DD'
+    format: 'YYYY-MM-DD',
+    submitOnChange: false
   }
 
   $(e.target).find('.ui-components-date-range').each (_i, el) ->
     $el = $(el)
+    $form = $el.parents('form')
     $start_input = $($el.data().start)
     $end_input = $($el.data().end)
 
@@ -40,14 +42,14 @@ $(document).on 'uic:domchange', (e) ->
 
     options = _.extend({},
       defaults,
-      _.pick($el.data(), ['dateLimit', 'ranges']),
+      _.pick($el.data(), ['dateLimit', 'ranges', 'submitOnChange']),
       { startDate: start_date, endDate: end_date })
 
     options.ranges = _.mapObject(options.ranges, (v, k) -> _.map(v, (v) -> moment(v)))
     options.startDate = moment(options.startDate)
     options.endDate = moment(options.endDate)
 
-    callback = (start, end) ->
+    reset = (start, end) ->
       end.startOf('day')
 
       $start_input.val(start.format('YYYY-MM-DD'))
@@ -62,6 +64,12 @@ $(document).on 'uic:domchange', (e) ->
         label + ' (' + start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD') + ')'
       )
 
+    callback = (start, end) ->
+      reset(start, end)
+
+      if ($el.data().submitOnChange)
+        $form.submit()
+
     $el.daterangepicker(options, callback)
 
-    callback(options.startDate, options.endDate)
+    reset(options.startDate, options.endDate)

app/cells/date_range/date_range_cell.rb

@@ -10,6 +10,8 @@ class DateRangeCell < FormCellBase
     'days, months)'
   attribute :start_date, description: 'Default start date'
   attribute :end_date, description: 'Default end date'
+  attribute :submit_on_change, description: 'Whether the enclosing form should be ' \
+    'automatically submitted on value change'
 
   def show
     [
@@ -37,7 +39,7 @@ def select_div
   end
 
   def data
-    options.slice(:ranges, :date_limit).merge(
+    options.slice(:ranges, :date_limit, :submit_on_change).merge(
       start_date: start_date.to_s, end_date: end_date.to_s,
       start: "##{id}_from", end: "##{id}_to")
   end

spec/dummy/app/controllers/components_controller.rb

@@ -10,6 +10,10 @@ def new_show
     render layout: 'single_component'
   end
 
+  def form_submit
+    render json: params
+  end
+
   private
 
   def example_index

spec/dummy/app/views/components/date_range_submit_on_change.html.slim

@@ -0,0 +1,4 @@
+= bootstrap_form_for(:my_form, url: '/form_submit') do |f|
+    = ui_component('date_range', form: f,
+                                 name: 'my_date_range',
+                                 submit_on_change: true)

spec/dummy/config/routes.rb

@@ -4,4 +4,5 @@
   get '/select_async_data' => 'search#search'
   get '/components/*name/:example_index' => 'components#new_show'
   get '/*name' => 'components#show'
+  match '/form_submit' => 'components#form_submit', via: :all
 end

spec/integration/date_range_spec.rb

@@ -78,4 +78,21 @@ def datepicker(type)
     expect(date(:from)).to eq('2016-01-01')
     expect(date(:to)).to eq('2016-01-21')
   end
+
+  scenario 'submits enclosing form on value change' do
+    visit '/date_range_submit_on_change'
+    find('.ui-components-date-range').click
+    find('li', text: 'Custom Range').click
+    within('.calendar.second') do
+      find('td:not(.off)', text: '21').click
+    end
+    within('.calendar.first') do
+      find('td:not(.off)', text: '22').click
+    end
+    click_on 'Apply'
+
+    params = JSON.parse(page.body)['my_form']
+    expect(Date.parse(params['my_date_range_from']).day).to eq(21)
+    expect(Date.parse(params['my_date_range_to']).day).to eq(22)
+  end
 end