在gridview内单击按钮触发ui datepicker并将所选日期分配给当前行中的字段

Posted 2023-05-07

【中文标题】在gridview内单击按钮触发ui datepicker并将所选日期分配给当前行中的字段

【英文标题】：trigger ui datepicker on button click inside gridview and assign selected date to field in current row

【发布时间】：2012-10-09 17:34:03

【问题描述】：

我找到了这个问题和解决方案，但是我处理的不是文本框，而是 gridview 字段。 Trigger jQueryUI datePicker on button click, send result to disabled input field

我在带有 TemplateField 的 asp GridView 中有一个开始日期列，如果单击 ImageButton，我想触发 jquery ui datepicker。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns=False allowsorting = True
        SkinID=FACGrid onload="GridView1_Load" onsorting="GridView1_Sorting" 
        onrowdatabound="GridView1_RowDataBound" 
        onrowediting="GridView1_RowEditing" 
        onrowcancelingedit="GridView1_RowCancelingEdit" 
        onrowupdating="GridView1_RowUpdating">
    <Columns>     
<asp:TemplateField HeaderText="Start Date" SortExpression="start_dt">
                    <EditItemTemplate>
                        <asp:Label ID="StDt" runat="server" CssClass="StartDate" Text='<%# Eval("start_dt", "0:d") %>'></asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="StDt" runat="server" Text='<%# Bind("start_dt", "0:d") %>'></asp:Label>
                        <asp:ImageButton ID="startdtimage" CssClass="StartDateImg" runat="server" ImageUrl="../images/pencil.gif" Visible='<%# HasUpdateStartDateRole() %>' Width="18px" Height="18px" />
                    </ItemTemplate>
                </asp:TemplateField>

根据上面提到的问题，我有这个。我需要做什么才能使每行工作？

<script type="text/javascript">
    $(document).ready(function() 
        $(".ArrivalDate").datepicker();

        $(".StartDateImg").click(function () 
            $(".StartDate").datepicker("show");
        );

    );
</script>

还有一个带有雇用日期的隐藏列。我想将日期选择器设置为仅允许等于或晚于雇用日期的日期。或者，在选择日期后确认它不早于雇用日期。

**** 编辑 **** 让 imagebutton 打开一个模式对话框并将行的开始日期和雇用日期传递给它会更容易吗？然后有一个“更新”按钮来检查和保存日期。但是，我也不确定如何做到这一点。

**** 编辑 **** 使用下面的@Miki Shah 的解决方案，日期选择器正在显示，但我不知道如何将选定的日期分配给该行的 startdate 字段，使用该行的 startdate 字段作为打开时的当前选定日期，并使用该行的hire_date 用于验证或限制日期选择器中的可用日期。

【问题讨论】：

尝试删除双引号并尝试添加单引号并查看 in("Show")..

更改引号没有区别

【参考方案1】：

您可以按类名分配日期选择器。每当单击具有“StartDateImg”类名的图像时，都会显示日期选择器。

Sys.Application.add_load(function () 

            $(".StartDateImg").datepicker(
                duration: '',
                showTime: false,
                constrainInput: false,
                onSelect: function(dateText) $(this).parents().find("span")[0]).innerhtml = dateText; 
            );
     

【讨论】：

日期选择器暂时出现，但随后屏幕刷新，它消失了。

表示页面刷新后，点击图片按钮时，日期选择器没有打开？

不，我可以看到日期选择器，但在我可以做任何事情之前，屏幕刷新并且它消失了。我可以再次点击图片按钮，同样的事情也会发生。

此外，在它显示的短暂时刻，它显示当前日期为选定的。我需要它在选择开始日期的情况下打开。

使用可以使用jquery selctor来获取标签控件并将值设置为选定日期。请参阅 onselect 函数 onSelect 的编辑代码：function(dateText) $(this).parents().find("span")[0]).innerHTML = dateText;

【参考方案2】：

编辑：在 html 中工作

我想出了一个（不是很优雅的）解决方案，所以如果您可以或不想使用它，您可以自行决定。 :)

脚本

<script type="text/javascript">
    $(document).ready(function () 
        $(".starter").each(function () 
            $(this).children(".StartDateImg").datepicker().hide();
        );
    );

    $(".starter").each(function () 
        $(this).children(".link").click(function () 
            $(this).nextAll().show();
        );
    );
</script>

HTML

<div class="starter">
    <a class="link" href="#">test</a>
    <div class="StartDateImg">
    </div>
</div>

日期选择器的问题在于它自动选择显示内联或弹出式.. => 应用于 div 或 span 时为内联，应用于输入/文本框时弹出式

所以我的解决方案会将日期选择器内联加载到一个 div 中，隐藏这个 div，然后在按下正确的链接时显示它。

这将只显示 div => 以获取弹出窗口，您必须考虑编写一些 css 或 javascript 以使 div 像弹出窗口一样“出现”。

我希望它有所帮助，但我相信可能会找到更优雅的解决方案..

【讨论】：

这给了我一个错误“Microsoft JScript 运行时错误：无法获取属性 'settings' 的值：对象为 null 或未定义”

您是否尝试在“.each(”之后使用或不使用“function()”？我第一次忘记将其粘贴在那里，所以我后来编辑了帖子..

添加功能，没有错误，但是日期选择器不显示。

以上答案（屏幕刷新的地方）可能是正确的。也许您应该尝试删除锚标记？

【参考方案3】：

你可以试试这个...... gridview中的模板列会是这样的.....

<asp:TemplateField>
    <ItemTemplate>
        <asp:Button Text="calendar" runat="server" CssClass="Calendar"    onclientclick="return Testing();" />
    </ItemTemplate>
</asp:TemplateField>

Scripting函数应该是这样的............

<script type="text/javascript" >
        function Testing()
            $('.calendar').each(function () 
                $(this).glDatePicker();
            );
            return false;
        
</script>

从日期选择器中选择日期后，您可以观察到按钮的值将发生变化，即显示日期..... 我在这里使用按钮来调用 glDatePicker :D 希望它可以帮助你

【讨论】：

我也有同样的问题。它如何知道将新值保存到哪一行的开始日期？它如何获得该行的hire_date 进行验证？