title: Jquery Datepicker, Set Select2 value to null upon selection of date, and vice versa
body: <p>in Laravel framework I am using Jquery version v3.3.1 and bootstrap-datepicker.js and Select2 4.0.4</p>
  <p>and i am making a process on which when</p>
  <ul>
  <li><p>field change on datepicker which upon change will trigger select2 value to null</p>
  </li>
  <li><p>field change on select2 value will trigger change on datepicker field to null</p>
  </li>
  </ul>
  <p>below is my html codes</p>
  <pre><code>&lt;form class=&quot;p-t-10&quot; id=&quot;form-search&quot; role=&quot;form&quot; autocomplete=&quot;off&quot; method=&quot;post&quot; action=&quot;{{ route('application.record.document_verification.loglist') }}&quot; novalidate&gt;
      &lt;div class=&quot;form-group-attached&quot;&gt;
          &lt;div class=&quot;row clearfix&quot;&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;
                  &lt;div class=&quot;form-group form-group-default input-group&quot;&gt;
                      &lt;div class=&quot;form-input-group&quot;&gt;
                          &lt;label&gt;
                              &lt;span id=&quot;start_date_span&quot;&gt;{{ __('Tarikh') }}&lt;/span&gt;
                          &lt;/label&gt;
                          &lt;input id=&quot;start_date&quot; class=&quot;form-control&quot; name=&quot;start_date&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;
                  &lt;div class=&quot;form-group form-group-default form-group-default-custom form-group-default-select2&quot;&gt;
                      &lt;label id=&quot;label_year_filter&quot;&gt;&lt;span&gt;{{ __('Tahun Rekod Dibuat') }}&lt;/span&gt;&lt;/label&gt;
                      &lt;select id=&quot;year_filter&quot; name=&quot;year_filter&quot; class=&quot;full-width autoscroll&quot; data-init-plugin=&quot;select2&quot;&gt;
                          &lt;option value=&quot;&quot; selected=&quot;&quot; &gt;{{ __('Pilih satu') }}..&lt;/option&gt;
                          &lt;?php for ($i=date('Y');$i&gt;=2018;$i--): ?&gt;
                              &lt;option value={{ $i }}&gt;{{ $i }}&lt;/option&gt;
                          &lt;?php endfor ?&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;
                  &lt;div class=&quot;form-group form-group-default form-group-default-custom form-group-default-select2&quot;&gt;
                      &lt;label id=&quot;label_month_filter&quot;&gt;&lt;span&gt;{{ __('Bulan Rekod Dibuat') }}&lt;/span&gt;&lt;/label&gt;
                      &lt;select id=&quot;month_filter&quot; name=&quot;month_filter&quot; class=&quot;full-width autoscroll&quot; data-init-plugin=&quot;select2&quot;&gt;
                          &lt;option value=&quot;&quot; selected=&quot;&quot; &gt;{{ __('Pilih satu') }}..&lt;/option&gt;
                          &lt;option value=1&gt;{{ __('Januari') }}&lt;/option&gt;
                          &lt;option value=2&gt;{{ __('Februari') }}&lt;/option&gt;
                          &lt;option value=3&gt;{{ __('Mac') }}&lt;/option&gt;
                          &lt;option value=4&gt;{{ __('April') }}&lt;/option&gt;
                          &lt;option value=5&gt;{{ __('Mei') }}&lt;/option&gt;
                          &lt;option value=6&gt;{{ __('Jun') }}&lt;/option&gt;
                          &lt;option value=7&gt;{{ __('Julai') }}&lt;/option&gt;
                          &lt;option value=8&gt;{{ __('Ogos') }}&lt;/option&gt;
                          &lt;option value=9&gt;{{ __('September') }}&lt;/option&gt;
                          &lt;option value=10&gt;{{ __('Oktober') }}&lt;/option&gt;
                          &lt;option value=11&gt;{{ __('November') }}&lt;/option&gt;
                          &lt;option value=12&gt;{{ __('Disember') }}&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;pull-right p-t-10 p-b-10&quot;&gt;
              &lt;button class=&quot;btn btn-warning&quot; onclick=&quot;resetFilterForm()&quot;&gt;Reset&lt;/button&gt;
              &lt;button class=&quot;btn btn-info&quot; type=&quot;submit&quot;&gt;&lt;/i&gt; {{__('Carian') }}&lt;/button&gt;
          &lt;/div&gt;
          &lt;button href=&quot;javascript:;&quot; target=&quot;_blank&quot; class=&quot;btn btn-default m-t-5&quot; onclick=&quot;export_excel_list()&quot;&gt;&lt;i class=&quot;fa fa-download text-success&quot;&gt;&lt;/i&gt; EXCEL &lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>below is jquery code that i am writing to trigger datepicker on change normally</p>
  <pre><code>$(&quot;#start_date&quot;).datepicker({
      language: 'ms',
      format: 'dd/mm/yyyy',
      autoclose: true,
      todayHighlight:'TRUE',
      endDate: &quot;today&quot;,
      onClose: function() {
          $(this).valid();
      },
  }).on('changeDate', function(){
      $(this).trigger('change');
  });
  </code></pre>
  <p>below is jquery i am writing to make sure the code set the select2 value to empty value upon changing datepicker value</p>
  <pre><code>$(&quot;#start_date&quot;).datepicker({
      language: 'ms',
      format: 'dd/mm/yyyy',
      autoclose: true,
      todayHighlight:'TRUE',
      endDate: &quot;today&quot;,
      onClose: function() {
          $(this).valid();
      },
  }).on('changeDate', function(){
      $(this).trigger('change');
  
      $('select#year_filter').select2().val(&quot;&quot;).trigger(&quot;change&quot;);
  });
  </code></pre>
  <p>The code above is working correctly without any problems, but now i want to proceed on</p>
  <ul>
  <li>field change on select2 value will trigger change on datepicker field to null</li>
  </ul>
  <p>so i write the code as below</p>
  <pre><code>$('body').on('change',&quot;select#year_filter&quot;,&quot;select#month_filter&quot;,function(){
      $(&quot;input[name=start_date]&quot;).val(&quot;&quot;);
  })
  </code></pre>
  <p>and now its not working correctly , a new bugs occured in which when selection on datepicker is made the datepicker value stays null,  the select2 value change to empty but the datepicker value becomes null</p>
  <p>i am not sure what happens, I have check if there is any duplicated name or id but there is none</p>
  <p>Please help</p>
  <p>Thank you</p>