jQuery 选择日期选择器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9210451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:30:06  来源:igfitidea点击:

Datepicker onSelect

jquerydatepickeronselect

提问by oussama.tn

I have an input [date_caisse] with class: datepicker-inline AND id: [date_caisse]

我有一个输入 [date_caisse] 类:datepicker-inline AND id:[date_caisse]

I have this function initialized on all my web pages:

我在所有网页上都初始化了这个函数:

function InitEvents () {

$('.datepicker-inline').datepicker({

    showButtonPanel: true,  /*added by oussama*/
    changeMonth: true, /*added by oussama*/
    changeYear: true, /*added by oussama*/
    firstDay: 1,
    dateFormat: 'yy-mm-dd',/*'dd/mm/yy'*/
    onSelect: function (dateText, inst) {
        //alert('select!');
        id = $(this).attr('id');
        parts = id.split('-');
        id2 = parts[parts.length -1];
        $('#datepicker-target-id-' + id2).val(dateText);
    }
});

}

}

I want to apply onSelect only on the current page, so this is what I did:

我只想在当前页面上应用 onSelect,所以这就是我所做的:

$('#date_caisse').datepicker({

    onSelect: function (dateText, inst) {
        alert('select!');
    }
});

When I put alert('select!');on the main js file (which is called in all pages) it works! but it doesn't when I try to trigger the action through the current file.

当我把 alert('select!'); 在主 js 文件(在所有页面中都调用)它工作!但是当我尝试通过当前文件触发操作时它不会。

Maybe, onSelect shouldn't be called twice.

也许,onSelect 不应该被调用两次。

So, anyone could help me please?

所以,有人可以帮我吗?

Thanks and have a good day!

谢谢,祝你有美好的一天!

回答by themarcuz

Did you put your second function inside a jquery initialization block? I mean, it should looks like

您是否将第二个函数放在 jquery 初始化块中?我的意思是,它应该看起来像

$(function(){
   $('#date_caisse').datepicker({
      onSelect: function (dateText, inst) {
         alert('select!');
      }
   });
});

Edited:

编辑:

Ok, I got it. The first time the datepicker is initialized, the original dom element is marked with a new class addition, called hasDatepickerthat prevent subsequent initialization/reconfiguration. The way I found to get rid of it is to remove that marker befor doing any modification to the datepicker's configuration. Thus:

好,我知道了。第一次初始化datepicker 时,原始 dom 元素被标记为一个新的类添加,称为hasDatepicker,以防止后续初始化/重新配置。我发现摆脱它的方法是在对日期选择器的配置进行任何修改之前删除该标记。因此:

$(function() {
   $('#date_caisse').removeClass('hasDatepicker');
   $('#date_caisse').datepicker({
       onSelect: function(dateText, inst) {
           alert('overridden!');
       }
   });
});

Give it a try!

试一试!

回答by Chris

Note: the datepicker does notfire the change event for the element if you set the onSelectoption.

注:日期选择器并没有如果设置了触发事件改变为元素onSelect选项。

If there is any chance you need to respond to the changeevent for the element you need to remember to fire the change event yourself when setting onSelect(), e.g.:

如果有任何机会您需要响应change元素的事件,请记住在设置时自己触发更改事件onSelect(),例如:

$(function(){
   $('#date_caisse').datepicker({
      onSelect: function (dateText, inst) {
         alert('select!');
         // Remember to fire the change event...
         if (inst.input) {
             inst.input.trigger('change');
         };
      }
   });
});

An alternative to using onSelectis to bind to the dateSelectedevent which the datepicker fires.

使用的替代方法onSelect是绑定到dateSelected日期选择器触发的事件。