<p class="clearfix">
  <label><%= __('Type of date') %></label>
  <select name="params[date_type]">
    <% for type, label in date_types %>
      <option
        {{#ifCond params.date_type "==" "<%= type %>"}}
          selected="selected"
        {{/ifCond}}
        data-format="<%= date_formats[type][0] %>" value="<%= type %>"
      ><%= label %></option>
    <% endfor %>
  </select>
  <input type="hidden" name="params[date_format]" value="" />
</p>

<script type="text/javascript">
  jQuery(function($) {
    $('select[name="params[date_type]"]').on('change', function() {
      // set default date format depending on date type
      $('input[name="params[date_format]"]')
        .val($(this)
        .find('option:selected')
        .data('format'));
    });
    // set default format
    $('select[name="params[date_type]"]').trigger('change');
  });
<{{!}}/script>