CalendarExtender 使用 Javascript 更改日期答案

【问题标题】：CalendarExtender Change date with JavascriptCalendarExtender 使用 Javascript 更改日期
【发布时间】：2010-10-23 22:15:48
【问题描述】：

我的页面上有一个 CalendarExtender 控件，有时必须将日期更改为下一个星期天。我目前正在使用控件的 OnClientDateSelectionChanged 属性来调用一个函数，该函数会将日期添加到星期天。

我遇到的问题是，如果我在日历中选择一个星期二，文本框将显示下一个星期日，但日历中选择的日期仍然是星期二。

如何更新 CalendarExtender 以获取我在 javascript 中选择的新日期？ CalendarExtendar 连接到的文本框显示正确的日期...

【问题讨论】：

你有什么理由选择使用这个日历控件而不是jquery datepicker插件吗？
我选择使用这个日历控件是因为我在 ASP.Net 中开发并且我们必须限制我们使用的内容。我们的项目中已经有了 Ajax 控制工具包，所以我必须坚持下去。

标签： javascript ajax calendarextender

【解决方案1】：

如果满足以下 2 个条件，则更改 CalendarExtender 的 TargetControlId 文本框的值会影响 所选日期：

在文本框上触发 onchange 事件（通过手动更改文本或调用显式 javascript fireEvent() 方法。
在文本框中输入的日期的格式与 CalendarExtender 控件使用的格式相同。

话虽如此，处理这个问题的正确方法是调用 CalendarExtender 控件的set_selectedDate() 函数。这一次调用，不仅在 Calendar 上设置 selected，而且在 Targeted textbox 上同时设置。

示例代码如下：

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" 
        OnClientDateSelectionChanged="dateSelectionChanged" 
        TargetControlID="txtDate" PopupButtonID="imgCalendar">
</cc1:CalendarExtender>

<script type="text/javascript">
  function dateSelectionChanged(sender, args){
    selectedDate = sender.get_selectedDate();
    /* replace this next line with your JS code to get the Sunday date */
    sundayDate = getSundayDateUsingYourAlgorithm(selectedDate); 
    /* this sets the date on both the calendar and textbox */
    sender.set_SelectedDate(sundayDate); 
 }
</script>

【讨论】：

好吧，我试过了，但没有成功。我将尝试将代码放入 cmets... 这就是我所拥有的： function onDateSelected(sender, args) { var selectedDate = sender.get_selectedDate(); while(selectedDate.getDay() != 0) selectedDate.setDate(selectedDate.getDate() + 1); // 警报（选定日期）； sender.setSelectedDate(selectedDate);警报（“完成”）；我看到了显示日期及其正确日期的警报，但我从未看到完成的框，因为在此之前我收到了一个 javascript 错误。
这是我得到的错误：对象不支持此属性或方法
您使用的是 AjaxToolkit 的特定版本吗？我有 1.0.20229.0
好吧，刚刚发现了错误，你在那里有 sender.setSelectedDate，它是 sender.set_selectedDate。感谢您的帮助
我很高兴你让它工作。我不敢相信我错过了方法名称中的下划线:-)

【解决方案2】：

<asp:TextBox ID="txtDate" Text='<%# Bind("Date", "{0:dd-MMM-yyyy}") %>'
                                                                                            runat="server" class="form-control input-sm m-bot15" BackColor="#ffccbb"></asp:TextBox>
                                                                                        <asp:CalendarExtender ID="CalExtender1" runat="server" Enabled="true" Format="dd-MMM-yyyy"
                                                                                            TargetControlID="txtDate">
                                                                                        </asp:CalendarExtender>

【讨论】：