只有条件为真时才打开datepicker?

时间:2018-02-07 17:04:56

标签: javascript jquery jquery-ui datepicker

我在“待办事项列表”表中使用了一个日期选择器,用户可以使用它来选择某个特定日期。我用它来选择某个"完成日期"如果待办事项标记为100%完成,我只想打开日期选择器。现在,如果待办事项没有标记为100%,则会打开日期选择器。有谁知道如何添加条件说法

if (todos[i].progress != 100) { *dont open datepicker* }

我已尝试将其添加到我的活动功能中,但它无法正常工作。

HTML:最后一个td元素用于datepicker。

tr class="rowTable dropdown-button" data-id="%todoID%" data-activates="todo_dropdown" data-context="true" data-type="edit-%canedit%" data-canedit="%canedit%" data-constrainwidth="false">
       <td class="tableData">
           <div class="checkbox" data-complete="%notTrue%" data-show="hidden">
               <div class="todo_checkbox"></div>
           </div>
       </td>
       <td class="tableData">%todoTitle%</td>
       <td class="tableData">%resources%</td>
       <td class="%isOverdue% tableData">%duedate%</td>
       <td class="tableData">%percentcomplete%</td>
       <td class="completedCalendar tableData"><input value="%dateCompleted%" class="datepicker picker_input" data-id="%todoID%" id="todo_completeddate" style="border:none" readonly="readonly"/></td>

JavaScript的:

$('.datepicker').on('change', function (e) {
       var $targ = $(e.currentTarget);
       var todoID = $targ.parents(".rowTable").data("id");
       var todos = currentItems;
       for (var i = 0; i < todos.length; i++) {
           if (todoID == todos[i].id) {
               if (todos[i].progress == 100) {
                   var dateSet = $('.datepicker[data-id=' + todoID + ']').val();
                   todos[i].completed_date = dateSet;
               }
           }
       }
 })

3 个答案:

答案 0 :(得分:0)

您可以检查更改条件,就像您在更换datePicker时一样。这可能是表格,表格等内的变化。在OnChange中,您可以检查条件并访问日期选择器并隐藏它或像这样显示

$(".datepicker").hide();
$(".datepicker").show();

答案 1 :(得分:0)

你应该尝试使用

beforeShow: function(input, inst) {
        // check condition here 
}

答案 2 :(得分:0)

我认为在您的情况下,您应该在从服务器加载数据时禁用/隐藏日期字段。

您还可以使用datepicker小部件的beforeShow事件。但是你无法阻止打开datepicker窗口。您可以在显示日历后立即隐藏日历。请注意,您必须在setTimeout中使用beforeShow,否则无法使用。

  beforeShow: function(input, inst) {
    setTimeout(function() { 
      if (condition) {
        $(".foo").datepicker("widget").hide();
      }
    }, 0);

}

See here for example