Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1107
  • Last Modified:

how to use datepicker

Hi,
i am trying to use data picker but not where to put the script for the datepicker.  I have a master site in which i am referencing jquery and here it is:
<link href="~/Styles/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

and here is my main code in ASPX which i am trying to use the TextBox1 in the GridView1 control as a date picker.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="AssignedRCA.aspx.cs" Inherits="AssignedRCA" %>


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
 
   
    <style type="text/css">
        .style1
        {
            width: 100%;
            border-left: 1px solid #808080;
            border-right-style: solid;
            border-right-width: 1px;
            border-top: 1px solid #808080;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            background-color: #BFCBD6;
        }
        .style2
        {
            height: 38px;
            width: 778px;
        }
    </style>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

 

    <asp:DetailsView ID="MyDetailsView" runat="server" AutoGenerateRows="False"
        BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px"
        CellPadding="2" DataKeyNames="Post_ID" DataSourceID="DV_DS" ForeColor="Black"
        GridLines="None" Height="50px" Width="792px">
        <AlternatingRowStyle BackColor="PaleGoldenrod" />
        <EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
        <Fields>
            <asp:BoundField DataField="Post_ID" HeaderText="RCA ID" ReadOnly="True"
                SortExpression="Post_ID" />
            <asp:BoundField DataField="SharePointAuthor" HeaderText="RCA Author"
                SortExpression="SharePointAuthor" />
            <asp:BoundField DataField="Post_Title" HeaderText="RCA Title"
                SortExpression="Post_Title" />
            <asp:BoundField DataField="Post_Content" HeaderText="Problem Description"
                SortExpression="Post_Content" />
            <asp:BoundField DataField="Date_Of_Issue" HeaderText="Incident Date"
                SortExpression="Date_Of_Issue" />
            <asp:BoundField DataField="StartTime" HeaderText="Start Time"
                SortExpression="StartTime" />
            <asp:BoundField DataField="EndTime" HeaderText="End Time"
                SortExpression="EndTime" />
            <asp:BoundField DataField="Status" HeaderText="Status"
                SortExpression="Status" />
        </Fields>
        <FooterStyle BackColor="Tan" />
        <HeaderStyle BackColor="Tan" Font-Bold="True" />
        <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue"
            HorizontalAlign="Center" />
    </asp:DetailsView>
    <table class="style1">
        <tr>
            <td class="style2" width="600">
            </td>
        </tr>
    </table>

    <div>
   
      <asp:gridview ID="Gridview1" runat="server" ShowFooter="True"
            AutoGenerateColumns="False" onrowcreated="Gridview1_RowCreated"
            BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px"
            CellPadding="4" GridLines="Horizontal" Width="644px">
            <Columns>
            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

            <asp:TemplateField HeaderText="Post ID">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox0" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Date">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
           
            <asp:TemplateField HeaderText="Time" Visible="False">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
           
 
            <asp:TemplateField HeaderText="Description">
                <ItemTemplate>
                     <asp:TextBox ID="TextBox3" runat="server" Height="103px" TextMode="MultiLine"
                         Width="375px"></asp:TextBox>
                </ItemTemplate>
                <FooterStyle HorizontalAlign="Right" />
                <FooterTemplate>
                 <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"
                        onclick="ButtonAdd_Click" />
                </FooterTemplate>
            </asp:TemplateField>
                 <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Remove</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="White" ForeColor="#333333" />
            <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="White" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#F7F7F7" />
            <SortedAscendingHeaderStyle BackColor="#487575" />
            <SortedDescendingCellStyle BackColor="#E5E5E5" />
            <SortedDescendingHeaderStyle BackColor="#275353" />
        </asp:gridview>
        <asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" />
    </div>

    <asp:SqlDataSource ID="DV_DS" runat="server"
        ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
        SelectCommand="SELECT [Post_ID], [SharePointAuthor], [Post_Title], [Post_Content], [Root_Cause_Desc], [Date_Of_Issue], [StartTime], [EndTime], [Status] FROM [RCA_Web] where [Post_ID]= @Post_ID">
        <SelectParameters>
                <asp:QueryStringParameter Name="Post_ID"
                     QueryStringField="Post_ID" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</asp:Content>

