blocks|key|4645772|text|如果希望响应手动输入，则必须在输入本身上使用change事件，因为changeDate事件仅在使用datepicker更改日期时使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4645773|尝试如下所示：|4645774|$(document).ready(function()+{
++++$('.datepicker').datepicker({
++++++++format:+"yyyy-mm-dd",
++++})
++++//Listen+for+the+change+even+on+the+input
++++.change(dateChanged)
++++.on('changeDate',+dateChanged);
});

function+dateChanged(ev)+{
++++$(this).datepicker('hide');
++++if+($('#startdate').val()+!=+''+&&+$('#enddate').val()+!=+'')+{
++++++++$('#period').text(diffInDays()+%2B+'+d.');
++++}+else+{
++++++++$('#period').text("-");
++++}
}|code-block|syntax|javascript|4645775|entityMap^0|M|6|X|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

You have to use the <code>change</code> event on the input itself if you want to respond to manual input, because the <code>changeDate</code> event is only for when the date is changed using the datepicker.

Try something like this:

<pre><code>$(document).ready(function() {
 $('.datepicker').datepicker({
 format: "yyyy-mm-dd",
 })
 //Listen for the change even on the input
 .change(dateChanged)
 .on('changeDate', dateChanged);
});

function dateChanged(ev) {
 $(this).datepicker('hide');
 if ($('#startdate').val() != '' &amp;&amp; $('#enddate').val() != '') {
 $('#period').text(diffInDays() + ' d.');
 } else {
 $('#period').text("-");
 }
}
</code></pre>

blocks|key|139166|text|这应该使它在这两种情况下都能工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|139167|function+onDateChange()+{
+++//+Do+something+here
}

$('#dpd1').bind('changeDate',+onDateChange);
$('#dpd1').bind('input',+onDateChange);|code-block|syntax|javascript|139168|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This should make it work in both cases

<pre><code>function onDateChange() {
 // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);
</code></pre>

blocks|key|139170|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|139171|$(".datepicker").on("dp.change",+function(e)+{
++++alert('hey');
});|code-block|syntax|javascript|139172|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:
 

<pre><code>$(".datepicker").on("dp.change", function(e) {
 alert('hey');
});
</code></pre>

blocks|key|4645826|text|新版本已更改..要获得最新版本，请使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4645827|$('#UpToDate').datetimepicker({
++++++++format:'MMMM+DD,+YYYY',
++++++++maxDate:moment(),
++++++++defaultDate:moment()++++++++++++
++++}).on('dp.change',function(e){
++++++++console.log(e);
++++});|code-block|syntax|javascript|4645828|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The new version has changed.. for the latest version use the code below:

<pre><code>$('#UpToDate').datetimepicker({
 format:'MMMM DD, YYYY',
 maxDate:moment(),
 defaultDate:moment() 
 }).on('dp.change',function(e){
 console.log(e);
 });
</code></pre>

blocks|key|4645889|text|根据你正在使用的Bootstrap日期选择器，这是一个目前已知的bug：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4645890|代码：https://github.com/uxsolutions/bootstrap-datepicker|offset|length|4645891|(文档：https://bootstrap-datepicker.readthedocs.io/en/latest/)|4645892|这里有一个bug报告：|4645893|https://github.com/uxsolutions/bootstrap-datepicker/issues/1957|4645894|如果有人对此有解决方案/变通方法，如果你能把它包括进来，那就太好了。|4645895|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/uxsolutions/bootstrap-datepicker|1|https://bootstrap-datepicker.readthedocs.io/en/latest/|2^0|0|3|1F|0|0|4|1I|1|0|0|0|1R|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]|V|$5|Q|R|S|A|$T|W]]|X|$5|Q|R|S|A|$T|K]]]]

<h2>Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:</h2>

Code: <a href="https://github.com/uxsolutions/bootstrap-datepicker" rel="nofollow noreferrer">https://github.com/uxsolutions/bootstrap-datepicker</a>

(Docs: <a href="https://bootstrap-datepicker.readthedocs.io/en/latest/" rel="nofollow noreferrer">https://bootstrap-datepicker.readthedocs.io/en/latest/</a>)

Here's a bug report:

<a href="https://github.com/uxsolutions/bootstrap-datepicker/issues/1957" rel="nofollow noreferrer">https://github.com/uxsolutions/bootstrap-datepicker/issues/1957</a>

If anyone has a solution/workaround for this one, would be great if you'd include it.

blocks|key|4645939|text|我有一个关于datetimepicker的版本，由于某种原因，它不能处理https://tempusdominus.github.io/bootstrap-4/的变化事件，但是JS+vanilla却可以。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4645940|我是这样想的|4645941|document.getElementById('date').onchange+=+function(){+...the+jquery+code...}|code-block|syntax|javascript|4645942|我希望能为你工作|4645943|entityMap|0|LINK|mutability|MUTABLE|url|https://tempusdominus.github.io/bootstrap-4/^0|10|18|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I have this version about datetimepicker <a href="https://tempusdominus.github.io/bootstrap-4/" rel="nofollow noreferrer">https://tempusdominus.github.io/bootstrap-4/</a> and for any reason doesn`t work the change event with jquery but with JS vanilla it does

I figure out like this

<pre><code>document.getElementById('date').onchange = function(){ ...the jquery code...}
</code></pre>

I hope work for you

blocks|key|4645992|text|我使用的是AngularJS和AngularStrap+2.3.7，并试图通过侦听'change'元素(而不是输入本身)来捕获<form>事件，但这里的答案对我都不起作用。我试着去做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4645993|$(form).on('change+change.dp+dp.change+changeDate'+function+()+{...})|code-block|syntax|javascript|4645994|任何东西都不会被点燃。我最终监听了focus和blur事件，并在元素本身上设置了一个自定义属性：|4645995|//+special+hack+to+make+bs-datepickers+fire+change+events
//+use+timeout+to+make+sure+they+all+exist+first
$timeout(function+()+{++
++++$('input[bs-datepicker]').on('focus',+function+(e){
++++++++e.currentTarget.focusValue+=+e.currentTarget.value;
++++});++++++++
++++$('input[bs-datepicker]').on('blur',+function+(e){
++++++++if+(e.currentTarget.focusValue+!==+e.currentTarget.value)+{
++++++++++++var+event+=+new+Event('change',+{+bubbles:+true+});
++++++++++++e.currentTarget.dispatchEvent(event);
++++++++}
++++});
})|4645996|这基本上是手动检查focus和blur之前和之后的值，并调度一个新的'change'事件。{+bubbles:+true+}位是表单检测更改的位置。如果在ng-if中有任何datepicker元素，则需要将侦听器包装在$timeout中，以确保摘要最先发生，这样所有datepicker元素都存在。|4645997|希望这对某些人有帮助！|4645998|entityMap^0|15|8|1R|6|0|0|H|5|N|4|0|0|9|5|F|4|Y|8|19|H|25|5|31|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|T|$]]

I was using AngularJS and AngularStrap 2.3.7 and trying to catch the <code>'change'</code> event by listening to a <code>&lt;form&gt;</code> element (not the input itself) and none of the answers here worked for me. I tried to do:

<pre><code>$(form).on('change change.dp dp.change changeDate' function () {...})
</code></pre>

And nothing would fire. I ended up listening to the <code>focus</code> and <code>blur</code> events and setting a custom property before/after on the element itself:

<pre><code>// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () { 
 $('input[bs-datepicker]').on('focus', function (e){
 e.currentTarget.focusValue = e.currentTarget.value;
 }); 
 $('input[bs-datepicker]').on('blur', function (e){
 if (e.currentTarget.focusValue !== e.currentTarget.value) {
 var event = new Event('change', { bubbles: true });
 e.currentTarget.dispatchEvent(event);
 }
 });
})
</code></pre>

This basically manually checks the value before and after the <code>focus</code> and <code>blur</code> and dispatches a new <code>'change'</code> event. The <code>{ bubbles: true }</code> bit is what got the form to detect the change. If you have any datepicker elements inside of an <code>ng-if</code> you'll need to wrap the listeners in a <code>$timeout</code> to make sure the digest happens first so all of your datepicker elements exist.

Hope this helps someone!

blocks|key|139404|text|尝试使用下面的代码sample.it对我来说是有效的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|139405|var+date_input_field+=+$('input[name="date"]');
++++date_input_field+.datepicker({
++++++++dateFormat:+'/dd/mm/yyyy',
++++++++container:+container,
++++++++todayHighlight:+true,
++++++++autoclose:+true,
++++}).on('change',+function(selected){
++++++++alert("startDate..."%2Bselected.timeStamp);
++++});|code-block|syntax|javascript|139406|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try with below code sample.it is working for me
<pre><code>var date_input_field = $('input[name=&quot;date&quot;]');
 date_input_field .datepicker({
 dateFormat: '/dd/mm/yyyy',
 container: container,
 todayHighlight: true,
 autoclose: true,
 }).on('change', function(selected){
 alert(&quot;startDate...&quot;+selected.timeStamp);
 });
</code></pre>

blocks|key|139415|text|if($('.single_datetime').length){
++++++++$('.single_datetime').dateRangePicker({+format:+'DD.MM.YYYY+HH:mm',+language:+'tr',+autoClose:+true,+singleDate+:+true,+showShortcuts:+false,+time:+{enabled:+true}
++++++++}).bind('datepicker-change',function(event,obj){caclDay();});
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|139416|参考：https://www.chamonix-property.com/bower_components/jquery-date-range-picker/|unstyled|offset|length|139417|entityMap|0|LINK|mutability|MUTABLE|url|https://www.chamonix-property.com/bower_components/jquery-date-range-picker/^0|0|3|24|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>if($('.single_datetime').length){
 $('.single_datetime').dateRangePicker({ format: 'DD.MM.YYYY HH:mm', language: 'tr', autoClose: true, singleDate : true, showShortcuts: false, time: {enabled: true}
 }).bind('datepicker-change',function(event,obj){caclDay();});
 }
</code></pre>
Ref: <a href="https://www.chamonix-property.com/bower_components/jquery-date-range-picker/" rel="nofollow noreferrer">https://www.chamonix-property.com/bower_components/jquery-date-range-picker/</a>

<pre><code>&lt;script type="text/javascript"&gt;
 // When the document is ready
 $(document).ready(function () {
 $('.datepicker').datepicker({
 format: "yyyy-mm-dd",
 }).on('changeDate', function(ev){
 // do what you want here
 $(this).datepicker('hide');
 }).on('changeDate', function(ev){
 if ($('#startdate').val() != '' &amp;&amp; $('#enddate').val() != ''){
 $('#period').text(diffInDays() + ' d.'); 
 } else {
 $('#period').text("-");
 }
 });
 });
&lt;/script&gt;
</code></pre>

So here's what my datepicker looks like. So basically when I change date by clicking mouse it works good, however when I manually change date with keyboard or manually clear the date change date event doesn't get called. Is this a bug or am I doing something wrong here ?

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

问手动编辑日期或清除日期时，引导程序日期选择器更改日期事件不会触发
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问手动编辑日期或清除日期时，引导程序日期选择器更改日期事件不会触发EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问手动编辑日期或清除日期时，引导程序日期选择器更改日期事件不会触发
EN