6

Estou a usar o plugin de Timepicker chamado bootstrap-material-datetimepicker:

(https://github.com/T00rk/bootstrap-material-datetimepicker).

Gostaria de conseguir desativar alguns dia da semana, ou só ativar as quartas-feiras e sextas-feiras mas não estou a conseguir, alguém me da uma ajuda? obrigado

4 Respostas 4

5
+50

Atualização

Fiz um pull request para adicionar esta opção ao plugin, os autores validaram e adicionaram a versão que já esta disponível na data 04/05/2016.

Add option to enable especific days #98

Como o pessoal acima citou, não existe este comportamento,mas você pode facilmente customizar e adicionar os teus comportamentos a qualquer plugin, basta entender como é o funcionamento.

Exemplo:

Passe por parâmetro os dias que permaneceram habilitados.

$('#date').bootstrapMaterialDatePicker({
      time: false,
      clearButton: true,
      enableDays: [3, 5]
});

Começando pelo índice 0 [3,5] são equivalentes a Quarta e Sexta.

Agora abra o arquivo: bootstrap-material-datetimepicker.js

Adicione o seguinte comportamento:

enableDays: function() {
  var enableDays = this.params.enableDays;
  if (enableDays) {
    $(".dtp-picker-days tbody tr td").each(function() {
      if (!(($.inArray($(this).index(), enableDays)) >= 0)) {
        $(this).find('a').css({
          "background": "#e3e3e3",
          "cursor": "no-drop",
          "opacity": "0.5"
        }).off("click");
      }
    });
  }
}

Ficando assim:

inserir a descrição da imagem aqui

Agora você precisa acionar este comportamento quando a modal abrir,neste exemplo adicionei no final do onFocus:

inserir a descrição da imagem aqui

O resultado fica assim:

inserir a descrição da imagem aqui

3
  • Olá Gabriel, obrigado pela ajuda, mas agora reparei que ao clicar uma vez ele realmente aparece com os dias da semana bloqueados mas se eu andar para a frente no calendário eles desbloqueiam todos sendo possível selecionar os dias, sabes o que possa ser? obrigado mais uma vez 17/05/2016 às 10:18
  • 1
    @LaranjaMecânica Sei sim, lembra que instanciei ela no evento on focus? Agora você precisa apenas declara-la no evento de transição 17/05/2016 às 10:21
  • Obrigado mais um vez, perfeito :D 17/05/2016 às 10:36
1

Esse plugin não oferece suporte a essa funcionalidade. Para fazer isso é necessário alterar o código do plugin ou buscar outra alternativa. Fiz uma alteração na função constructHTMLCalendar do plugin para realizar essa verificação que você solicitou:

constructHTMLCalendar: function(date, calendar)		{
var _template = "";

...
if(calendar.days[i] != 0)
{
	if(this.isBeforeMaxDate(moment(calendar.days[i]), false, false) === false || this.isAfterMinDate(moment(calendar.days[i]), false, false) === false)
	{
		_template += '<span class="dtp-select-day">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</span>';
	}
	else
	{
		var quarta = 3;
		var sexta = 5;
			if(moment(calendar.days[i]).locale(this.params.lang).format("DD") === moment(this.currentDate).locale(this.params.lang).format("DD"))
			{
				if(new Date(calendar.days[i]._d).getDay() == quarta || new Date(calendar.days[i]._d).getDay() == sexta){
					_template += '<a href="javascript:void(0);" class="dtp-select-day selected">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';	
				}else{
					_template += '<a class="selected">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';
				}
			}
			else
			{
				if(new Date(calendar.days[i]._d).getDay() == quarta || new Date(calendar.days[i]._d).getDay() == sexta){
					_template += '<a href="javascript:void(0);" class="dtp-select-day">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';
				}else{
					_template += '<a disabled="disabled">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';	
				}
			}
	}

		_template += '</td>';
	}
}
_template += '</tr></tbody></table>';

return _template;
},

Você pode observar que criei duas variáveis quarta e sexta e utilizo elas no if para remover ou não a classe 'dtp-select-day' (que é utilizada pra identificar os dias que podem ser selecionados) e o href do dia que está sendo construído no calendário. Se você quiser pode aplicar no seu bootstrap-material-datetimepicker.js e vê se isso te atende.

1

Usando Bootstrap 3 Datepicker v4 do eonasdan, eles já implementam a funcionalidade para desativar datas especificas, para o usuario não selecionar.

Segue o plugin: https://eonasdan.github.io/bootstrap-datetimepicker/

Enabled/Disabled Dates

$('#datetimepicker5').datetimepicker({
   defaultDate: "11/1/2013",
   disabledDates: [
      moment("12/25/2013"),
      new Date(2013, 11 - 1, 21),
      "11/22/2013 00:53"
    ]
});

Neste caso, está desativado as datas 21 e 22 do mês 11 do Ano 2013.

0

Olhando a documentação no Git deles, eles não possuem essa funcionalidade. O que você pode fazer é abrir um "issue" para eles: https://github.com/T00rk/bootstrap-material-datetimepicker/issues

Até lá, o que você pode fazer é procurar outra ferramenta ou aguardar a resposta deles.

Aqui tem alguns exemplos de outras ferramentas:

http://www.material-ui.com/#/components/date-picker

https://github.com/ripjar/material-datetime-picker

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 .