What's New?

[CLOSED] Field with Date And Time

  1. #1
    Mar 09, 2010, 12:23 AM

    [CLOSED] Field with Date And Time

    Hi There,

    In my application I need to have a control to select Start Date and End Date along with Time with validation as End Date cannot be before Start Date.

    Can you please suggest me how to accomplish this.

    Kind Regards,
    Fehmeed
  2. #2
    Mar 09, 2010, 12:46 AM

    RE: [CLOSED] Field with Date And Time

    The following sample should help get you started, see https://examples1.ext.net/#/Form/Dat...From-To_Range/

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Mar 09, 2010, 1:03 AM

    RE: [CLOSED] Field with Date And Time

    Hi Geoffrey,

    Thanks for the quick response.
    The example has only dates, How should i implement Time field with it?
    I tried the DateField with renderer 'd/m/Y H:i' but it doesn't allow me to change the time after selecting the date. Please help me with this.

    Kind Regards,
    Fehmeed



  4. #4
    Mar 09, 2010, 10:32 AM

    RE: [CLOSED] Field with Date And Time

    Hi,

    Please see the following sample (please update from SVN first, we fixed one TimeField bug) 
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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></title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:FormPanel runat="server" Border="false">
            <Items>
                <ext:MultiField runat="server" FieldLabel="From date">
                    <Fields>
                        <ext:DateField ID="FromDate" runat="server" Vtype="daterange">
                            <Listeners>
                                <Render Handler="this.endDateField = '#{ToDate}';" />
                            </Listeners>   
                        </ext:DateField>
                        
                        <ext:TimeField ID="FromTime" runat="server" Width="60" MinListWidth="60">
                            <Listeners>
                                <Select Handler="#{ToTime}.setMinValue(this.getValue());#{ToTime}.validate();" />
                            </Listeners>
                        </ext:TimeField>
                    </Fields>
                </ext:MultiField>
                
                <ext:MultiField runat="server" FieldLabel="To date">
                    <Fields>
                        <ext:DateField ID="ToDate" runat="server" Vtype="daterange">
                            <Listeners>
                                <Render Handler="this.startDateField = '#{FromDate}';" />
                            </Listeners>   
                        </ext:DateField>
                        
                        <ext:TimeField ID="ToTime" runat="server" Width="60" MinListWidth="60">
                            <Listeners>
                                <Select Handler="#{FromTime}.setMaxValue(this.getValue());#{FromTime}.validate();" />
                            </Listeners>
                        </ext:TimeField>
                    </Fields>
                </ext:MultiField>
            </Items>
        </ext:FormPanel>
    </form>
</body>
</html>
  5. #5
    Mar 09, 2010, 8:36 PM

    RE: [CLOSED] Field with Date And Time

    Hi Vladimir,

    The example is excellent but have a problem. Works perfect if the from date and to date are same and times are different, but if dates are different then its not allowing me to set the ToTime Value less than FromTime value. For example From Date is "10/03/2010 10:00", then its not allowing me to set ToDate as "11/03/2010 09:00". The timeField drop down in the ToDate starts from "10:00". Can you please fix this.

    Kind Regards,
    Fehmeed

  6. #6
    Mar 09, 2010, 10:55 PM

    RE: [CLOSED] Field with Date And Time

    Can you please fix this.
    I think the best place to start is for you to post the code you used which attempted to fix the problem. Can you post your revised .Handler code?


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Mar 10, 2010, 12:24 AM

    RE: [CLOSED] Field with Date And Time

    Hi Geoffrey,

    You can use the same code That vladimir has given. When I executed the same example code, I selected the "From Date" as today (10-March-2010), "From Time" as 10:00 am. Then i selected To Date as Tomorrow (11-March-2010) and I wanted to select 9:00 am for "To Time" which the example code didn't allow me to do. Please have a look at the attached screenshot. Please fix the validation to consider the Date as well. The current validation holds good if From Date and To Date are same.

    Kind Regards,
    Fehmeed
  8. #8
    Mar 10, 2010, 6:47 AM

    RE: [CLOSED] Field with Date And Time

    Hi,

    The logic is simple, set time limit when dates are same and clear time limit otherwise
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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></title>
    
    <ext:XScript runat="server">
        <script type="text/javascript">
            function setToTimeLimit(clear){
                var fromDate = #{FromDate}.getValue(),
                    toDate = #{ToDate}.getValue();
                    
                if(fromDate &amp;&amp; toDate &amp;&amp; (fromDate.getTime() - toDate.getTime()) == 0){
                    #{ToTime}.setMinValue(#{FromTime}.getValue());                    
                }
                else if(clear){
                    #{ToTime}.setMinValue(new Date().clearTime());
                }
                
                #{ToTime}.validate();
            }
            
            function setFromTimeLimit(clear){
                var fromDate = #{FromDate}.getValue(),
                    toDate = #{ToDate}.getValue();
                
                if(fromDate &amp;&amp; toDate &amp;&amp; (fromDate.getTime() - toDate.getTime()) == 0){
                    #{FromTime}.setMaxValue(#{ToTime}.getValue());                   
                }
                else if(clear){
                    #{FromTime}.setMaxValue(new Date().clearTime().add('mi', (24 * 60) - 1));          
                }
                
                #{FromTime}.validate();
            }
        </script>
    </ext:XScript>
    
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:FormPanel runat="server" Border="false">
            <Items>
                <ext:MultiField runat="server" FieldLabel="From date">
                    <Fields>
                        <ext:DateField ID="FromDate" runat="server" Vtype="daterange">
                            <Listeners>
                                <Render Handler="this.endDateField = '#{ToDate}';" />
                                <Valid Handler="setToTimeLimit(true);setFromTimeLimit(true);" />
                            </Listeners>   
                        </ext:DateField>
                        
                        <ext:TimeField ID="FromTime" runat="server" Width="60" MinListWidth="60">
                            <Listeners>
                                <Select Fn="setToTimeLimit" />
                            </Listeners>
                        </ext:TimeField>
                    </Fields>
                </ext:MultiField>
                
                <ext:MultiField runat="server" FieldLabel="To date">
                    <Fields>
                        <ext:DateField ID="ToDate" runat="server" Vtype="daterange">
                            <Listeners>
                                <Render Handler="this.startDateField = '#{FromDate}';" />
                                <Valid Handler="setToTimeLimit(true);setFromTimeLimit(true);" />
                            </Listeners>   
                        </ext:DateField>
                        
                        <ext:TimeField ID="ToTime" runat="server" Width="60" MinListWidth="60">
                            <Listeners>
                                <Select Fn="setFromTimeLimit" />
                            </Listeners>
                        </ext:TimeField>
                    </Fields>
                </ext:MultiField>
            </Items>
        </ext:FormPanel>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Date time field editing in gridpanel
    By bossun in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Nov 05, 2012, 5:18 AM
  2. Example of using composite field of Date and Time fields as a grid column editor
    By anup in forum Examples and Extras
    Replies: 3
    Last Post: Jul 24, 2012, 8:40 PM
  3. date time field in grid panel
    By sunshine in forum 1.x Help
    Replies: 1
    Last Post: Jul 28, 2011, 12:53 AM
  4. [CLOSED] Displaying Todays date in Date field
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 22, 2011, 10:38 AM
  5. Time Field Time Format Setting
    By Dinesh.T in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2009, 3:21 AM

Posting Permissions