[CLOSED] DatePicker:

  1. #1

    [CLOSED] DatePicker:

    Hello,

    I would like the following behaviour from the DatePicker component.

    When I change the month by clicking only the arrow previous or next, the first day of the selected month should be selected and an event should be thrown.

    Is it possible and with wich listener can I catch the thrown event?

    Thanks,
    Romuald.
    Last edited by geoffrey.mcgill; Jul 20, 2010 at 10:35 PM.
  2. #2
    Hi,

    Please see the following sample
    <%@ 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 id="Head1" runat="server">
        <title></title>
        
        <script type="text/javascript">
           function setFirstDay(){       
              this.setValue(new Date(this.activeDate.getFullYear(), this.activeDate.getMonth(), 1));
              this.fireEvent('select', this, this.value);
           }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
            
            <ext:DatePicker ID="Picker1" runat="server">
                <Listeners>
                    <BeforeRender Handler="this.showPrevMonth = this.showPrevMonth.createSequence(setFirstDay);this.showNextMonth = this.showNextMonth.createSequence(setFirstDay);" />
                </Listeners>
            </ext:DatePicker>
            
            
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 11:03 PM.
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Thank you for your reply. Your solution works perfectly. But I couldn't do it myself. So I would want to understand it. I understand the function setFirstDay and its meaning.

    What I don't understand is the construction of the beforeRender handler.

    First of all what is the difference between beforeRender and beforeShow? In which order they are raised? I could notice that the first time the datepicker is shown the beforerender event is not thrown.

    What is showPrevMonth? I think it is a method of the datepicker object. isn't it? Or is it a property? What is createSequence? What is its task?

    How could I know the existence of these mothods or properties?

    Thanks,

    Romuald.
    Last edited by geoffrey.mcgill; Jul 08, 2010 at 6:51 PM.
  4. #4
    Hi,

    - beforerender: Fires before the component is rendered. Return false from an event handler to stop the render.
    Fires only once
    - beforeshow: Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
    Fires if you call show method

    So, beforeRender fires without fail (surely) but beforeShow fires when show method is called

    - showPrevMonth and showNextMonth are DatePicker methods which are called if you click on buttons in the picker. So, we need to select first day after those methods calling. To accomeplish that we use createSequence method

    createSequence( Function fcn, [Object scope] ) : Function
    Create a combined function call sequence of the original function + the passed function. 
    The resulting function returns the results of the original function. 
    The passed fcn is called with the parameters of the original function. 
    Example usage:
    var sayHi = function(name){
        alert('Hi, ' + name);
    }
    
    sayHi('Fred'); // alerts "Hi, Fred"
    
    var sayGoodbye = sayHi.createSequence(function(name){
        alert('Bye, ' + name);
    });
    
    sayGoodbye('Fred'); // both alerts show
    Parameters:
    fcn : Function
       The function to sequence
    scope : Object
      (optional) The scope (this reference) in which the passed function is executed. 
      If omitted, defaults to the scope in which the original function is called or the browser window.
    Returns:
       Function
         The new function
    So, createSequence allows us to add own method execution after base method execution

    Please see the following link for more details

    http://www.sencha.com/deploy/dev/docs/?class=Function
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 11:03 PM.
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Thank you vladimir for your explanation. It is very helpfull.

    But I still have one question. I guess the DatePicker per default (before its rendering) is set to the current date configured on the system of the machine on which the program runs. Is it true? Where can I find this default setting?

    I was able to change this value within a handler that is executed when the beforeRender event is thrown.

    I don't want to change it for my task. I would only want to understand some behavior I've got.

    Romuald
  6. #6
    Hello,

    I come back with another porblem with Datepicker. It seems the code doesn't work properly. Sometimes when one clicks the nextmonth's button it changes to the next month but changes after a bit back to the started month.
    The same behaviour also occurs when the previous button is clicked.

    Do you have an idea?

    Romuald
  7. #7
    Hi,

    But I still have one question. I guess the DatePicker per default (before its rendering) is set to the current date configured on the system of the machine on which the program runs. Is it true? Where can I find this default setting?
    If you don't set SelectedDate property then DatePicker will set current Date as default selection (just use 'new Date()'), of course, current date of the client side OS

    I come back with another porblem with Datepicker. It seems the code doesn't work properly. Sometimes when one clicks the nextmonth's button it changes to the next month but changes after a bit back to the started month.
    The same behaviour also occurs when the previous button is clicked.
    Unfortunately, I cannot reproduce that issue. Try the following
    - use DatePicker without functionality which we are discussing in this topic , just pure DatePicker. Is that issue still reproducible?
    - Do you reproduce that issue with my example or you add that functionality in your page? Try to reproduce the issue in my example without any changes
    - Do you able to reproduce the issue always or the issue is not regular?
    Vladimir Shcheglov
    Sr. Developer
  8. #8
    Hello vladimir,

    Yes, the issue is reproducible without any functionality. I use internet explorer version 8 as browser.


    The issue comes surely with the DatePicker when I use a select listener. When this event is fired I load some store. Something like

    <listeners>
    <select Handler="#{mystore}.load()" />
     
    </listeners>
    The problem is that this behaviour doesn't always occurs.

    But I need this select event to reload my store in order to refresh my grid as I wish.

    In general works coolite perfectly with all browsers?

    Please try the following with pure datepicker without any custom configuration

    <ext:DatePicker ID="date" runat="server">
    <listeners>
    <beforerender Handler="this.showNextMonth = this.showNextMonth.createSequence(methode);"
    </listeners>
    </ext:DatePicker>
    var methode = function(){
        alert(this.activeDate);
    }
    when you run this code and clicks the next month button once this alert comes infinitly with another month in each appearence. It is myself an issue.
    Romuald
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 12:44 AM.
  9. #9
    Hi,

    Yes, I noticed that alert calling can break ExtJS event model when you click on anchor (next month button is actually anchor link). Browser interprets mouse click on OK (or key press) as click on that anchor

    At this moment I can suggest to use Ext.Msg.alert calling instead 'alert' only

    Ext.Msg.alert('Select', this.activeDate);
    Can you provide example with store which demonstrate the issue? Do you call an alert if databind fail or somewhere else?

    In general works coolite perfectly with all browsers?
    Yes, we use ExtJS javascript toolkit (now Sencha) and it is positioned as cross browser toolkit
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 11:03 PM.
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. [CLOSED] DatePicker day highlighted
    By methode in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 13, 2012, 10:32 AM
  2. [CLOSED] DatePicker: drop
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 28, 2010, 7:27 PM
  3. [CLOSED] datepicker from to example
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 04, 2010, 2:29 PM
  4. [CLOSED] DatePicker
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 18, 2008, 4:31 AM
  5. [CLOSED] Datepicker help
    By Jurke in forum 1.x Help
    Replies: 13
    Last Post: Sep 22, 2008, 6:52 AM

Posting Permissions