1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    14
    Vote Rating
    0
    BenjaminDC is on a distinguished road

      0  

    Default Unanswered: Two date pickers in one sheet to select an interval

    Unanswered: Two date pickers in one sheet to select an interval


    Hi,

    i would like to have a sheet that pops up with two date pickers ("from" and "to") to select a date interval.

    I have tried to do this with a container (layout: hbox) that contains two containers. Each container then contains a date picker without the buttons. Below the two date pickers I've placed my own "cancel" and "done" buttons. The initial values of these date pickers are set to today's date.

    The problem is I can't get the new values of the date pickers when I change them. I'm getting out of ideas on how to look further into this. I've been hooking into all kinds of events that could be triggered to see if i get the new values, i've tried hiding the "done" button and programmatically tapping it by tapping the new button below,...

    Does anybody have a solution or an idea on how he would make this?

  2. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    datePicker1.getValue(true), datePicker2.getValue(true)


    Actually I put it here: http://joy2share.com/senchatouch/art...-end-date.html

    because I like the idea of datepickers without their original behavior
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    14
    Vote Rating
    0
    BenjaminDC is on a distinguished road

      0  

    Default


    Thank you for your response! It was not what I had in mind, I actually already managed to get the same thing yesterday, but you got me on the right track!

    The problem with your solution is that you get the values when you start to scroll the picker, not when the picker stops scrolling. If you know what I mean?

    Here's the code of my IntervalPickerSheet.js, just create an instance in your app (Ext.create('MyApp.view.IntervalPickerSheet')) and show it by pressing a button. The initial value is today's date, the OK button changes the value, the CANCEL button keeps the previous values/ doesn't change them.
    Through the instance you can retrieve the values with getFrom() and getTo(). I think this is a good solution that does what is expected. Any comments/suggestions are still welcome.
    Code:
    var datePickerFrom, datePickerTo;
    var from, to;
    Ext.define('MyApp.view.IntervalPickerSheet', {
        extend: 'Ext.Sheet',
        alias: 'widget.IntervalPickerSheet',
    
    
        config: {
            height: 253,
            hidden: true,
            id: 'intervalpicker',
            minWidth: 600,
            ui: 'light',
            width: 266,
            hideOnMaskTap: false,
            layout: {
                type: 'hbox'
            },
            enter: 'top',
            exit: 'top',
            control: {
                '#confirmbutton': {
                    tap: 'confirm'
                },
                '#cancelbutton': {
                    tap: 'cancel'
                }
            }
        },
        initialize: function(){
            datePickerFrom = Ext.create('Ext.picker.Date',{toolbar: {title: 'From'}, cancelButton:null, doneButton:null});
            datePickerTo = Ext.create('Ext.picker.Date',{toolbar: {title: 'To'}, cancelButton:null, doneButton:null});
            datePickerFrom.setValue(new Date());
            datePickerTo.setValue(new Date());
            this.setItems(    [
                            {
                                xtype: 'container',
                                id: 'fromCon',
                                flex: 1,
                                layout: {
                                    type: 'fit'
                                },
                                items: datePickerFrom
                            },
                            {
                                xtype: 'container',
                                id: 'toCon',
                                flex: 1,
                                layout: {
                                    type: 'fit'
                                },
                                items: datePickerTo
                            },
                            {
                                xtype: 'segmentedbutton',
                                docked: 'bottom',
                                ui: 'light',
                                allowToggle: false,
                                items: [
                                    {
                                        xtype: 'button',
                                        flex: 1,
                                        text: 'Cancel',
                                        id: 'cancelbutton'
                                    },
                                    {
                                        xtype: 'button',
                                        flex: 1,
                                        text: 'Ok',
                                        id: 'confirmbutton'
                                    }
                                ]
                            }
                            ]                        
                        );
            console.log('initialize');
        },
        //Functions
        confirm: function(){
            console.log('confirm');
            console.log(datePickerFrom.getValue(true),datePickerTo.getValue(true));
            from = datePickerFrom.getValue(true);
            to = datePickerTo.getValue(true);
            datePickerFrom.setValue(from);
            datePickerTo.setValue(to);
            this.hide();
        },
        cancel: function(){
            console.log('cancel');
            console.log(datePickerFrom.getValue(true),datePickerTo.getValue(true));
            datePickerFrom.setValue(from);
            datePickerTo.setValue(to);
            this.hide();
        },
        getFrom: function(){
            return from;
        },
        getTo: function(){
            return to;
        }
    });

  4. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    604
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      1  

    Default


    Well, it is pretty nice already. Getting the dates on button press it is fair enough. I just presented a way of solving things
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar