Question

我在bootstrap datepicker中选择日期后试图在javascript函数中获取Date值，但我不能这样做。

日期选择器工作并在输入字段中显示日期，但我无法使用此值。（例如，当我选择日期时，我想要获得具有所选日期的弹出警报）

这是datepicker：

<div class="form-group">
    <label class="control-label" for="date">THE Date</label>
    <div class="form-group">
        <div class='input-group date' >
            <input class="form-control " id="date_id" name="date" placeholder="DD/MM/YYYY" type="text" onchange="DateFunction()"  />
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
            </div>
        </div>
    </div>
</div>

JavaScript的：

$(document).ready(function () {
    var date_input = $('input[name="date"]'); 

    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
    var options = {
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    };
    date_input.datepicker(options);
})

function DateFunction() {

    var x = document.getElementById("date_id");
    alert(x.Value);

}

-------------编辑：--------------------

我改为这个功能。如何以及在哪里我需要添加行来获取我的日期值？日期是工作并在输入中显示

HTML：

<div class="container">
  <div class="col-xs-12">
    <input name="datetimepicker" id="Date_id" />
  </div>
</div>

JS：

  $(function () {
    $('input[name="datetimepicker"]').datetimepicker({
        format: 'DD/MM/YYYY',

    });

});

Answer 1

有关datepicker事件的文档，请参阅https://bootstrap-datepicker.readthedocs.io/en/latest/events.html。

简而言之

date_input.datepicker(options);
date_input.on('changeDate', function(e){
   // e.date holds the new date (e.dates if it is multidate picker)
   console.log(e.date); // log actual Date object to handle as you want
   console.log(this.value); // log the formatted value of the input
});

https://codepen.io/anon/pen/KoZzpw

的示例

如何在JS函数onchange事件中获取Bootstrap Datepicker的值？

1 个答案: