完整日历无法找出正确的时刻.js格式

Question

我正在尝试在完整的日历中设置一个时间表系统。与我目前的代码，当你在日历上点击一天，它带来了一个模式，显示的日子和你点击的时间。然后，该模式允许您根据该日期和时间向日历添加事件。

我想要的是让应用程序只通过点击来传递一天，并通过模态来传递时间。

如果我将日期格式化为("HH:mm:ss YYYY-MM-DD" )，我可以传入正确的日期，一切都很好。唯一的事情是我不希望YYYY-MM-DD部分出现在我的模态。如果我修剪它只是("HH:mm:ss" )它更新日历，但更新的具体时间为每一天的日历无限期。

我怎么能只显示时间在模态框，而仍然通过年，月和日的日历?

我的代码是

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' );
  });
});

和

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();
        }
      });
    }
  }
});

app图片

Answer 1

我把日期和时间分成两个时刻，像这样:

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

然后对一个使用日期选择器，对另一个使用时间选择器。当保存到数据库时，我需要将它们混在一起以获得日期/时间