jquery年月日曆日期輸入不起作用

Question

我正在使用此 http://www.bootstrap-year-calendar.com/#Examples/Simple Boostrap年曆。但是當我調用模態輸入名稱even-start-date和event-end-date時，我的模態不會工作，並且會拋出我粘貼在底部的錯誤。在這方面有人可以幫助我嗎？如果我刪除這些日期輸入的模態工作正常

function editEvent(event) { 
$('#event-modal input[name="event-index"]').val(event ? event.id : ''); 
$('#event-modal input[name="event-name"]').val(event ? event.name : ''); 
$('#event-modal input[name="event-location"]').val(event ? event.location : ''); 
$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : ''); 
$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : ''); 
$('#event-modal').modal(); 
} 

function deleteEvent(event) { 
    var dataSource = $('#calendar').data('calendar').getDataSource(); 

    for(var i in dataSource) { 
    if(dataSource[i].id == event.id) { 
     dataSource.splice(i, 1); 
     break; 
    } 
} 

$('#calendar').data('calendar').setDataSource(dataSource); 
} 

    function saveEvent() { 
    var event = { 
    id: $('#event-modal input[name="event-index"]').val(), 
    name: $('#event-modal input[name="event-name"]').val(), 
    location: $('#event-modal input[name="event-location"]').val(), 
     startDate: $('#event-modal input[name="event-start- date"]').datepicker('getDate'), 
     endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate') 
} 

var dataSource = $('#calendar').data('calendar').getDataSource(); 

if(event.id) { 
    for(var i in dataSource) { 
     if(dataSource[i].id == event.id) { 
      dataSource[i].name = event.name; 
      dataSource[i].location = event.location; 
      dataSource[i].startDate = event.startDate; 
      dataSource[i].endDate = event.endDate; 
     } 
    } 
} 
else 
{ 
    var newId = 0; 
    for(var i in dataSource) { 
     if(dataSource[i].id > newId) { 
      newId = dataSource[i].id; 
     } 
    } 

    newId++; 
    event.id = newId; 

    dataSource.push(event); 
} 

$('#calendar').data('calendar').setDataSource(dataSource); 
$('#event-modal').modal('hide'); 
    } 
    $(document).ready(function(){ 
    $(function() { 
var currentYear = new Date().getFullYear(); 

$('#calendar').calendar({ 
    enableContextMenu: true, 
    enableRangeSelection: true, 
    contextMenuItems:[ 
     { 
      text: 'Update', 
      click: editEvent 
     }, 
     { 
      text: 'Delete', 
      click: deleteEvent 
     } 
    ], 
    selectRange: function(e) { 
     editEvent({ startDate: e.startDate, endDate: e.endDate }); 
    }, 
    mouseOnDay: function(e) { 
     if(e.events.length > 0) { 
      var content = ''; 

      for(var i in e.events) { 
       content += '<div class="event-tooltip-content">' 
           + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>' 
           + '<div class="event-location">' + e.events[i].location + '</div>' 
          + '</div>'; 
      } 

      $(e.element).popover({ 
       trigger: 'manual', 
       container: 'body', 
       html:true, 
       content: content 
      }); 

      $(e.element).popover('show'); 
     } 
    }, 
    mouseOutDay: function(e) { 
     if(e.events.length > 0) { 
      $(e.element).popover('hide'); 
     } 
    }, 
    dayContextMenu: function(e) { 
     $(e.element).popover('hide'); 
    }, 
    dataSource: [ 
     { 
      id: 0, 
      name: 'Google I/O', 
      location: 'San Francisco, CA', 
      startDate: new Date(currentYear, 4, 28), 
      endDate: new Date(currentYear, 4, 29) 
     }, 
     { 
      id: 1, 
      name: 'Microsoft Convergence', 
      location: 'New Orleans, LA', 
      startDate: new Date(currentYear, 2, 16), 
      endDate: new Date(currentYear, 2, 19) 
     }, 
     { 
      id: 2, 
      name: 'Microsoft Build Developer Conference', 
      location: 'San Francisco, CA', 
      startDate: new Date(currentYear, 3, 29), 
      endDate: new Date(currentYear, 4, 1) 
     }, 
     { 
      id: 3, 
      name: 'Apple Special Event', 
      location: 'San Francisco, CA', 
      startDate: new Date(currentYear, 8, 1), 
      endDate: new Date(currentYear, 8, 1) 
     }, 
     { 
      id: 4, 
      name: 'Apple Keynote', 
      location: 'San Francisco, CA', 
      startDate: new Date(currentYear, 8, 9), 
      endDate: new Date(currentYear, 8, 9) 
     }, 
     { 
      id: 5, 
      name: 'Chrome Developer Summit', 
      location: 'Mountain View, CA', 
      startDate: new Date(currentYear, 10, 17), 
      endDate: new Date(currentYear, 10, 18) 
     }, 
     { 
      id: 6, 
      name: 'F8 2015', 
      location: 'San Francisco, CA', 
      startDate: new Date(currentYear, 2, 25), 
      endDate: new Date(currentYear, 2, 26) 
     }, 
     { 
      id: 7, 
      name: 'Yahoo Mobile Developer Conference', 
      location: 'New York', 
      startDate: new Date(currentYear, 7, 25), 
      endDate: new Date(currentYear, 7, 26) 
     }, 
     { 
      id: 8, 
      name: 'Android Developer Conference', 
      location: 'Santa Clara, CA', 
      startDate: new Date(currentYear, 11, 1), 
      endDate: new Date(currentYear, 11, 4) 
     }, 
     { 
      id: 9, 
      name: 'LA Tech Summit', 
      location: 'Los Angeles, CA', 
      startDate: new Date(currentYear, 10, 17), 
      endDate: new Date(currentYear, 10, 17) 
     } 
    ] 
}); 

$('#save-event').click(function() { 
    saveEvent(); 
}); 
}); 

}); 



    </script> 

Uncaught TypeError: Cannot read property 'empty' of undefined at Datepicker._updateDatepicker (ui/1.12.1/jquery-ui.js:7976:13) at HTMLInputElement. (hui/1.12.1/jquery-ui.js:9256:5) at Function.each (jquery-1.12.4.js:370:19) at jQuery.fn.init.each (jquery-1.12.4.js:137:17) at jQuery.fn.init.$.fn.datepicker (ui/1.12.1/jquery-ui.js:9253:14) at editEvent (production/calendar.php:246:54) at HTMLDivElement.selectRange (/production/calendar.php:321:13) at HTMLDivElement.dispatch (https://code.jquery.com/jquery-1.12.4.js:5226:27) at HTMLDivElement.elemData.handle (jquery-1.12.4.js:4878:28) at Object.trigger (jquery-1.12.4.js:5130:12)

Answer 1

而不是使用$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');，你將不得不使用的setDate方法，像這樣$('#event-modal input[name="event-start-date"]').datepicker('setDate', event ? event.startDate : '');