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

Posted 2023-05-07

【中文标题】如何在 JS 函数 onchange 事件中获取 Bootstrap Datepicker 的值？

【英文标题】：How can I get value of Bootstrap Datepicker in JS function onchange event?

【发布时间】：2018-09-05 04:16:06

【问题描述】：

在引导程序日期选择器中选择日期后，我尝试在 javascript 函数中获取日期值，但我不能这样做。

日期选择器工作并在输入字段中显示日期，但我不能使用这个值。 （例如，我希望当我选择一个日期时，我会收到带有所选日期的弹出警报）

这是日期选择器：

<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',

    );

);

【问题讨论】：

你能给我们提供一个jsfiddle来测试吗？

仍应触发事件，例如 input

Detect change to selected date with bootstrap-datepicker的可能重复

【参考方案1】：

有关日期选择器事件的文档，请参阅 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 的示例

【讨论】：

@alex1121 什么不起作用？控制台记录了什么？

@gabi aka G.Petrioli .nothing。我到底应该把它放在哪里？在我的函数 DateFunction 内部还是在“date_input.datepicker(options)”行之后？

@alex1121 在date_input.datepicker(options) 之后。然后，当您更改日期时，它应该在控制台中记录所选日期。

对不起，事件是changeDate 而不是change。见codepen.io/anon/pen/KoZzpw

@alex1121 e.date 是一个实际的日期对象。如果您想要根据您传递的选项格式化日期，只需使用this.value（我已经更新了代码笔）