如何将完整的日历日期添加到动态文本框

Question

虽然我使用的是 Class，但我的文本框正在从日历中获取值，但所有文本框的日期仍然相同。我在我的项目中添加新行，所有行都包含日期时间文本框我已将 class 分配给该文本框当我 select 第二个文本框中的日期时，第一个文本框的日期也随之更改，并用第二个文本框覆盖它，反之亦然。

以下是我生成新行的代码：-

 $(function () {
        $('#addNewRow').click(function () {
            //$(".datepick").datetimepicker("destroy");

            $('<tr id="tablerow' + counter + '">< >' +

                                 @*<tr class="editorRow">*@
                                            $('#LineDEtail').find("#tablerow0:first").html() +
                                            @*</tr>*@

                '</>' +
                '<td style="padding-bottom:5px !important;">' +
                '<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');" >Delete</button>' +
                '</td>' +
                '</tr>').appendTo('#submissionTable');
            //$(".datepick").datetimepicker();
            clickmeforcalender();
            counter++;
            return false;

        });
    });

以下是我获取保存在日历中的事件的代码在这段代码中，我定义了从完整日历中获取值的函数。我强调了那部分。

 $(".datepick").click(function () {
        debugger


        $('#calendar').show();
        var events = [];
        $.ajax({
            type: "GET",
            url: "/Booking/GetEvents",
            success: function (data) {
                $.each(data, function (i, a) {
                    events.push({
                        title: a.Function_Name,
                        start: a.Function_Date1,
                        url: a.Booking_ID
                        //Function_Slot:a.Function_Slot,
                        //Marquee_Name:a.Marquee_Name,
                        //Marquee_Slot: a.Marquee_Slot

                    });

                        $("#calendar").css("background-color", "WHITE");
                })

                GenerateCalender(events);
            },

            error: function (error) {
                alert('failed');
            }
        });

        ***$('#calendar').fullCalendar({
            dayClick: function (date, jsEvent, view) {
                $(".datepick").val(date.format())
            }
        });***

    });

.datepick 是我的文本框的 class 名称

这是文本框代码

 <td class="date col-sm-2">
    @Html.TextBoxFor(x => x.Function_Date, new { @class = "date glyphicon glyphicon-calendar datepick", @id = "", @name = "date[]", @onclick = "clickmeforcalender();" })
</td>

下面是GenerateCalender()的代码

 function GenerateCalender(events) {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'addEventButton',
            right: 'month,agendaWeek,agendaDay,listWeek',

        },
        defaultDate: new Date(),
        navLinks: true,
        editable: true,
        eventLimit: true,
        events: events,



        eventClick: function (calEvent, jsEvent, view) {
            selectedEvent = calEvent;
            //alert('Event: ' + calEvent.title);
            jsEvent.preventDefault();

            $('#myModal #eventTitle').text(calEvent.title);
            var $description = $('<div/>');
            $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));

            $description.append($('<p/>').html('<b>Description:</b>' + calEvent.title));
            $('#myModal #pDetails').empty().html($description);

            var temp = $('#myModal').modal();


        },


    });
}

需要快速帮助谢谢

Answer 1

我认为代码像这样重新排列会更有意义：

优点是：

1) 您仅在实际需要时运行 GetEvents AJAX 函数，而不是每次打开日历时都

2) 您不会在每次单击日期字段时都重新创建 fullCalendar

3) 您设置一个全局变量来表示最后一次单击的文本框，以便 fullCalendar 知道在单击日期时填充哪个文本框。

//create the calendar just once
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'addEventButton',
        right: 'month,agendaWeek,agendaDay,listWeek',
    },
    navLinks: true,
    editable: true,
    eventLimit: true,
    dayClick: function (date, jsEvent, view) {
        $(currentDateField).val(date.format()); //set the value on the last clicked date field
    },
    //dynamic on-demand event feed - see https://fullcalendar.io/docs/v3/events-function for details
    events: function (start, end, timezone, callback) { 
      $.ajax({
        type: "GET",
        url: "/Booking/GetEvents",
        success: function (data) {
            var events = [];
            $.each(data, function (i, a) {
                events.push({
                    title: a.Function_Name,
                    start: a.Function_Date1,
                    url: a.Booking_ID
                    //Function_Slot:a.Function_Slot,
                    //Marquee_Name:a.Marquee_Name,
                    //Marquee_Slot: a.Marquee_Slot
                });
            });
            callback(events);
        },
        error: function (error) {
            alert('failed');
        }
      });
    },
    eventClick: function (calEvent, jsEvent, view) {
        selectedEvent = calEvent;
        //alert('Event: ' + calEvent.title);
        jsEvent.preventDefault();
        $('#myModal #eventTitle').text(calEvent.title);
        var $description = $('<div/>');
        $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
        $description.append($('<p/>').html('<b>Description:</b>' + calEvent.title));
        $('#myModal #pDetails').empty().html($description);
        var temp = $('#myModal').modal();
    },
});

$("#calendar").hide();

var currentDateField = null; //to hold the last clicked date field

$(".datepick").click(function () {
  currentDateField = this; //assign the last clicked date field
  $('#calendar').show();
});

如何将完整的日历日期添加到动态文本框

How to add full calendar date to dynamic textboxes

jquery

datetimepicker

fullcalendar

asp.net-mvc-4

fullcalendar-3