Question

我正在尝试按下此按钮时显示我的日期选择器。我没有看到我的代码有什么问题，对我来说，它应该有用......但事实并非如此。有人可以看看吗？（对不起，jQuery的新手和一般的代码。）

$( function() {
    $( "#datepicker" ).datepicker();
  } );

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<button id="datepicker" class="btn btn-light">Jump to a specific date</button>

Answer 1

首先，应该在input元素上实例化datepicker，以便所选的值具有某个地方存储（即在该输入的值中）。

然后，您可以使用datepicker的show选项在单击按钮时显示它，如下所示：

＆＃13;

$(function() {
  $("#datepicker").datepicker();
  
  $('button').click(function() {
    $('#datepicker').datepicker('show')
  });
});

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="hidden" id="datepicker" name="date" />
<button class="btn btn-light">Jump to a specific date</button>

＆＃13;

Answer 2

试试这个。你忘了把日期时间选择器css和js的cdn。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<button id="datepicker" class="btn btn-light">Jump to a specific date</button>

</body>
</html>
<script type="text/javascript">
  $(function() {
    $("#datepicker" ).datepicker();
  });    
</script>

Answer 3

datepicker绑定到标准表单输入字段。

您可以使用以下代码在按钮上显示datepicker。

＆＃13;

$( function() {

$("#dateButton").datepicker({
  showOn: 'button',
  buttonText: 'Jump to a specific date',
  dateFormat: 'dd/mm/yy',
  constrainInput: true
});

  } );

＆＃13;

#dateButton {
  display: none;
}

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input id="dateButton" class="btn btn-light" />

＆＃13;

jQuery datepicker无法点击

3 个答案: