3

我找到了这个问题和解决方案，但是我不是在处理文本框，而是在处理 gridview 字段。在按钮单击时触发 jQueryUI datePicker，将结果发送到禁用的输入字段

我在带有 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>

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

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

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

4

3 回答 3

3

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

Sys.Application.add_load(function () {

            $(".StartDateImg").datepicker({
                duration: '',
                showTime: false,
                constrainInput: false,
                onSelect: function(dateText) {$(this).parents().find("span")[0]).innerHTML = dateText; 
            });
     }
于 2012-10-19T07:16:26.713 回答
1

编辑：在 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 或跨度时内联，应用于输入/文本框时弹出

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

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

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

于 2012-10-19T06:35:15.470 回答
0

你可以试试这个......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 希望它可以帮助你

于 2012-10-19T09:32:52.180 回答