Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » DatePicker Control

DatePicker Control Options
Previous Topic · Next Topic
Dixie Ann
Posted: Wednesday, May 6, 2009 9:10:44 AM
Rank: Newbie
Groups: Member

Joined: 5/5/2009
Posts: 4
Hi,

I am using your product for the first time and I find these controls very useful for my application.

I need to know how to transfer the value from the datepicker to a textbox in a detailsview. I used the onclientonchange property to call a javascript to do this but I am getting the "object required" error. So I would really like to get some assistance with this.

Thanks in advance
Dixie Ann
Back to top
 
eo_support
Posted: Wednesday, May 6, 2009 9:17:05 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Would you mind to provide a small code segment that shows us what you are trying to do? Ideally it should be code that we can run at here and see the problem, because otherwise we don't even know where and how it fails. I would expect this to be a simple code problem so as soon as we can see the problem, it should be fairly easy for us to tell you how to correct it.

Thanks!
Back to top
 
Dixie Ann
Posted: Wednesday, May 6, 2009 10:12:56 AM
Rank: Newbie
Groups: Member

Joined: 5/5/2009
Posts: 4
Hi,

Thanks for your quick reply. I am trying to transfer the datepicker value, when selected, to a textbox (in this case TextBox1) in the edititemtemplate and insertitemtemplate in a detailsview as soon as the user selects the date.

I have posted the code below:


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function chk_onchange
{
var chk = document.getElementById("DatePicker1_ID");
var txt = document.getElementById("TextBox1_ID");

txt.value = chk.checked;

}

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
&nbsp;<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True" AutoGenerateRows="False"
DataKeyNames="HSID" DataSourceID="ObjectDataSource1" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="HSID" HeaderText="HSID" InsertVisible="False" ReadOnly="True"
SortExpression="HSID" />
<asp:TemplateField HeaderText="Datevalue" SortExpression="Datevalue">
<EditItemTemplate>
<eo:DatePicker ID="DatePicker1" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDate='<%# Bind("Datevalue") %>' SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate='<%# Eval("Datevalue") %>' ClientSideOnChange="chk_onchange">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</eo:DatePicker>
<br />
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Datevalue") %>'></asp:TextBox><br />
</EditItemTemplate>
<InsertItemTemplate>
&nbsp;<eo:DatePicker ID="DatePicker2" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDate='<%# Bind("Datevalue") %>' SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate='<%# Eval("Datevalue") %>' ClientSideOnChange="chk_onchange">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</eo:DatePicker>
<br />
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Datevalue") %>'></asp:TextBox><br />
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Datevalue") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="AmountAdded" SortExpression="AmountAdded">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("AmountAdded") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("AmountAdded") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("AmountAdded") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="AmountDeducted" SortExpression="AmountDeducted">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("AmountDeducted") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("AmountDeducted") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("AmountDeducted") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="AmountAvail" SortExpression="AmountAvail">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("AmountAvail") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("AmountAvail") %>'></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("AmountAvail") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete"
InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="DataSet1TableAdapters.ExampleTableTableAdapter" UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_HSID" Type="Int16" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Datevalue" Type="DateTime" />
<asp:Parameter Name="AmountAdded" Type="Single" />
<asp:Parameter Name="AmountDeducted" Type="Single" />
<asp:Parameter Name="AmountAvail" Type="Single" />
<asp:Parameter Name="Original_HSID" Type="Int16" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Datevalue" Type="DateTime" />
<asp:Parameter Name="AmountAdded" Type="Single" />
<asp:Parameter Name="AmountDeducted" Type="Single" />
<asp:Parameter Name="AmountAvail" Type="Single" />
</InsertParameters>
</asp:ObjectDataSource>

</div>
</form>
</body>
</html>

I look forward to your response.

Thanks again.
Back to top
 
eo_support
Posted: Wednesday, May 6, 2009 10:31:05 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

I can see many JavaScript code errors in your code:

1. "function chk_onchange" should be "function chk_onchange()";

2. Neither "DatePicker1_ID" nor "TextBox1_ID" exists in your code;

3. You should use eo_GetObject, instead of document.getElementById to get our client side DatePicker object. Please see here for more detail:
http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

4. Once you have the DatePicker object, you will need to call getSelectedDate to get the value:
http://doc.essentialobjects.com/library/1/jsdoc.public.calendar.getselecteddate.aspx

There is a timing issue here to, please see this post for more details:
http://www.essentialobjects.com/forum/postst3130_getSelectedDate-causing-datepicker-problem.aspx

5. You will not be able to use document.getElementById to get your TextBox either. This is because the TextBox is inside your EditTemplate, so the full ID of the textbox ID is not the same as it's ID property. It will be easier for you to replace "asp:TextBox" (which is a server control) with a simple input text box (input type="text" id="textbox1"). That way you will be able to use getElementById;

BTW: Why do you want to use a separate textbox to hold the value of a DatePicker? The DatePicker already holds the value for you.

Thanks!
Back to top
 
Dixie Ann
Posted: Wednesday, May 6, 2009 11:17:10 AM
Rank: Newbie
Groups: Member

