1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    1
    Druadan is on a distinguished road

      0  

    Default Unanswered: How to extend DatePicker?

    I'm trying to extend the DatePicker in a way, that there is also a ui component inside of the DatePicker to customize the time aspect of a Date instance, not just the ... uhm ... date ^.^

    Therefore i created a new widget "TimePicker" which is essentially a composite of some sliders and (that's the important thing) a TextField.

    Another new widget "DateTimePicker" is also a composite which the DatePicker as base (this.initWidget(datePicker) and a TimePicker which is injected into the DOM of the DatePicker in the same way as the "Today" button is inserted into the DatePicker DOM.

    I use this function to create another row above the row with the today button.
    Code:
    public XElement renderTimePickerContainer(XElement datePickerElement) {    
        final Element tableElement = datePickerElement.selectNode(datePickerAppearance.todayButtonSelector()).getParentElement().getParentElement();
        
        com.google.gwt.user.client.Element rowElement = DOM.createTR();
        
        com.google.gwt.user.client.Element columnElement = DOM.createTD();
        columnElement.setClassName(resources.css().timePickerContainer());
        
        rowElement.appendChild(columnElement);
        
        tableElement.insertFirst(rowElement);
        
        return XElement.as(columnElement);
    }
    In the constructor of DateTimePicker i do the following
    Code:
    this.datePicker = new DatePicker();
    this.timePicker = new TimePicker();
    
    
    initWidget(datePicker);
    
    
    final XElement timePickerContainer = appearance.renderTimePickerContainer(getElement());
    timePickerContainer.appendChild(timePicker.getElement());
    And of course, i use the onAttach()/onDetach() methods of the composite to attach/detach the TimePicker properly, just as the same way the DatePicker does it with the "Today" button.

    This seems to work very nice, but the TextField inside the TimePicker won't work correct. In order to test this, i replaced the TimePicker just with a single TextField. This won't work either. You are able to type in something and all seems well but if you typed in something, you can't reposition the cursor inside the TextField with your mouse.

    I investigated alot in the event chain/bubbling of both components, but i don't get the failure. I even utilized JSNI to attach listeners to each element to trace DOM events. Thought the DatePicker captured some event which is important. But i don't see in which point the injected widget behaves other than a normal one.

    Anyone has an idea? Would be great

  2. #2
    Sencha User
    Join Date
    Jan 2015
    Posts
    4
    Vote Rating
    0
    kalandi82 is on a distinguished road

      0  

    Default How to Implement DateTimePicker component in gxt3?

    Request need to help how to implement DateTimePicker in gxt3? Because in my filter i want date + time in a single filter. Plz anyone help.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    11
    Vote Rating
    0
    secretkeeper81 is on a distinguished road

      0  

    Default

    I could really use a DateTimeField or DateTimePicker... if anyone has any custom implementation please let me know!