JQUERY datetimepicker onSelect не распознается - PullRequest
Новая
       53

JQUERY datetimepicker onSelect не распознается

0 голосов
/ 30 апреля 2018

Я пытаюсь использовать datetimepicker из jquery. Я хочу очистить некоторые поля ввода всякий раз, когда вы выбираете новую дату, но мой onSelect на самом деле не работает. Во-первых, он запускается только один раз при загрузке документа. После этого он никогда не срабатывает снова. Во-вторых, onSelect не работают с анонимными функциями.

Это не работает 

$(document).ready(function() {
  $(function () {
    $('#dateValue').datetimepicker({
      format: 'YYYY-MM-DD',
      onSelect: function() {
        console.log("testing");
      }
    });
  });
});

Это работает, но срабатывает только при загрузке документа, затем никогда больше 

$(document).ready(function() {
  $(function () {
    $('#dateValue').datetimepicker({
      format: 'YYYY-MM-DD',
      onSelect: console.log("testing")
    });
  });
});

Импортированные файлы в моем теге head в index.html 

<head>
    <meta charset="UTF-8">
    <title>....</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="myCSS.css">
</head>

РЕДАКТИРОВАТЬ: я дурак и забыл дать сообщение об ошибке 

Uncaught TypeError: option onSelect is not recognized!
    at Function.<anonymous> (bootstrap-datetimepicker.min.js:8)
    at Function.each (jquery.min.js:2)
    at Object.l.options (bootstrap-datetimepicker.min.js:8)
    at c (bootstrap-datetimepicker.min.js:9)
    at HTMLInputElement.<anonymous> (bootstrap-datetimepicker.min.js:9)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at n.fn.init.a.fn.datetimepicker (bootstrap-datetimepicker.min.js:9)
    at HTMLDocument.<anonymous> (script.js:3)
    at j (jquery.min.js:2)

Ответы [ 3 ]

0 голосов
/ 30 апреля 2018

Вы должны использовать dp.change событие, которое сработало при изменении даты. 

$('#dateValue').datetimepicker({
  format: 'YYYY-MM-DD',
});

$("#dateValue").on("dp.change", function() {
  console.log("testing");
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class='input-group date' id='dateValue'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>
0 голосов
/ 30 апреля 2018

Вы используете Bootstrap datetimepicker component. Событие onselect не является частью этого.

Вы должны использовать 

$("#dateValue").on("dp.change", function (e) {
//your code
});
0 голосов
/ 30 апреля 2018

Примерьте заявление 

$("#dateValue").on("onselect",function(){ console.log("testing"); });

http://api.jquery.com/on/

...