Question

我有一个项目应用程序可以加载任意数量的＆＃34;任务＆＃34;记录到页面。它使用JavaScript构建Task记录HTML，然后在加载页面后将Tasks添加到DOM中。

我需要将日期选择器库附加到每个任务记录的某些日期字段。

我可以使用几乎所有的库，但我试图在这里使用这个轻量级的https://github.com/camerond/jquery-minical

加载该库后，通常可以执行以下操作，将文本输入转换为日期选择器字段...在此处工作演示http://codepen.io/jasondavis/pen/LEaVbE?editors=101

<input name="date_input" type="text">

// Code that is supposed to make a text filed into a Date-time selector/picker!
$(".date_input").minical({
    trigger: "a.calendar_icon"
});

现在，我的演示应用程序已针对此问题进行处理... http://jsfiddle.net/jasondavis/pk109mkm/

为每个Task记录调用以下函数，它会在DOM中创建一个Task条目...

// Add new Task Row HTML to the DOM
function add_task_row(taskRow){

    // Merge Function Parameters with Default Values
    taskRow = merge({
        taskid: '',
        projectid: '',
        name: '',
        description: '',
        status: '',
        priority: '',
        type: '',
        sort: '',
        heading: '',
        date_started: '',
        date_completed: '',
        date_due: '',
        milestone_id: '',
        assigned_user_id: '',
        targetElement: 'project_tasks',
    }, taskRow || {});  

    // var num is used to have a Number assigned to each Task Row.
    // 1st We get the value stored in #tasks_count
    var num = document.getElementById('tasks_count').value;

    // Create a DIV Node for our new Task Row and set the ID attribute value to 'task_'+num
    var newTaskRow = document.createElement('div');
    newTaskRow.setAttribute('id','task_'+num);  

    newTaskRow.innerHTML =  '<span class="handle" title="Drag and Drop to Reorder Tasks"></span>';


    // Add a Project Task Row
    newTaskRow.innerHTML +=  '<div class="task-name-wrap"><input class="name" name="name_'+num+'" id="name_'+num+'" placeholder="Name:" size=45 type="text" value="'+taskRow.name+'"></div>';
    newTaskRow.innerHTML += '<div class="task-status-wrap"><span class="selection-field-label">Status:</span><select name="status_'+num+'" id="status_'+num+'" class="status">'+buildFormSelection(statusArray, taskRow.status)+'</select></div>';
    newTaskRow.innerHTML += '<div class="task-priority-wrap"><span class="selection-field-label">Priority:</span><select name="priority_'+num+'" id="priority_'+num+'" class="priority">'+buildFormSelection(prioritiesArray, taskRow.priority)+'</select></div>';
    newTaskRow.innerHTML += '<div class="task-type-wrap"><span class="selection-field-label">Type:</span><select name="type_'+num+'" id="type_'+num+'" class="type">'+buildFormSelection(typesArray, taskRow.type)+'</select></div>';

    // milestone
    newTaskRow.innerHTML += '<div class="task-milestone-wrap"><span class="selection-field-label">Milestone:</span><select name="milestone_id_'+num+'" id="milestone_'+num+'" class="milestone">'+buildFormSelectionMultidimensionalArray(milestonesArray, taskRow.milestone_id)+'</select></div>';

    newTaskRow.innerHTML +=  '<input name="date_due_'+num+'" id="date_due_'+num+'" class="date_due" size=15 type="text" value="'+taskRow.date_due+'">';

    newTaskRow.innerHTML +=  '<input name="assigned_user_id_'+num+'" id="assigned_user_id_'+num+'" class="assigned_user_id" size=15 type="text" value="">';

    newTaskRow.innerHTML +=  '<input class="date_input" autocomplete="off" type="text" name="date_completed" id="date_completed" value="" title="" tabindex="0" size="11" maxlength="10"><a class="calendar_icon" href="#"></a>';


    newTaskRow.innerHTML += '<div class="task-tools-wrap"><a class="insert_task" data-parent-task-id="task_'+num+'"><span class="insert-arrow-icon"></span></a><a class="delete_task" onclick="remove_item_row('+num+')"><span class="trash-icon"></span> Delete</a></div>';

    newTaskRow.innerHTML += '<hr><br style="clear:both;">';

    var task = document.getElementById('project_tasks');
    task.appendChild(newTaskRow);

}

因此，在将我的任务记录添加到页面后，我需要以某种方式将工作日期选择器附加到每个.date_input输入字段！任何帮助或想法如何做到这一点？

回顾一下，我需要能够在页面加载后动态地向网页添加任意数量的文本输入字段，然后让这些输入字段与JavaScript日期时间选择器/选择器一起使用。

它几乎可以作为日期选择器的任何库。我不确定如何使用它：
a）无限的输入字段 b）在DOM已经加载之后添加的输入字段！

请帮忙！

更新问题

在这个JSFiddle示例的第486行：http://jsfiddle.net/pk109mkm/7/是为每个Task记录设置DatePicker库的代码。它的工作原理是为我们分配给它的文件制作一个可用的日期选择器。但是由于某些未知的原因，它并不尊重我尝试传递给它的任何特殊选项！

