如何访问波斯日期选择器 jquery 插件的 onSelect 事件中的 (this) 属性答案

【问题标题】：How can I access the (this) attribute inside onSelect event of persian datepicker jquery plugin如何访问波斯日期选择器 jquery 插件的 onSelect 事件中的 (this) 属性
【发布时间】：2020-11-25 13:10:08
【问题描述】：

我在 dom 中有多个类的实例。就像下面的例子。

let element = $(".datepicker-birthdate").pDatepicker({
    observer: true,
    altField: '.observer-example-alt',
    format: 'YYYY/MM/DD',
    initialValue: false,
    autoClose: true,
    calendar:{
        'persian': {
            'locale': 'fa',
            'showHint': false
        },
        'gregorian': {
            'locale': 'en',
            'showHint': false
        }
    },
    onSelect: function (date, e){
        e: is undefine here also
        element: is the last instance of .datepicker-birthdate
    }
});

元素总是返回日期选择器的最后一个实例，但是我想访问我有更改的那个。有人对此有解决方案吗？

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

事实上，库应该在 onSelect 事件中提供 this 对象，而他们没有，也许像 Rory McCrossan 所描述的那样在类上使用 foreach 循环是最好的选择。

【讨论】：

【解决方案2】：

假设onSelect 函数没有接收事件或元素作为参数，考虑到您在问题中将它们描述为undefined 似乎就是这种情况，那么您可以手动循环遍历类并分别在它们上实例化日期选择器。这允许您在 select 处理函数中维护 this 引用：

$(".datepicker-birthdate").each(function() {
  let $datePicker = $(this);
  $datePicker.pDatepicker({
    observer: true,
    altField: '.observer-example-alt',
    format: 'YYYY/MM/DD',
    initialValue: false,
    autoClose: true,
    calendar: {
      'persian': {
        'locale': 'fa',
        'showHint': false
      },
      'gregorian': {
        'locale': 'en',
        'showHint': false
      }
    },
    onSelect: function(date) {
      // use $datepicker as needed here...
      $datePicker.addClass('foo');
    }
  });
});

【讨论】：

【解决方案3】：

第一步：打开 persian-datepicker.min.js

第二步：替换

e.model.options.onSelect(t);

与

e.model.options.onSelect(t, e);

第三步：之后：

$('').persianDatepicker({
        onSelect: function (formattedDate, e) {

           console.log($("#" + e.id).val());

        }
});

【讨论】：