Results 1 to 3 of 3

Thread: How to extend DatePicker?

  1. #1
    Sencha User
    Join Date
    Dec 2010

    Default 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.
    public XElement renderTimePickerContainer(XElement datePickerElement) {    
        final Element tableElement = datePickerElement.selectNode(datePickerAppearance.todayButtonSelector()).getParentElement().getParentElement();
        rowElement = DOM.createTR();
        columnElement = DOM.createTD();
    In the constructor of DateTimePicker i do the following
    this.datePicker = new DatePicker();
    this.timePicker = new TimePicker();
    final XElement timePickerContainer = appearance.renderTimePickerContainer(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

    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 Premium Member
    Join Date
    Jul 2012


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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts