asked on

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>

Rajar Ahmed

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

karinos57

ASKER

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

Rajar Ahmed

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

karinos57

ASKER

i already removed the entire line. what is this that you said check this: BC30451?

karinos57

ASKER

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
.

karinos57

ASKER

can anyone help?

ASKER CERTIFIED SOLUTION

Rajar Ahmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

karinos57

ASKER

this is great, it works like a charm. thank so much for your time.

karinos57

ASKER

very nice

Rajar Ahmed

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