Question

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

我在带有TemplateField的asp GridView中有一个Start Date列，如果单击了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>

还有一个隐藏的列与雇用日期。我想将datepicker设置为仅允许等于或在雇用日期之后的日期。或者，在选择日期后验证它不在雇用日期之前。

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

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

Answer 1

您可以按类名分配datepicker。只要点击带有“StartDateImg”类名的图像，就会显示datepicker。

Sys.Application.add_load(function () {

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

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

datepicker的问题在于它会自动选择显示内联或弹出窗口.. =＆gt;应用于div或span时内联，应用于输入/文本框时弹出

所以我的解决方案会在div中加载datepicker内联，隐藏这个div，然后在按下正确的链接时显示它。

这只会显示div =＆gt;要获得弹出窗口，你将不得不考虑编写一些css或javascript来使div“出现”像弹出窗口。

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

Answer 3

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

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

脚本功能应该是这样的..........

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

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

触发ui datepicker on按钮单击gridview内部并将所选日期指定给当前行中的字段

3 个答案: