FullCalendar kann das richtige moment.js Format nicht herausfinden

Question

Ich versuche, ein Zeitplansystem in vollem Kalender einzurichten. Mit meinem aktuellen Code, wenn Sie auf einen Tag im Kalender klicken, wird ein Modal angezeigt, das den Tag und die Uhrzeit anzeigt, auf die Sie geklickt haben. Mit diesem Modal können Sie dem Kalender Ereignisse basierend auf diesem Tag und dieser Uhrzeit hinzufügen.

Was ich will ist für die App, nur den Tag am Klick zu übergeben und die Zeit durch das Modal zu übergeben.

Wenn ich das Datum zu ("HH:mm:ss YYYY-MM-DD") formatiere kann ich das korrekte Datum einreichen und alles ist gut. Die einzige Sache ist, dass ich nicht will, dass der YYYY-MM-DD Teil in meinem Modal erscheint. Wenn ich es nur auf ("HH:mm:ss") trimme Es aktualisiert den Kalender, aber aktualisiert diese bestimmte Zeit für jeden Tag im Kalender auf unbestimmte Zeit.

Wie kann ich nur die Zeit in der modalen Box anzeigen, während ich noch Jahr, Monat und Tag an den Kalender übergebe?

Mein Code ist

let isPast = (date) => { 
    let today = moment().format(); 
    return moment(today).isAfter(date); 
}; 


Template.events.onCreated(() => { 
    let template = Template.instance(); 
    template.subscribe('events'); 
}); 

Template.events.onRendered(() => { 
    $('#events-calendar').fullCalendar({ 
    header: { 
     center: 'month,agendaWeek' 
    }, 


    events(start, end, timezone, callback) { 
     let data = Events.find().fetch().map((event) => { 
     event.editable = !isPast(event.start); 
     return event; 
     }); 

     if (data) { 
     callback(data); 
     } 
    }, 
    eventRender(event, element) { 
     element.find('.fc-content').html(
     `<h4>${ event.title }</h4> 
     <p class="guest-count">${ event.guests } Guests</p> 
     <p class="type-${ event.type }">#${ event.type }</p> 
     ` 
     ); 
     }, 
     eventDrop(event, delta, revert) { 
     let date = event.start.format(); 
     if (!isPast(date)) { 
     let update = { 
      _id: event._id, 
      start: date, 
      end: date 
     }; 

     Meteor.call('editEvent', update, (error) => { 
      if (error) { 
      Bert.alert(error.reason, 'danger'); 
      } 
     }); 
     } else { 
     revert(); 
     Bert.alert('Sorry, you can\'t move items to the past!', 'danger'); 
     } 
    }, 
     dayClick(date) { 
     Session.set('eventModal', { type: 'add', date: date.format("HH:mm:ss YYYY-MM-DD") }); 
     $('#add-edit-event-modal').modal('show'); 
    }, 
    eventClick(event) { 
     Session.set('eventModal', { type: 'edit', event: event._id }); 
     $('#add-edit-event-modal').modal('show'); 
    } 
    }); 
Tracker.autorun(() => { 
    Events.find().fetch(); 
    $('#events-calendar').fullCalendar('refetchEvents'); 
    }); 
}); 

Und

let closeModal =() => { 
    $('#add-edit-event-modal').modal('hide'); 
    $('.modal-backdrop').fadeOut(); 
}; 



Template.addEditEventModal.helpers({ 
    modalType(type) { 
    let eventModal = Session.get('eventModal'); 
    if (eventModal) { 
     return eventModal.type === type; 
    } 
    }, 
    modalLabel() { 
    let eventModal = Session.get('eventModal'); 

    if (eventModal) { 
     return { 
     button: eventModal.type === 'edit' ? 'Edit' : 'Add', 
     label: eventModal.type === 'edit' ? 'Edit' : 'Add an' 
     }; 
    } 
    }, 
    selected(v1, v2) { 
    return v1 === v2; 
    }, 
    event() { 
    let eventModal = Session.get('eventModal'); 

    if (eventModal) { 
     return eventModal.type === 'edit' ? Events.findOne(eventModal.event) : { 
     start: eventModal.date, 
     end: eventModal.date 
     }; 
    } 
    } 
}); 




Template.addEditEventModal.events({ 
    'submit form' (event, template) { 
    event.preventDefault(); 

    let eventModal = Session.get('eventModal'), 
     submitType = eventModal.type === 'edit' ? 'editEvent' : 'addEvent', 
     eventItem = { 
      title: template.find('[name="title"]').value, 
      start: template.find('[name="start"]').value, 
      end: template.find('[name="end"]').value, 
      type: template.find('[name="type"] option:selected').value, 
      guests: parseInt(template.find('[name="guests"]').value, 10) 
     }; 

    if (submitType === 'editEvent') { 
     eventItem._id = eventModal.event; 
    } 

    Meteor.call(submitType, eventItem, (error) => { 
     if (error) { 
     Bert.alert(error.reason, 'danger'); 
     } else { 
     Bert.alert(`Event ${ eventModal.type }ed!`, 'success'); 
     closeModal(); 
     } 
    }); 
    }, 
    'click .delete-event' (event, template) { 
    let eventModal = Session.get('eventModal'); 
    if (confirm('Are you sure? This is permanent.')) { 
     Meteor.call('removeEvent', eventModal.event, (error) => { 
     if (error) { 
      Bert.alert(error.reason, 'danger'); 
     } else { 
      Bert.alert('Event deleted!', 'success'); 
      closeModal(); 
     } 
     }); 
    } 
    } 
}); 

Image of app

Answer 1

ich trennen das Datum und die Zeit in zwei Momente wie folgt aus:

this.dayClick = function(when) { 
    this.event.selectedTime = when; 
    this.event.selectedDate = when.clone(); 

Und Verwenden Sie dann einen Datumszähler für einen und einen Zeitzähler für den anderen. Beim Speichern in der Datenbank muss ich sie für ein Datum/Uhrzeit

zusammensetzen