如何使用 jquery timepicker 从输入文本框中设置完整日历中的开始时间和结束时间答案

【问题标题】：How to set start time and end time in fullcalendar from input textboxes using jquery timepicker如何使用 jquery timepicker 从输入文本框中设置完整日历中的开始时间和结束时间
【发布时间】：2017-03-31 12:29:50
【问题描述】：

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

我可以将事件粘贴在从 jquery ui 日历中选择的正确日期，但是如何从开始时间和结束时间获取值，然后在全日历事件中设置这些值？

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

下面是我的代码：

  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)

谢谢！

【问题讨论】：

我不确定 jquery timepicker 如何返回值，但 parseInt 可能会破坏数据
我确实做到了，但该事件未在完整日历中呈现。
我同意@Daffy，在开始和结束变量中你应该使用日期作为this format 例如2010-01-07
@SalahEddineLahniche 我上面已经有一个jquery datepicker，这就是为什么我没有在开始时间和结束时间文本框的输入中使用它。

标签： jquery fullcalendar timepicker jquery-ui-timepicker

【解决方案1】：

尝试将日期格式化为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，因为您只需要格式化文本

【讨论】：

嗨，它不起作用。此代码有效，但前提是我解析小时和分钟（硬编码）而不是来自输入 x = moment(x) .set({ hour: parseInt(_startHour), minute: parseInt(_startMinutes), date: parseInt( _day), month: parseInt(_month), year: parseInt(_year) }) .toDate();
我只是不知道如何从 jquery timepicker 输入值中为 _startHour 和 _startMinutes 提供值。
尝试将 hh:mm:ss 更改为 H:i，我已经尝试过并且它有效，例如 $('#startTime').val() 返回 20:00 所以我添加到它 :00 几秒钟然后我将其添加到 2017-03-31T 以在 fullCalendar 中使用正确的日期格式

【解决方案2】：

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

    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。

全日历代码

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

【讨论】：