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

Question

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

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

 $(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 是我的文本框的类名

这是文本框代码

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