$(task).find(".date_input").minical({
    trigger: "a.calendar_icon"
});

为了演示，这里有一个新的JSFiddle，它具有完全相同的代码，除了我已经将一个Options对象传递给DatePicker对象.... http://jsfiddle.net/jasondavis/pk109mkm/10/

选项对象看起来像这样......

$(task).find(".date_input").minical({
  offset: {
    x: 100,
    y: 50
  },
  trigger: "a.calendar_icon",
  read_only: true,
  align_to_trigger: false,
  date_format: function(date) {
    return [date.getDate(), date.getMonth() + 1, date.getFullYear()].join("/");
  },
  appendCalendarTo: function() {
      return $('#project_tasks');
  },
  //initialize_with_date: true,
  show_clear_link: true,
});

如果您看到示例JSFiddle，您会注意到这些选项都没有被使用！如果您查看浏览器控制台，您还会看到没有错误！

现在，如果你转到这个演示JSFiddle示例http://jsfiddle.net/jasondavis/2q2d6gza/，它在加载DOM后没有添加多个日期选择器....你会看到完全相同的代码和选项会产生很大的不同，因为它们实际上是影响这个演示！

Answer 1

尝试添加

$(task).find(".date_input").minical({
    trigger: "a.calendar_icon"
});

到你的功能结束。

像

// Add new Task Row HTML to the DOM
function add_task_row(taskRow){

    // Merge Function Parameters with Default Values
    taskRow = merge({
        taskid: '',
        projectid: '',
        name: '',
        description: '',
        status: '',
        priority: '',
        type: '',
        sort: '',
        heading: '',
        date_started: '',
        date_completed: '',
        date_due: '',
        milestone_id: '',
        assigned_user_id: '',
        targetElement: 'project_tasks',
    }, taskRow || {});  

    // var num is used to have a Number assigned to each Task Row.
    // 1st We get the value stored in #tasks_count
    var num = document.getElementById('tasks_count').value;

    // Create a DIV Node for our new Task Row and set the ID attribute value to 'task_'+num
    var newTaskRow = document.createElement('div');
    newTaskRow.setAttribute('id','task_'+num);  

    newTaskRow.innerHTML =  '<span class="handle" title="Drag and Drop to Reorder Tasks"></span>';


    // Add a Project Task Row
    newTaskRow.innerHTML +=  '<div class="task-name-wrap"><input class="name" name="name_'+num+'" id="name_'+num+'" placeholder="Name:" size=45 type="text" value="'+taskRow.name+'"></div>';
    newTaskRow.innerHTML += '<div class="task-status-wrap"><span class="selection-field-label">Status:</span><select name="status_'+num+'" id="status_'+num+'" class="status">'+buildFormSelection(statusArray, taskRow.status)+'</select></div>';
    newTaskRow.innerHTML += '<div class="task-priority-wrap"><span class="selection-field-label">Priority:</span><select name="priority_'+num+'" id="priority_'+num+'" class="priority">'+buildFormSelection(prioritiesArray, taskRow.priority)+'</select></div>';
    newTaskRow.innerHTML += '<div class="task-type-wrap"><span class="selection-field-label">Type:</span><select name="type_'+num+'" id="type_'+num+'" class="type">'+buildFormSelection(typesArray, taskRow.type)+'</select></div>';

    // milestone
    newTaskRow.innerHTML += '<div class="task-milestone-wrap"><span class="selection-field-label">Milestone:</span><select name="milestone_id_'+num+'" id="milestone_'+num+'" class="milestone">'+buildFormSelectionMultidimensionalArray(milestonesArray, taskRow.milestone_id)+'</select></div>';

    newTaskRow.innerHTML +=  '<input name="date_due_'+num+'" id="date_due_'+num+'" class="date_due" size=15 type="text" value="'+taskRow.date_due+'">';

    newTaskRow.innerHTML +=  '<input name="assigned_user_id_'+num+'" id="assigned_user_id_'+num+'" class="assigned_user_id" size=15 type="text" value="">';

    newTaskRow.innerHTML +=  '<input class="date_input" autocomplete="off" type="text" name="date_completed" id="date_completed" value="" title="" tabindex="0" size="11" maxlength="10"><a class="calendar_icon" href="#"></a>';


    newTaskRow.innerHTML += '<div class="task-tools-wrap"><a class="insert_task" data-parent-task-id="task_'+num+'"><span class="insert-arrow-icon"></span></a><a class="delete_task" onclick="remove_item_row('+num+')"><span class="trash-icon"></span> Delete</a></div>';

    newTaskRow.innerHTML += '<hr><br style="clear:both;">';

    var task = document.getElementById('project_tasks');
    task.appendChild(newTaskRow);

    $(newTaskRow).find(".date_input").minical({
        trigger: "a.calendar_icon"
    });

}

这是工作小提琴http://jsfiddle.net/pk109mkm/7/

添加无限的文本输入DatePickers到使用jQuery加载DOM后添加的字段？

1 个答案: