JQuery Datepicker无法正常工作

Question

EXPLAINATION

I have dropdown list, after selecting any value It adding 2 input fields (date type). I can add multiple fields like shown in image below:

Problem is that JQuery Datepicker not working in this case (not poping-up calendar).

---

I'm including Datepicker library:

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Usage:

$(function() {
    $( "#from" ).datepicker({
      monthNamesShort: $.datepicker.regional["en"].monthNames,
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd'
  });
}); 

If I'm using It in following, It working correctly:

<div class="test">
<label for="from">Date Applied</label>
<input id="from" type="date" name="to" class="field-style field-split25-4 align-left" placeholder="Date To" />
</div>

If I'm trying to add fields dynamically, something like that, It not working (not poping-up calendar):

  $.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
  };
  $.fn.optionTest.defaults = {
    clearOnChange: false,
    actionId: '#action',
    indexOptions: {
    class: 'div-format-test'
    },
    rowOptions: {
      id: 'option',
      class: 'div-format',
      tag: 'tr'   
    },
    fromOptions: {
      id: 'from',
      name: 'from',
      type: 'date',
      placeholder: 'Date of Issue',
      size: 20,
      class: 'div-format-30'
    },
    toOptions: {
      id: 'to',
      name: 'to',
      type: 'date',
      placeholder: 'Date of Expire',
      size: 20,
      class: 'div-format-30'
    },
    labelOptions: {
      class: 'test-label'
    },
    removeLinkOptions: {
      class: 'removeRow',
      href: 'javascript:;'
    }
  };

$(document).ready(function() {
  $('select').optionTest({
    actionId: '#action2',
    clearOnChange: false
  });
});

// body
<div class="header">
  <select id='options' class="field-style div-format align-left">
    <option selected disabled value="0">Select certificates</option>
    <option value="1">PSSR</option>
    <option value="2">Adv. F.F.</option>
    <option value="3">Survival</option>
    <option value="4">HAZMAT</option>
    <option value="5">First Aid</option>
    <option value="6">Med. Care</option>
    <option value="7">SSO</option>
    <option value="8">GMDSS</option>
    <option value="9">Rad. Obs.</option>
    <option value="10">ARPA</option>
    <option value="11">ECDIS</option>
    <option value="12">BT&RM</option>
    <option value="13">Oil. Tank.</option>
    <option value="14">Ch. Tank.</option>
    <option value="15">LPG</option>
    <option value="16">LNG</option> 
  </select>  
</div>
<div id="action2"></div>

Strange thing I noticed with browser inspector, that If I add multiple input fields It generating different Id's for all fields like: from-1, from-2, from-3 and so on.

So I've tried to change Datepicker's function like

$( "#from-1" ).datepicker({
...

But the same issue - not working. Have you any ideas?

UPDATE

I've already got defined optionTest as below:

$(function() {
  $.fn.optionTest = function(opts) {
    var option = $.extend({}, $.fn.optionTest.defaults, opts);


    $(this).change(function() {
            option.holderObject=$(this);

      if (option.clearOnChange) {
        $(option.actionId).empty();
      }
      var val = $(this).val();
      if ($.fn.optionTest.isArray(val)) {
        $.fn.optionTest.parseArray(val, option);
      } else {
                var label =$(this).children("option:selected").eq(0).text();
        $.fn.optionTest.parseContent(val, option, label);
      }

      $('.' + option.removeLinkOptions.class).click(function(event) {
        $.fn.optionTest.removeRow(this, option);
        event.preventDefault();

      });
      return this;
    });
  };
...

You can test It at FIDDLE

Answer 1

Fiddle here

Define optionTest as $.fn.optionTest=function(){}; before you define the other custom functions as below. This will fix the issue

  $.fn.optionTest=function(){};

  $.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
  };
  $.fn.optionTest.defaults = {
    ....