Tenho o seguinte campo:
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filtrar por...</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="padding: 10px">
<li><a href="#"><i class="fas fa-caret-right"></i> Nome</a></li>
<li><a href="#"><i class="fas fa-caret-right"></i> Mês e ano</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fas fa-caret-right"></i> Todos</a></li>
</ul>
</div>
<input type="text" class="form-control" name="Nome" placeholder=" Filtrar por nome">
<input type="date" class="form-control" name="Data" placeholder=" Filtrar por data">
<input type="text" class="form-control" name="Todos" placeholder=" Filtro por todos os registros">
<input type="text" class="form-control" name="" placeholder=" Selecione o filtro ao lado">
<span class="input-group-btn">
<button class="btn btn-inverse" type="button"><i class="fas fa-search"></i></button>
</span>
</div>
</div>
</div>
JQuery
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
Gostaria de fazer com que ao selecionar a opção Mês e Ano, substituísse o campo Nome pelo campo da Data, se selecionar a opção Todos, alterar para o campo Todos e se não selecionar o filtro, aparecer uma mensagem pedindo para selecionar o filtro desejado. Como posso fazer isso?