AND HERE IS MY SCRIPT BLOCK.  PLEASE HELP.  THANKS
<script type="text/javascript">
    $(document).ready(function(){
    $('#<%=TextBox1.ClientID %>').datepicker();
    });
</script>
0
karinos57
Asked:
karinos57
  • 6
  • 4
1 Solution
 
Rajar AhmedConsultantCommented:
In gridview , for textbox id TextBox1 add class
<asp:TextBox ID="TextBox1" runat="server" class="datepicker"></asp:TextBox>

Open in new window


Then Change to below code:
<script type="text/javascript">
        $(document).ready(function () {
            // $('#<%=TextBox1.ClientID %>').datepicker();
            $('.datepicker').datepicker();
    });
</script>

Open in new window

0
 
karinos57Author Commented:
thanks, i added the class and i removed this line from my privious code:
 // $('#<%=TextBox1.ClientID %>').datepicker();
but where i put this code? at the very top?  i have tried but still getting an error
0
 
Rajar AhmedConsultantCommented:
if commented, remove this line from source
Server side script will still execute even on commented  javascript .
 // $('#<%=TextBox1.ClientID %>').datepicker(); Remove this line .Dont comment

still getting an error
If this is error . then do as i said above and check .  
BC30451: 'TextBox1' is not declared. It may be inaccessible due to its protection level.

Meeran03
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
karinos57Author Commented:
i already removed the entire line.  what is this that you said check this: BC30451?
0
 
karinos57Author Commented:
i think what is happening here is:
When i am assigning it to the datepicker.. In the document.ready function , but when the DOM is ready the GridView is not bound yet.. So how can it bind to the TextBox..

The  thing i can do is call this datapicker method after i bind your gridview..  but how can i do this?  i am newbie to ASP
.
0
 
karinos57Author Commented:
can anyone help?
0
 
Rajar AhmedConsultantCommented:
This is how it works..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gvDatePicker.aspx.cs" Inherits="cs_gvDatePicker" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" 
    type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" 
    type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"
     type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.datepicker').datepicker();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gvData" runat="server" Width="50px" 
         AutoGenerateColumns="false"  DataKeyNames="ID">
     <Columns>
     <asp:TemplateField HeaderText="Id" >
         <ItemTemplate>
              <asp:TextBox ID="TextBox0" runat="server" CssClass="datepicker"></asp:TextBox>
     </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField  HeaderText="Name" ItemStyle-Width="1px">
     <ItemTemplate >
     <asp:Label id="lblText" runat="server" Text='<%# Bind("name") %>'></asp:Label>
     </ItemTemplate>
     
     </asp:TemplateField>
     </Columns>
     </asp:GridView>
    </div>
    </form>
</body>
</html>

//Codebehind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class cs_gvDatePicker : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gvData.DataSource = getDataSet() ;
            gvData.DataBind();
        }
    }
    public static DataSet getDataSet()
    {
        DataSet ds = new DataSet();
        DataTable dt = default(DataTable);
        DataRow dr = default(DataRow);
        DataColumn idCoulumn = default(DataColumn);
        DataColumn nameCoulumn = default(DataColumn);
        int i = 0;

        dt = new DataTable();
        idCoulumn = new DataColumn("ID", Type.GetType("System.String"));
        nameCoulumn = new DataColumn("Name", Type.GetType("System.String"));

        dt.Columns.Add(idCoulumn);
        dt.Columns.Add(nameCoulumn);

        dr = dt.NewRow();
        dr["ID"] = "1";
        dr["Name"] = "Kelvin";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = "2";
        dr["Name"] = "Jack";
        dt.Rows.Add(dr);

        ds.Tables.Add(dt);
        return ds;
    }

}

Open in new window

0
 
karinos57Author Commented:
this is great, it works like a charm.  thank so much for your time.
0
 
karinos57Author Commented:
very nice
0
 
Rajar AhmedConsultantCommented:
Small tip ,  

   Never confuse with server control,databound control like gridview,repeater etc  . When your working in jquery these are just a plain html elements so have this in mind always . With jquery in hand you achieve much complex things with ease . The above code is a classic example .  

Good luck:)
Meeran03
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now