PHP and Javascript - Responsive site - Problems with SELECT and INPUT

I'm making changes to a client's site, making it responsive. I had to make several layout changes that were sent to me by a vendor and because of these changes some Javascript and PHP functions I had do not work in the new layout.

In one of them, I have two date and location filters (unit or company). The date is an INPUT and the units is a SELECT. I'll put the code from the view below:

<form class="rd-mailform text-left" data-form-output="form-output-global" data-form-type="contact" method="post" novalidate="novalidate">
        <p class="mobile-hide">Selecione abaixo os par&acirc;metros para visualiza&ccedil;&atilde;o.&nbsp;Se desejar salvar,&nbsp;enviar por e-mail ou imprimir,&nbsp;clique em&nbsp;'Gerar PDF'&nbsp;ou&nbsp;'Gerar Excel'.</p>
        <!--<div class="range range-xs-center" style="margin: 0px !important;">-->
          <div class="cell-sm-6">
            <div class="form-group form-group-label-outside">
              <label class="form-label form-label-outside text-dark rd-input-label" for="data-relatorio">Data</label>
              <input class="form-control form-control-last-child" id="data-relatorio" type="text" name="first-name" >
            </div>
          </div>
          <div class="cell-sm-6 offset-top-20 offset-sm-top-0">
            <div class="form-group form-group-label-outside">
              <label class="form-label form-label-outside text-dark rd-input-label" for="comboUnidades">
                Unidade
              </label>
              <select id="comboUnidades" class="form-control select2-multiple" data-minimum-results-for-search="Infinity">
              </select>
            </div>
          </div>
          <div style="width: 100%">
            <div style="position: relative; float: left; padding: 5px" onclick="montaPDF()"><a class="btn btn-ellipse btn-java" href="#">GERAR PDF</a></div>
            <div style="position: relative; float: left; padding: 5px" onclick="montaExcel()" class="mobile-hide"><a class="btn btn-ellipse btn-java" href="#">GERAR EXCEL</a></div>
          </div>

      </form>

Below is part of the JS file code that shows how these filters were loaded. The date originally uses a datepicker function, which does not work in the current layout. And the units uses an AJAX function to put all the options that come from the MySQL database of the site within the select comboUnits :

$(document).ready(function(){
showLoading();

var d = new Date();
d.setDate(d.getDate() - 1);
$('#data-relatorio').datepicker({ 
    dateFormat: "dd/mm/yy",
    maxDate: d
});

$("#data-relatorio").datepicker('setDate',d);

var param = location.href.split("?")[1];

if(typeof param != "undefined" ) {
    var unidade = param.split('=')[1];
}

$.ajax({
      async: false,
      url: '[:raiz]acompanhamentoDiario/getUnidades',
      dataType: 'json',       
      success: function(data) {
          if (data.length > 0){
              var retorno = "";
              for(var i = 0;i < data.length; i++){
                  retorno += "<option value='"+data[i]['id']+"'>"+data[i]['newnome']+"</option>";
              }
              $('#comboUnidades').html(retorno);

              if(typeof param != "undefined" ) {
                  $('#comboUnidades option[value='+unidade+']').attr('selected', 'selected');
                  $('#comboUnidades').trigger('change');
              }
          } else {

          }
      }
});
$('#data-relatorio').change(function(){
    montaTabela();
});

$('#comboUnidades').change(function(){
    montaTabela();
});

var d = new Date();

$('#divTabela').hide();

montaTabela();

hideLoading();

});

This function called in AJAX is located in a Controller file:

public function getUnidades() {
    $acompanhamento = new AcompanhamentoDiario();
    $retorno = $acompanhamento->getUnidadesUsuario();
    echo json_encode($retorno);
}

In turn, this controller function calls a function in PHP that is in a file in my site Model folder. It brings the select units depending on the user login:

public function getUnidadesUsuario() {        
    $idUser = Login::retornaIdUser();   
    $perfilAcesso =  Login::retornaPerfilAcesso();

    if(($perfilAcesso == 1) || ($perfilAcesso == 6)) { // Colocado o perfil 6 do Usuário de Demonstração
        /* se perfil de usuairo = 1*/
        $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome";
        $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id";
        $sql .= " join usuario_unidade uu on (uu.id_unidade = u.id)";
        $sql .= " WHERE u.ind_unidade_ativa = 1 AND u.ind_predio_novo = 0";
        $sql .= " and uu.id_usuario = $idUser and lower(uu.ind_tipo_investidor) != 'c' ORDER BY newnome ASC";
    } elseif($perfilAcesso == 2) {
        /* se perfil de usuairo = 2*/
        $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome";
        $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id";
        $sql .= " join administrador adm on (adm.id_unidade = u.id)";
        $sql .= " WHERE u.ind_predio_novo = 0";
        $sql .= " and adm.id_usuario = $idUser and adm.id_usuario NOT IN (3124,4378)";
        $sql .= " ORDER BY newnome ASC";
    } else {
        /* se perfil de usuario = 3*/
        $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome";
        $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id";
        $sql .= " WHERE u.ind_predio_novo = 0 ORDER BY newnome ASC";
    }

    $res = parent::executaQuery($sql);

    return $res;
}

The tableTab () function, for now, I still do not want to modify, so I will not show how it is. It runs on the page depending on the filter change. For now, I just wanted to know how "popular" the select comboUnits and how to work the date filter date similarly to datePicker.