Joined: 5/5/2009
Posts: 4
Hi,

I appreciate your response and it is very helpful.

I would like to use the datepicker value to update the database but the value in the datepicker was not reflected when I use the update option in the detailsview. So that is why I wanted to copy the value to the textbox to hold the date in the detailsview.

Thanks again
Back to top
 
eo_support
Posted: Wednesday, May 6, 2009 12:02:08 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

DatePicker should automatically do that for you. Try the following code with our sample project:

Code: HTML/ASPX 
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/Demos/demo.mdb"
    SelectCommand="SELECT * FROM [Tasks]" DeleteCommand="DELETE FROM [Tasks] WHERE [TaskID] = ?" InsertCommand="INSERT INTO [Tasks] ([TaskID], [TaskName], [StartDate], [EndDate]) VALUES (?, ?, ?, ?)" UpdateCommand="UPDATE [Tasks] SET [TaskName] = ?, [StartDate] = ?, [EndDate] = ? WHERE [TaskID] = ?">
    <DeleteParameters>
        <asp:Parameter Name="TaskID" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
        <asp:Parameter Name="TaskName" Type="String" />
        <asp:Parameter Name="StartDate" Type="DateTime" />
        <asp:Parameter Name="EndDate" Type="DateTime" />
        <asp:Parameter Name="TaskID" Type="Int32" />
    </UpdateParameters>
    <InsertParameters>
        <asp:Parameter Name="TaskID" Type="Int32" />
        <asp:Parameter Name="TaskName" Type="String" />
        <asp:Parameter Name="StartDate" Type="DateTime" />
        <asp:Parameter Name="EndDate" Type="DateTime" />
    </InsertParameters>
</asp:AccessDataSource>

<asp:FormView ID="FormView1" runat="server" DataKeyNames="TaskID" DataSourceID="AccessDataSource1">
    <ItemTemplate>
        TaskID:
        <asp:Label ID="TaskIDLabel" runat="server" Text='<%# Eval("TaskID") %>'></asp:Label><br />
        TaskName:
        <asp:Label ID="TaskNameLabel" runat="server" Text='<%# Bind("TaskName") %>'></asp:Label><br />
        StartDate:
        <asp:Label ID="StartDateLabel" runat="server" Text='<%# Bind("StartDate") %>'></asp:Label><br />
        EndDate:
        <asp:Label ID="EndDateLabel" runat="server" Text='<%# Bind("EndDate") %>'></asp:Label><br />
        <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit"
            Text="Edit">
        </asp:LinkButton>
        <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
            Text="Delete">
        </asp:LinkButton>
        <asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New"
            Text="New">
        </asp:LinkButton>
    </ItemTemplate>
    <EditItemTemplate>
        TaskID:
        <asp:Label ID="TaskIDLabel1" runat="server" Text='<%# Eval("TaskID") %>'></asp:Label><br />
        TaskName:
        <asp:TextBox ID="TaskNameTextBox" runat="server" Text='<%# Bind("TaskName") %>'>
        </asp:TextBox><br />
        StartDate:
        <eo:DatePicker runat="server" ID="DatePicker1" SelectedDate='<%#Bind("StartDate")%>'>
        </eo:DatePicker>
        <br />
        EndDate:
        <asp:TextBox ID="EndDateTextBox" runat="server" Text='<%# Bind("EndDate") %>'>
        </asp:TextBox><br />
        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
            Text="Update">
        </asp:LinkButton>
        <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
            Text="Cancel">
        </asp:LinkButton>
    </EditItemTemplate>
    <InsertItemTemplate>
        TaskName:
        <asp:TextBox ID="TaskNameTextBox" runat="server" Text='<%# Bind("TaskName") %>'>
        </asp:TextBox><br />
        StartDate:
        <asp:TextBox ID="StartDateTextBox" runat="server" Text='<%# Bind("StartDate") %>'>
        </asp:TextBox><br />
        EndDate:
        <asp:TextBox ID="EndDateTextBox" runat="server" Text='<%# Bind("EndDate") %>'>
        </asp:TextBox><br />
        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
            Text="Insert">
        </asp:LinkButton>
        <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
            Text="Cancel">
        </asp:LinkButton>
    </InsertItemTemplate>
</asp:FormView>


Note the DatePicker control used inside EditItemTemplate for "StartDate". The code use the sample database demo.mdb included in our sample project and you should see it works fine. You can try to get that working, and then copy the DatePicker from our sample into your page (remember to change the data field name) and see if that works.

If it still does not work, we can take a look if you can produce a test page that we can run here; or if you are OK for us to take a look on your machine through remote desktop sharing. We use gotomeeting to do remote sessions.

Thanks
Back to top
 
Dixie Ann
Posted: Wednesday, May 6, 2009 12:38:36 PM
Rank: Newbie
Groups: Member

Joined: 5/5/2009
Posts: 4
Hi,

I tried it and I am happy to report that it worked fine.

Thanks so much.Angel
Back to top
 
eo_support
Posted: Wednesday, May 6, 2009 12:44:17 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Cool. Glad that you got it working!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.