datepicker - 如何使用选项卡打开日期选择器？

Question

我在一个表单上有一个物化日期选择器，它被翻译成葡萄牙语。当用光标点击它时，它显示得很好，但是当在表单字段中切换时，它不会打开。我的意思是，我完全可以通过按 Tab 键并键入来在其上放置一个不允许的日期。谁能帮帮我？

我正在使用物化 1.0.0

$('.datepicker').datepicker({

  i18n: {
    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
    weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
    weekdaysAbbrev: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
    today: 'Hoje',
    clear: 'Limpar',
    cancel: 'Sair',
    done: 'Confirmar',
    labelMonthNext: 'Próximo mês',
    labelMonthPrev: 'Mês anterior',
    labelMonthSelect: 'Selecione um mês',
    labelYearSelect: 'Selecione um ano',
    selectMonths: true,
    selectYears: 15,
    beforeShow: function(input, inst)
      {
          inst.dpDiv.css({position: 'absolute'});
      }
  },
  disableDayFn: function (date) {

    var DD = ('0' + date.getDate()).slice(-2);
    var MM = ('0' + (date.getMonth() + 1)).slice(-2);
    var YYYY = date.getFullYear();

    var DDMMYYYY = DD + '/' + MM + '/' + YYYY;

    if (DDMMYYYY == '25/01/2019') { return date; }

    if (DDMMYYYY == '04/03/2019') { return date; }

    if (DDMMYYYY == '05/03/2019') { return date; }

    if (DDMMYYYY == '06/03/2019') { return date; }

    if (DDMMYYYY == '19/04/2019') { return date; }

    if (DDMMYYYY == '21/04/2019') { return date; }

    if (DDMMYYYY == '01/05/2019') { return date; }

    if (DDMMYYYY == '20/06/2019') { return date; }

    if (DDMMYYYY == '09/07/2019') { return date; }

    if (DDMMYYYY == '21/10/2019') { return date; }

    if (DDMMYYYY == '15/11/2019') { return date; }

    if (DDMMYYYY == '20/11/2019') { return date; }

    if (DDMMYYYY == '24/12/2019') { return date; }

    if (DDMMYYYY == '25/12/2019') { return date; }

    if (DDMMYYYY == '31/12/2019') { return date; }

    if (DDMMYYYY == '01/01/2020') { return date; }

  },
  disableWeekends: true,
  format: 'dd/mm/yyyy',
  container: 'body',
  minDate: window.date.addDays(7),


});

标签： datepickermaterialize

Answer 1

我是这样写的代码

    $(function() {
  $('.datepicker').datepicker({

  i18n: {
    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
    weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
    weekdaysAbbrev: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
    today: 'Hoje',
    clear: 'Limpar',
    cancel: 'Sair',
    done: 'Confirmar',
    labelMonthNext: 'Próximo mês',
    labelMonthPrev: 'Mês anterior',
    labelMonthSelect: 'Selecione um mês',
    labelYearSelect: 'Selecione um ano',
    selectMonths: true,
    selectYears: 15,
    beforeShow: function(input, inst)
      {
          inst.dpDiv.css({position: 'absolute'});
      }
  },
  disableDayFn: function (date) {

    var DD = ('0' + date.getDate()).slice(-2);
    var MM = ('0' + (date.getMonth() + 1)).slice(-2);
    var YYYY = date.getFullYear();

    var DDMMYYYY = DD + '/' + MM + '/' + YYYY;

    if (DDMMYYYY == '25/01/2019') { return date; }

    if (DDMMYYYY == '04/03/2019') { return date; }

    if (DDMMYYYY == '05/03/2019') { return date; }

    if (DDMMYYYY == '06/03/2019') { return date; }

    if (DDMMYYYY == '19/04/2019') { return date; }

    if (DDMMYYYY == '21/04/2019') { return date; }

    if (DDMMYYYY == '01/05/2019') { return date; }

    if (DDMMYYYY == '20/06/2019') { return date; }

    if (DDMMYYYY == '09/07/2019') { return date; }

    if (DDMMYYYY == '21/10/2019') { return date; }

    if (DDMMYYYY == '15/11/2019') { return date; }

    if (DDMMYYYY == '20/11/2019') { return date; }

    if (DDMMYYYY == '24/12/2019') { return date; }

    if (DDMMYYYY == '25/12/2019') { return date; }

    if (DDMMYYYY == '31/12/2019') { return date; }

    if (DDMMYYYY == '01/01/2020') { return date; }

  },
  disableWeekends: true,
  format: 'dd/mm/yyyy',
  container: 'body',
  minDate: window.date.addDays(7),

});


});
  function show_dp(){
    $(".datepicker").datepicker('open'); //Show on click of button
   }

HTML

<div class="row">
        <div class="input-field col s12">
          <input type="text" class="datepicker" id="vencimento" onfocus="show_dp()">
          <label for="vencimento">Vencimento</label>
          <span class="helper-text">É necessário enviar a solicitação no mínimo cinco dias úteis antes do vencimento.</span>
        </div>
      </div>