您在此处使用什么日历控件或对象或库？

提示：它们有很多，因此我们不知道您正在使用或使用哪一个。他们的行为都不同。

而且，也不清楚为什么您不使用内置的日期选择器？

因此，对于 asp.net 中的文本框控件，日期选取器功能是内置的，并且包含在文本框控件中。因此，文本框控件不需要任何代码、任何额外的 JavaScript 或第三方库，除了设置文本框的文本模式之外，您实际上不需要额外的工作。

将文本框拖放到网页中，然后设置 TextMode = Date。

        <h3>Enter Date</h3>
        <asp:TextBox ID="TextBox1" runat="server" 
            TextMode="Date">
        </asp:TextBox>

结果是这样的：

上面在文本框中设置日期，但不会导致或触发回发。

因此，如前所述，您可以选择一船又一船的日期选择器。如上所示，您甚至可以选择使用 asp.net 附带的内置日期选择器。如前所述，上述内容不需要 JavaScript，甚至不需要任何第三方库和代码。

如上所示，当用户在上述日期弹出窗口中选择日期时，不会发生回发。

编辑：因此，我们正在使用 asp.net 日历控件

asp.net 日历控件的问题/问题是它们总是触发回发。

因此，解决方案是：

像我上面一样使用带有 textmode=“date” 的文本框。这会产生一个漂亮的弹出日历，但没有回发。

转储当前控件，并使用 jQuery.UI 中的控件。

转储当前控件，并使用 ajaxtoolkit 中的控件。

或者，考虑将标记包装在更新面板内。

根据您启动/显示标记的方式，更新面板可能是您的最佳选择。

假设我需要弹出 2 个日历，用于开始和结束日期。

我希望这是一种可重用的开始/结束日期提示系统。

因此，我们将：

必须弹出一个包含两个日历（开始和结束日期）的区域，然后用户可以选择开始日期和结束日期，我们仍然希望弹出窗口保留在视图中。

如果我们采用更新面板，并使用 jQuery.UI 对话框弹出 div，则可以实现上述目标。

因此，我们的标记变成这样：

因此，让我们输入开始日期（文本框）和结束日期（文本框）。

然后我们有一个按钮，单击时，它会弹出两个日历（开始日期和结束日期）

此标记：

    <asp:Button ID="cmdGetDates" runat="server" Text="Get booking dates" 
        OnClientClick="popdate();return false;"
            />
    <br />
    <div style="float:left">
        <h4>Start Date Selected</h4>
        <asp:TextBox ID="txtStartDate" runat="server" ClientIDMode="Static">
        </asp:TextBox>
    </div>

    <div style="float:left;margin-left:30px">
        <h4>End Date Selected</h4>
        <asp:TextBox ID="txtEndDate" runat="server" ClientIDMode="Static">
        </asp:TextBox>
    </div>

如前所述，我们可以使用更新面板，这将允许日历控件进行回发，但不会关闭对话框。

如前所述，有“无数”对话框例程，但 bootstrap 和 jQuery.UI 是最常见的。

让我们使用 jQuery.UI。

因此，下面假设两者都是 jQuery（您可能已经拥有它），但您必须将 jQuery.UI 添加到您的项目中。

所以，现在我们的简单 div（隐藏），有 2 个日历：

<div id="startend" runat="server" style="display: none">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:HiddenField ID="hStart" runat="server" ClientIDMode="Static" />
            <asp:HiddenField ID="hEnd" runat="server" ClientIDMode="Static" />
            <div style="float: left">
                <h4>Select Start Date</h4>

                <asp:Calendar ID="dtStart" runat="server" Height="200px" Width="300px"
                    BorderColor="Black"
                    BorderStyle="Solid" BorderWidth="2px">
                    <DayHeaderStyle Height="40px" />
                    <DayStyle BorderStyle="Solid"
                        BorderColor="Black"
                        BorderWidth="1"
                        HorizontalAlign="Right"
                        VerticalAlign="Top" Height="40px" />
                    <OtherMonthDayStyle BackColor="LightSteelBlue" />
                    <SelectorStyle CssClass="btn-info" />

                    <TitleStyle Height="40px" />

                    <TodayDayStyle BackColor="LightSkyBlue" />
                    <WeekendDayStyle BackColor="Ivory" Height="30px" />
                </asp:Calendar>
            </div>


            <div style="float: left; margin-left: 30px">
                <h4>Select End Date</h4>

                <asp:Calendar ID="dtEnd" runat="server" Height="200px" Width="300px"
                    BorderColor="Black"
                    BorderStyle="Solid" BorderWidth="2px">
                    <DayHeaderStyle Height="40px" />
                    <DayStyle BorderStyle="Solid"
                        BorderColor="Black"
                        BorderWidth="1"
                        HorizontalAlign="Right"
                        VerticalAlign="Top" Height="40px" />
                    <OtherMonthDayStyle BackColor="LightSteelBlue" />
                    <SelectorStyle CssClass="btn-info" />

                    <TitleStyle Height="40px" />

                    <TodayDayStyle BackColor="LightSkyBlue" />
                    <WeekendDayStyle BackColor="Ivory" Height="30px" />
                </asp:Calendar>
            </div>

        </ContentTemplate>
    </asp:UpdatePanel>
 </div>

注意与上面非常接近。

设计模式为：

 start of your div to pop
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>

   -- everything in here - including the calendar control

 
        </ContentTemplate>
    </asp:UpdatePanel>

 </div>   --- end of our div

综上所述，我们有了客户端的 pop div 代码：

    <script>

        function popdate() {
            console.log("start")
            var myDialog = $("#startend");
            myDialog.dialog({
                title: "Select booking dates",
                modal: true,
                width: "720px",
                resizable: true,
                autoOpen: false,
                appendTo: "form",
                dialogClass: "dialogWithDropShadow",
                buttons: {
                    ok: function () {
                        myDialog.dialog('close');
                        $('#txtStartDate').val($('#hStart').val())
                        $('#txtEndDate').val($('#hEnd').val())
                    },
                    Cancel: function () {
                    myDialog.dialog('close');
                    }
                }
            });

            myDialog.dialog('open');

        }

    </script>

这 2 个日历事件的 VB 代码为：

Protected Sub dtStart_SelectionChanged(sender As Object, e As EventArgs) Handles dtStart.SelectionChanged

    hStart.Value = dtStart.SelectedDate

End Sub

Protected Sub dtEnd_SelectionChanged(sender As Object, e As EventArgs) Handles dtEnd.SelectionChanged

    hEnd.Value = dtEnd.SelectedDate

End Sub

请记住，由于这是一个更新面板，因此只有面板内部的控件可以通过代码隐藏来更改。因此，我们删除了 2 个隐藏字段，这将允许其他代码获取/获取/使用/享受 2 个选定的值。在对话框关闭时，我还有一些 JavaScript 代码可以将所选日期的 2 个值复制到标准文本框 - 这仅用于演示目的，但它为您提供了多种方法和多个选项，用于将所选日期与客户端代码一起使用，或者您可以使用服务器端代码并使用 2 个隐藏字段值。