Question

我正在尝试创建一个具有下拉值的输入字段。如果选择某个项目（选择日期），我希望它显示一个日期选择器，以便能够选择日期。

我的问题是：

如果选择“选择日期”，则不会立即弹出datepicker对话框。您必须再次单击该字段才能显示它。
选择“选择日期”后，每次单击该字段时都会显示日期选择器。日期选择器应仅在选择“选择日期”时显示。

这是我的代码：

$('.dropdown-menu a').click(function() {
  var selectValue = $(this).attr('data-value');
  var selectText = $(this).attr('data-text');

  if (selectValue == 3) {
    $('#date_select').datepicker({
      daysOfWeekDisabled: "0,6",
      autoclose: true,
      todayHighlight: true
    });
    $("#date_select").datepicker("show");
  } else {
    $("#date_select").val(selectText);
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<div id="pickDate" class="input-group dropdown date">
  <input type="text" id="date_select" class="form-control" data-toggle="dropdown" required/>
  <ul class="dropdown-menu" id="date_menu">
    <li><a href="#" data-value="1" data-text="Soon">Soon</a></li>
    <li><a href="#" data-value="2" data-text="Someday">Someday</a></li>
    <li><a href="#" data-value="3" data-text="Select Date">Select Date</a></li>
  </ul>
  <span class="input-group-addon" data-toggle="dropdown">
      <span role="button" class="caret"></span>
  </span>
</div>

我正在使用bootstrap datepicker。

Answer 1

请查看第2期修改后的代码

 $('.dropdown-menu a').click(function () {
  var selectValue = $(this).attr('data-value');
  var selectText = $(this).attr('data-text');
  if (selectValue == 3) {
  $('#pickDate').datepicker({
    daysOfWeekDisabled: "0,6",
    autoclose: true,
    todayHighlight: true
  });
    $('.ui-datepicker').css("display","block");
  }
  else {
    $('#date_select').val(selectText);

    $('.ui-datepicker').css("display","none");
  }
 });

仅当您选择选项no 3时，这将显示日期选择器，否则它将被隐藏。

让我知道它是否适合你。

对于问题1：您能否向我简要介绍一下“您必须再次点击该字段才能显示它”。你的预期产量是多少？

在下拉列表中选择项目后的日期选择器

1 个答案: