如何使用jquery timepicker从输入文本框中设置fullcalendar中的开始时间和结束时间

时间:2017-03-31 12:29:51

标签: jquery fullcalendar timepicker jquery-ui-timepicker

在我的模态中,我有两个输入文本框startTime和endTime使用jquery timepicker

enter image description here

我能够在从jquery ui日历中选择的正确日期坚持事件,但是如何从开始时间和结束时间获取值,然后在fullcalendar的情况下设置这些值?

enter image description here

我知道如何获取这些输入中的值,例如$('#startTime')。val()但在那里堆叠以将其设置为fullcalendar的开始时间。

以下是我的代码:

  function setTimeValues(x,y)
{
    var startHour = parseInt( $('#startTime').val());
    var endHour = parseInt($('#endTime').val());

    //x = moment(x)
    //            .set({ hour: parseInt(_startHour), minute: parseInt(_startMinutes), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) }) 
    //            .toDate();

    // y = moment(y)
    //           .set({ hour: parseInt(_endHour), minute: parseInt(_endMinute), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) })
    //           .toDate();



    $("#calendar").fullCalendar('renderEvent',
    {
        title: $('#CustomerFullName :selected').text(),
        description: $('#description').val(),
        start: x,
        end: y,
        allDay: false
    },

        true)

谢谢!

2 个答案:

答案 0 :(得分:2)

尝试将日期格式设置为yyyy-mm-dd,然后将时间选择器格式化为:

$(document).ready(function(){
    //init
    $('#startTime').timepicker({ timeFormat: 'H:i' });
    $('#endTime').timepicker({ timeFormat: 'H:i' });
});

然后在start& end个变量使用:

start: x + "T" + startHour + ":00",
end: y + "T" + endHour + ":00",

并且不要忘记从开始时删除parseInt&结束时间,因为你需要的只是格式化文本

答案 1 :(得分:0)

我终于找到了一个使用javascript date函数实例化的解决方案,并附加了输入元素的实际值。 下面是代码

    var startHour =  $('#startTime').val();
    var endHour = $('#endTime').val();

    var s = new Date("April 9, 2016 " + startHour)
    var e = new Date("April 9, 2016 " + endtHour)

之后,使用时刻js设置开始日期和结束日期的日期,小时和分钟

     x = moment(x)
                .set({ hour: parseInt(s.getHours() - 8), minute: parseInt(s.getMinutes()), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) }) 
                .toDate();

     y = moment(y)
               .set({ hour: parseInt(e.getHours() - 8), minute: parseInt(e.getMinutes()), date: parseInt(_day), month: parseInt(_month), year: parseInt(_year) })
               .toDate();

正如您所注意到的,我减去了8因为由于某种原因,fullcalendar总是从输入元素jquery timepicker的Hour的初始值中加上8,所以我减去8。

fullcalendar代码

  $("#calendar").fullCalendar('renderEvent',
    {
        title: $('#CustomerFullName :selected').text(),
        description: $('#description').val(),
        start:  x,
        end: y,
        allDay: false
    },