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

我的文本框从日历中获取值，虽然我使用了类，但所有文本框的日期仍然相同。 我正在项目中添加新行，所有行都包含datetime文本框 我已经给那个文本框分配了一个类 当我在第二个文本框中选择日期时，第一个文本框的日期也随之改变，并用第二个文本框覆盖，反之亦然

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

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

这是文本框代码

 <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>

@Html.TextBoxFor（x=>x.Function_Date，新的{@class=“Date-glyphicon-calendar-datepick”、@id=“”、@name=“Date[]”、@onclick=“clickmeforcalendar（）；”}）

以下是GenerateCalendar（）的代码

函数生成贷方（事件）{
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中间：“addEventButton”，
右图：“月、agendaWeek、agendaDay、listWeek”，
},
defaultDate:新日期（），
导航链接：是的，
是的，
eventLimit：对，
事件：事件，
eventClick:函数（calEvent、jsEvent、view）{
selectedEvent=calEvent；
//警报（“事件：”+calEvent.title）；
jsEvent.preventDefault（）；
$（“#myModal#eventTitle”）.text（calEvent.title）；
变量$description=$（''）；
$description.append（$（'
'）.html（'Start:'+calEvent.Start.format（“DD-MMM-YYYY HH:mm a”））；
$description.append（$（'
'）.html（'description:'+calEvent.title））；
$（'#myModal#pDetails'）.empty（）.html（$description）；
var temp=$（'#myModal'）.modal（）；
},
});
}

需要快速帮助谢谢

---

我认为将代码重新排列如下更有意义：

优点是：

1） 只在实际需要时运行GetEvents AJAX函数，而不是每次打开日历时

2） 您不会每次单击日期字段时都重新创建完整日历

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

//只创建一次日历
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中间：“addEventButton”，
右图：“月、agendaWeek、agendaDay、listWeek”，
},
导航链接：是的，
是的，
eventLimit：对，
dayClick：函数（日期、事件、视图）{
$（currentDateField）.val（date.format（））；//设置上次单击的日期字段的值
},
//动态按需事件提要-请参阅https://fullcalendar.io/docs/v3/events-function 详情
事件：函数（开始、结束、时区、回调）{
$.ajax({
键入：“获取”，
url:“/Booking/GetEvents”，
成功：功能（数据）{
var事件=[]；
$。每个（数据、函数（i、a）{
事件。推({
标题：a.功能名称，
开始：a.U函数日期1，
网址：a.Booking\u ID
//功能插槽：a.功能插槽，
//字幕名称：a.字幕名称，
//选框槽：选框槽
});
});
回调（事件）；
},
错误：函数（错误）{
警报（“失败”）；
}
});
},
eventClick:函数（calEvent、jsEvent、view）{
selectedEvent=calEvent；
//警报（“事件：”+calEvent.title）；
jsEvent.preventDefault（）；
$（“#myModal#eventTitle”）.text（calEvent.title）；
变量$description=$（''）；
$description.append（$（'
'）.html（'Start:'+calEvent.Start.format（“DD-MMM-YYYY HH:mm a”））；
$description.append（$（'
'）.html（'description:'+calEvent.title））；
$（'#myModal#pDetails'）.empty（）.html（$description）；
var temp=$（'#myModal'）.modal（）；
},
});
$（“#日历”）.hide（）；
var currentDateField=null//保存上次单击的日期字段的步骤
$（“.datepick”）。单击（函数（）{
currentDateField=this；//指定上次单击的日期字段
$（“#日历”）.show（）；
});

您实际上没有显示文本框代码，但如果您的所有日期文本框都具有类

日期拾取

，则

$（“.datepick”）。val

将选择所有文本框并更新所有文本框。这就是类选择器的作用——它选择具有相同类的所有元素。您需要找到唯一标识所需文本框的方法。你没有给我们足够的信息让我们告诉你一个好的方法，但这就是你需要实现的。我已经更新了代码，添加了文本框代码。仍在寻找唯一标识我的文本框的方法此函数的作用是什么？因为您已经在所有日期选择字段上定义了click事件，但是您还定义了

$（“.datepick”）。也可以单击
，然后在其中执行
ClickMeforCalendar（）再一次…所以你为什么尝试运行该函数两次有点困惑。而且，我看到的越多，你就越像是试图将fullCalendar用作日期选择器？？那不是它的工作。如果这就是你的全部，也许你需要明白你的意思，我已经评论了ClickMeForCalendar（）的调用。是的，我使用完整日历作为日期选择器，因为我在完整日历中保存了一些事件。谢谢您的帮助。
 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();


        },


    });
}

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