[CLOSED] Set two datefields at once

  1. #1

    [CLOSED] Set two datefields at once

    Hello,

    I have an event scheduling form with two ext:datefields, txtStartDate and txtEndDate.

    I want to set both fields to the same date when the date is changed in the txtStartDate control. I have already tried the OnTextChanged event - but it doesn't fire.

    
    <script type="text/javascript">      
          var onKeyUp = function (field) {
            var v = this.processValue(this.getRawValue()),
                field;
            if (v.length < 1) {
              if (this.startDateField) {
                field = Ext.getCmp(this.startDateField);
                field.setMaxValue();
                this.dateRangeMax = null;
              } else if (this.endDateField) {
                field = Ext.getCmp(this.endDateField);
                field.setMinValue();
                this.dateRangeMin = null;
              }
              field.validate();
            }
          };
    </script>
    
    <script>
      protected void txtStartDate_OnTextChanged(object sender, EventArgs e)  {
        string myStartDate = txtStartDate.Text;
        txtEndDate.Text = myStartDate;
      }
    </script>
    
    <ext:DateField ID="txtStartDate" runat="server" Vtype="daterange" EnableKeyEvents="true" DisabledCls="noBorder"   
                            Width="95" Format="MM/dd/yyyy" AllowBlank="false" StyleSpec="font-size:10pt; font-weight:bold;" OnTextChanged="txtStartDate_OnTextChanged" >  
      <CustomConfig>
        <ext:ConfigItem Name="endDateField" Value="txtEndDate" Mode="Value" />
      </CustomConfig>
      <Listeners>
        <KeyUp Fn="onKeyUp" />
      </Listeners>                          
    </ext:DateField>
    
    <ext:DateField ID="txtEndDate" runat="server" Vtype="daterange" EnableKeyEvents="true" DisabledCls="noBorder" 
                            Width="95" Format="MM/dd/yyyy" AllowBlank="false" StyleSpec="font-size:10pt; font-weight:bold;" >    
      <CustomConfig>
        <ext:ConfigItem Name="startDateField" Value="txtStartDate" Mode="Value" />
      </CustomConfig>
      <Listeners>
        <KeyUp Fn="onKeyUp" />
      </Listeners>
    </ext:DateField>
    Last edited by Daniil; Aug 26, 2015 at 7:27 AM. Reason: [CLOSED]
  2. #2
    Hi @jmilton,

    Please use a DateField's client side Change listener.
  3. #3

    how do I set the date into the datefield?

    
    <script type="text/javascript">      
          var onKeyUp = function (field) {
            var v = this.processValue(this.getRawValue()),
                field;
            if (v.length < 1) {
              if (this.startDateField) {
                field = Ext.getCmp(this.startDateField);
                field.setMaxValue();
                this.dateRangeMax = null;
              } else if (this.endDateField) {
                field = Ext.getCmp(this.endDateField);
                field.setMinValue();
                this.dateRangeMin = null;
              }
              field.validate();
            }
          };
    
          var setEndDate = function (field) { var v = this.processValue(this.getRawValue()), field;
          txtEndDate.val = v;
        };
    
    </script>
    
    <script>
      protected void txtStartDate_OnTextChanged(object sender, EventArgs e)  {
        string myStartDate = txtStartDate.Text;
        txtEndDate.Text = myStartDate;
      }
    </script>
    
    <ext:DateField ID="txtStartDate" runat="server" Vtype="daterange" EnableKeyEvents="true" DisabledCls="noBorder"   
                            Width="95" Format="MM/dd/yyyy" AllowBlank="false" StyleSpec="font-size:10pt; font-weight:bold;" OnTextChanged="txtStartDate_OnTextChanged" >  
      <CustomConfig>
        <ext:ConfigItem Name="endDateField" Value="txtEndDate" Mode="Value" />
      </CustomConfig>
      <Listeners>
        <KeyUp Fn="onKeyUp" />
        <Change Fn="setEndDate"/>
      </Listeners>                          
    </ext:DateField>
    
    <ext:DateField ID="txtEndDate" runat="server" Vtype="daterange" EnableKeyEvents="true" DisabledCls="noBorder" 
                            Width="95" Format="MM/dd/yyyy" AllowBlank="false" StyleSpec="font-size:10pt; font-weight:bold;" >    
      <CustomConfig>
        <ext:ConfigItem Name="startDateField" Value="txtStartDate" Mode="Value" />
      </CustomConfig>
      <Listeners>
        <KeyUp Fn="onKeyUp" />
      </Listeners>
    </ext:DateField>
    I have tried Blur, Change, etc. The txtEndDate field never gets set.



    I did find a solution:

      <script>
        protected void txtStartDate_OnTextChanged(object sender, EventArgs e)    {
          string myStartDate = txtStartDate.Text;
          txtEndDate.Text = myStartDate;
        }
      </script>
    
    <ext:DateField ID="txtStartDate" runat="server" Vtype="daterange" EnableKeyEvents="true" DisabledCls="noBorder"   
                            Width="95" Format="MM/dd/yyyy" AllowBlank="false" StyleSpec="font-size:10pt; font-weight:bold;" OnDirectChange="txtStartDate_OnTextChanged"  >  
      <CustomConfig>
        <ext:ConfigItem Name="endDateField" Value="txtEndDate" Mode="Value" />
      </CustomConfig>
      <Listeners>
        <KeyUp Fn="onKeyUp" />
      </Listeners>
    </ext:DateField>
    
    <ext:DateField ID="txtEndDate" runat="server" Vtype="daterange" EnableKeyEvents="true" DisabledCls="noBorder" 
                            Width="95" Format="MM/dd/yyyy" AllowBlank="false" StyleSpec="font-size:10pt; font-weight:bold;" >    
      <CustomConfig>
        <ext:ConfigItem Name="startDateField" Value="txtStartDate" Mode="Value" />
      </CustomConfig>
      <Listeners>
        <KeyUp Fn="onKeyUp" />                            
      </Listeners>
    </ext:DateField>
    Last edited by jmilton; Aug 17, 2015 at 5:58 PM. Reason: solution found
  4. #4
    It is quite an overhead to do a request to server for that. I would still highly recommend to do it client side.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:DateField ID="DateField1" runat="server">
                <Listeners>
                    <Change Handler="App.DateField2.setValue(newValue);" />
                </Listeners>
            </ext:DateField>
    
            <ext:DateField ID="DateField2" runat="server" />
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] [1.2] DateFields in daterange
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 05, 2012, 3:42 PM
  2. [CLOSED] V2.0 DateFields with DateRange
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 16, 2012, 4:17 PM
  3. [CLOSED] Different time zone settings on DateFields
    By georgek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 04, 2010, 1:40 AM
  4. [CLOSED] [1.0] DateFields Not Rendered Properly on FieldSet
    By MP in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 02, 2010, 5:39 PM
  5. DateFields adds one month
    By EzaBlade in forum 1.x Help
    Replies: 1
    Last Post: Mar 23, 2009, 1:09 PM

Posting Permissions