如何在GridView中包含DatePicker文本框？

我已經使用了Asp.net GridView，當然，我有我自己的界定它，我用下面的代碼來選擇從數據庫表和讀取的所有數據到Gridview：如何在GridView中包含DatePicker文本框？

protected void Button2_Click(object sender, EventArgs e) 
    { 
     DataTable dt = DataProvider.ExecuteDataTable("[dbo].[Get_LastInsertedRowHowzeEducation_SP]", CommandType.StoredProcedure); 
     GridView1.DataSource = dt; 
     GridView1.DataBind(); 
    }

它的一個列與BirthDate有關，我設計了一個JqueryDatePickerTextBox所以我想將它包含在Gridview列之一作爲TextBox並刪除默認GridViewTextBox。所以，我該怎麼做？

來源

2012-10-07 Mahmood Hesabi

您需要使用模板列的GridView內，然後連上JQuery的日期選擇器：如果你

enter image description here

<asp:GridView runat="server" ID="gvpicker" AutoGenerateEditButton="true" OnRowEditing="gvpicker_RowEditing"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:Label Text='<%# Eval("job_desc") %>' runat="server" /> 
      </ItemTemplate> 
      <EditItemTemplate> 
       <asp:TextBox runat="server" Text='<%# Bind("job_desc") %>' ID="myDatePicker" CssClass="myDatePickerClass" /> 
      </EditItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

<script> 
    $(function() { 
     var $gv = $("table[id$=gvpicker]"); 
     var $rows = $("> tbody > tr:not(:has(th, table))", $gv); 
     var $inputs = $(".myDatePickerClass", $rows); 

     $rows.css("background-color", "yellow"); 

     $inputs.datepicker(); 
    }); 
</script> 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!this.IsPostBack) 
     { 
      this.BindGrid(); 
     } 
    } 

    protected void gvpicker_RowEditing(object sender, GridViewEditEventArgs e) 
    { 
     this.gvpicker.EditIndex = e.NewEditIndex; 
     this.BindGrid(); 
    }

現在：

這裏的結果有一個自定義控制，只需更換

<asp:TextBox runat="server" Text='<%# Bind("job_desc") %>' ID="myDatePicker" CssClass="myDatePickerClass" />

您的自定義控制

在數據綁定控件，你可以將任何控件內部模板部分，您喜歡

來源

2012-10-07 07:26:55 Jupaol

我想我不能忠實地傳達我對你意味着什麼，我meaned如果我裏面插入的GridView更新按鈕，將datepicked文本框將存在，而不是以前的gridview的文本框中。 –

我很樂意幫助ü，但我不明白你的英語 – Jupaol

Ok.let我解釋一下更好。 –

您必須指定手工列作爲TemplateField。
例如http://www.vkinfotek.com/gridview/templatefields-in-gridview.html

來源

2012-10-07 07:21:21 walther

看來，jQuery庫和jQuery UI庫對您的項目。

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('.dummy').datepicker(); 
 
    }); 
 
</script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%"> 
 
    <Columns> 
 
    <asp:BoundField DataField="Name" HeaderText="Name" /> 
 
    <asp:TemplateField HeaderText="DOJ"> 
 
     <ItemTemplate> 
 
     <asp:TextBox ID="txtDate" runat="server" class="dummy"></asp:TextBox> 
 
     </ItemTemplate> 
 
    </asp:TemplateField> 
 
    </Columns> 
 
</asp:GridView>

沒有在CSS類「僞」的FPGA實現。這只是一個虛擬課堂。我們使用它來識別GridView內的那些文本框，並且我們希望jQuery在那裏生成日期選擇器。

來源

2015-05-27 10:16:50

這裏試試這個工作正常

<script src="js/jsDatepicker/bootstrap.js"></script> 
    <%--<script src="js/jsDatepicker/jquery-1.10.2.js"></script>--%> 
    <link href="js/jsDatepicker/jquery-ui.css" rel="stylesheet" /> 
    <script src="js/jsDatepicker/jquery-ui.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".cal").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       yearRange: "1990:2100" 
      }); 
     }); 
    </script> 


<asp:TextBox ID="TextBox4" placeholder="DD/MM/YYYY" CssClass="form-control cal" runat="server"></asp:TextBox> 
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="TextBox4" Display="Dynamic" runat="server" />

來源

2017-05-31 10:53:12

ü可能需要的js文件 –

如何在GridView中包含DatePicker文本框？

回答

相關問題