1

estou utilizando DataPicker e gostaria de tirar uma dúvida sobre apenas Habilitar um dia especifico.

<script>
    $(function () {
        var datepicker = document.getElementById('<%=txtDataRetirada.ClientID%>');
        $("#MainContent_txtDataRetirada").datepicker({
            minDate: 0,
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior'
        });
    });
</script>
2
  • 2
    Podes explicar melhor a dúvida? Queres que ele aceite só um dia por ano, por mês, semana?
    – Sergio
    Commented 28/04/2017 às 19:59
  • quero que habilite apenas alguns dias que eu passarei Commented 29/04/2017 às 23:24

1 Resposta 1

1

A API do .datepicker() tem o método para isso, beforeShowDay que aceita uma função que chama para cada data. Essa função tem de retornar uma array com o seguinte index (só o primeiro é obrigatório):

[0]: true / false que indica se o dia pode ser selecionado ou não
[1]: uma classe CSS a dar a essa data
[2]: um texto opcional para o tooltip dessa data

O código seria:

var datasLivres = ['30-4-2017', '2-5-2017', '9-5-2017', '18-5-2017'];
function verificadorDeDatas(d) {
    var data = [d.getDate(), d.getMonth() + 1, d.getFullYear()].join('-');
    return [datasLivres.indexOf(data) != -1];
}
$("#MainContent_txtDataRetirada").datepicker({
    beforeShowDay: verificadorDeDatas,
    minDate: 0,

Exemplo:

$(function() {
  // para testar muda estas datasLivres para outras datas
  var datasLivres = ['30-4-2017', '2-5-2017', '9-5-2017', '18-5-2017'];
  function verificadorDeDatas(d) {
    var data = [d.getDate(), d.getMonth() + 1, d.getFullYear()].join('-');
    return [datasLivres.indexOf(data) != -1];
  }
  $("#MainContent_txtDataRetirada").datepicker({
    beforeShowDay: verificadorDeDatas,
    minDate: 0,
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    nextText: 'Próximo',
    prevText: 'Anterior'
  });
});
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>

<input type="text" id="MainContent_txtDataRetirada" />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .