Question

我必须在选择日期时进行javascript函数调用，javascript如下，

$(document).ready(function(){
    var date_input=$('input[name="date"]'); //our date input has the name "date"
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
    date_input.datepicker({
        format: 'yyyy-mm-dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
        onSelect: function (dateText, inst) {
            getdsr(dateText);
        }
    })
})

日期的html如下，

<input id="txtdate" class="form-control" name="date" placeholder="YYYY/MM/DD" type="text"  required>

由于某种原因，onselect无效。

Answer 1

$(document).ready(function(){
      var date_input=$('#txtdate'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      $('#txtdate').datepicker({
        format: 'yyyy-mm-dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
        onSelect: function (dateText, inst) {

        //getdsr(dateText);
          console.log(dateText);
        }
      })
 })

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<input id="txtdate" class="form-control" name="date" placeholder="YYYY/MM/DD" type="text"  required/>

Answer 2

onSelect 适用于JQuery datepicker。这里bootstrap datepicker docs它有一些 changeDate 等事件，你可以用jquery捕获它们。

Answer 3

$(document).ready(function(){
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      $('#txtdate').datepicker({
        format: 'yyyy-mm-dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
        onSelect: function (dateText, inst) {
          alert(dateText);
        }
      })
 })

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<input id="txtdate" class="form-control" name="date" placeholder="YYYY/MM/DD" type="text"  required/>

Answer 4

试试这个

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <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>
  $( function() {
    $( "#datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd',
        autoclose: true,
        todayHighlight: true,
        onSelect: function (dateText, inst) {
            alert(dateText);
        }
    });
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

</body>
</html>

onSelect on datepicker不工作

4 个答案: