karinos57
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-lightnes s/jquery-u i-1.8.23.c ustom.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.8 .1.min.js" type="text/javascript"></s cript>
<script src="../Scripts/jquery-ui- 1.8.23.cus tom.min.js " type="text/javascript"></s cript>
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.mas ter" AutoEventWireup="true" CodeFile="AssignedRCA.aspx .cs" Inherits="AssignedRCA" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head Content" 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="Main Content" Runat="Server">
<asp:DetailsView ID="MyDetailsView" runat="server" AutoGenerateRows="False"
BackColor="LightGoldenrodY ellow" 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="SharePointAutho r" HeaderText="RCA Author"
SortExpression="SharePoint Author" />
<asp:BoundField DataField="Post_Title" HeaderText="RCA Title"
SortExpression="Post_Title " />
<asp:BoundField DataField="Post_Content" HeaderText="Problem Description"
SortExpression="Post_Conte nt" />
<asp:BoundField DataField="Date_Of_Issue" HeaderText="Incident Date"
SortExpression="Date_Of_Is sue" />
<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_Ro wCreated"
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:TextB ox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextB ox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Time" Visible="False">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextB ox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Height="103px" TextMode="MultiLine"
Width="375px"></asp:TextBo x>
</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:LinkBu tton>
</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" />
<SortedAscendingHeaderStyl e BackColor="#487575" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderSty le 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:MyConnec tionString %>"
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>
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-lightnes
<script src="../Scripts/jquery-1.8
<script src="../Scripts/jquery-ui-
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.mas
<asp:Content ID="Content1" ContentPlaceHolderID="Head
<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="Main
<asp:DetailsView ID="MyDetailsView" runat="server" AutoGenerateRows="False"
BackColor="LightGoldenrodY
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="SharePointAutho
SortExpression="SharePoint
<asp:BoundField DataField="Post_Title" HeaderText="RCA Title"
SortExpression="Post_Title
<asp:BoundField DataField="Post_Content" HeaderText="Problem Description"
SortExpression="Post_Conte
<asp:BoundField DataField="Date_Of_Issue" HeaderText="Incident Date"
SortExpression="Date_Of_Is
<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
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:TextB
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextB
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Time" Visible="False">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextB
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Height="103px" TextMode="MultiLine"
Width="375px"></asp:TextBo
</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
</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" />
<SortedAscendingHeaderStyl
<SortedDescendingCellStyle
<SortedDescendingHeaderSty
</asp:gridview>
<asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" />
</div>
<asp:SqlDataSource ID="DV_DS" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConnec
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"
</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>
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
// $('#<%=TextBox1.ClientID %>').datepicker();
but where i put this code? at the very top? i have tried but still getting an error
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
BC30451: 'TextBox1' is not declared. It may be inaccessible due to its protection level.
Meeran03
Server side script will still execute even on commented javascript .
// $('#<%=TextBox1.ClientID %>').datepicker(); Remove this line .Dont comment
still getting an errorIf 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
ASKER
i already removed the entire line. what is this that you said check this: BC30451?
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
.
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
.
ASKER
can anyone help?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
this is great, it works like a charm. thank so much for your time.
ASKER
very nice
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
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
Open in new window
Then Change to below code:
Open in new window