2016-02-10 09:51
浏览 124

JQuery Datepicker无法正常工作


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>


$(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" />

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() {
    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> 
<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?


I've already got defined optionTest as below:

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

    $(this).change(function() {

      if (option.clearOnChange) {
      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);

      return this;

You can test It at FIDDLE

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doudiao2335 2016-02-10 10:09

    Fiddle here

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

      $.fn.optionTest.isArray = function(val) {
        return Object.prototype.toString.call(val) === '[object Array]';
      $.fn.optionTest.defaults = {
    解决 无用
    打赏 举报

相关推荐 更多相似问题