How can I access the (this) attribute inside onSelect event of persian datepicker jquery plugin

user_13524525 0
Viewed 394

I have multiple instances of a class inside the dom. like the example below.

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
    }
});

the element always return the last instance of date picker, however i want to access the one that I have changes. Does anyone has a solution around this?

datepicker jquery
3 Answers

In fact the library should provide the this object inside onSelect event, while they did not, perhaps using a foreach loop on the class as Rory McCrossan described would be the best alternative.

user_88301500

Assuming that the onSelect function does not receive the event or the element as parameters, which seems to be the case given your description of them being undefined in the question, then you can instead manually loop through the elements in the class and instantiate the date picker on them individually. This allows you to maintain the this reference within the select handler function:

$(".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');
    }
  });
});
user_5194130

step 1: open the persian-datepicker.min.js

step2: replace

e.model.options.onSelect(t);

with

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

step3: after:

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

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

        }
});
user_73099770
Related