Question

我有一个字段需要使用日期选择器输入日期。我试过并搜索了错误（不显示）

这是我的日期选择器脚本

<script>
$(function(){
$('.date-picker').datepicker({
dateFormat: "yy-mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
  function isDonePressed(){
  return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
  }
  if (isDonePressed()){
    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
    $('.date-picker').focusout()//Added to remove focus from datepicker input box on selecting date
  }
},
beforeShow : function(input, inst) {
  inst.dpDiv.addClass('month_year_datepicker')
  if ((datestr = $(this).val()).length > 0) {
    year = datestr.substring(datestr.length-4, datestr.length);
    month = datestr.substring(0, 2);
    $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
    $(this).datepicker('setDate', new Date(year, month-1, 1));
    $(".ui-datepicker-calendar").hide();
  }
  }
  })
  });
  </script>

以下是HTML中的字段：

<table>
<tr>
<td style="width:150px;text-align:center; background-color:#f9f9f9";>From Date</td>
<td style="background-color:#f9f9f9";><input style="width:150px;text-align:center" class="date-picker" name="oec_month1" ></td>
<td style="width:150px;text-align:center; background-color:#f9f9f9";>To Date</td>
<td style="background-color:#f9f9f9";><input style="width:150px;text-align:center" class="date-picker" name="oec_month2" ></td>
</tr>
</table>

该字段不显示日期选择器。请帮忙！

Answer 1

datepicker不是jQuery的一部分 - 它在jQueryUI中。您需要确保已包含两个库，并且顺序正确。一旦你完成了，你的代码就可以了：

$(function() {
  $('.date-picker').datepicker({
    dateFormat: "yy-mm",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }
      if (isDonePressed()) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    beforeShow: function(input, inst) {
      inst.dpDiv.addClass('month_year_datepicker')
      if ((datestr = $(this).val()).length > 0) {
        year = datestr.substring(datestr.length - 4, datestr.length);
        month = datestr.substring(0, 2);
        $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
        $(this).datepicker('setDate', new Date(year, month - 1, 1));
        $(".ui-datepicker-calendar").hide();
      }
    }
  })
});

td.label {
  width: 150px;
  text-align: center;
  background-color: #f9f9f9;
}

td.field {
  background-color: #f9f9f9;
}

.date-picker {
  width: 150px;
  text-align: center;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table>
  <tr>
    <td class="label">From Date</td>
    <td class="field"><input class="date-picker" name="oec_month1"></td>
    <td class="label">To Date</td>
    <td class="field"><input class="date-picker" name="oec_month2"></td>
  </tr>
</table>

另请注意，我使用的是样式表，而不是使用丑陋的style属性打包HTML。

Answer 2

确保您有参考jquery-ui库

$(function() {
  $('.date-picker').datepicker({
    dateFormat: "yy-mm",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }
      if (isDonePressed()) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    beforeShow: function(input, inst) {
      inst.dpDiv.addClass('month_year_datepicker')
      if ((datestr = $(this).val()).length > 0) {
        year = datestr.substring(datestr.length - 4, datestr.length);
        month = datestr.substring(0, 2);
        $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
        $(this).datepicker('setDate', new Date(year, month - 1, 1));
        $(".ui-datepicker-calendar").hide();
      }
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<table>
  <tr>
    <td style="width:150px;text-align:center; background-color:#f9f9f9" ;>From Date</td>
    <td style="background-color:#f9f9f9" ;><input style="width:150px;text-align:center" class="date-picker" name="oec_month1"></td>
    <td style="width:150px;text-align:center; background-color:#f9f9f9" ;>To Date</td>
    <td style="background-color:#f9f9f9" ;><input style="width:150px;text-align:center" class="date-picker" name="oec_month2"></td>
  </tr>
</table>

如何显示日期选择器

2 个答案: