Display the time picker value in the textfield using sencha touch 2

Question

    Ext.define("Datetimepicker.view.Main", {
               extend: 'Ext.form.Panel',
               requires: [
                                'Ext.TitleBar',
                                'Ext.field.DatePicker',
                                 'Ext.Spacer',
                                 'Ext.Picker'
                             ],
               config: {
                            fullscreen:'true',
                            title:'DatatimePicker',
                            items: [
                               {
                                   xtype:'fieldset',
                                        items:[
                                           {
                                              xtype:'datepickerfield',
                                              label:'Birthday',
                                              picker:{
                                                 yearFrom:1980,
                                                  yearTo:2015
                                               },
                                             name:'birthday',
                                             value:new Date()
                                         },
                                          {
                                            xtype:'textfield',
                                             label:'Time',
                                             value:''
                                           //In this textfield i want to display the time picker value
                                            }
                                        }
                                    ]
                                    },
                                 {

items:[
{
xtype:'spacer'
},
{
text: 'setValue',
handler: function() {
var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0];
var randomNumber = function(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
};
datePickerField.setValue({
month: randomNumber(0, 11),
day : randomNumber(0, 28),
year : randomNumber(1980, 2015)
});
}
},
{ xtype:'spacer'}
]
}
]
}
});

By using above code I'm getting the value of datepicker which successfully display in the first textfield.In the same way I want to display that value of datepicker in another textfield. Can anyone help me to do this ...thanks in advance

score 1 · Accepted Answer · edited Jan 23 '13 at 13:10

1

You can do it by setting the value of the textfield every time your picker's value has been changed so here is a solution:

 items: [
            {
                xtype: 'datepickerfield',
                label: 'Birthday',
                name: 'birthday',
                value: new Date(),
                listeners: {
                    change: function(picker, value) {
                        // This function use to prepend 0 to the month which less than October
                        function minTwoDigits(n) {
                            return (n < 10 ? '0' : '') + n;
                        }
                        var date = value.getDate(), // Get date's value
                            month = value.getMonth(); // Get month's value
                        month += 1; // Increase the number of month by 1 since the index started with 0
                        var formatMonth = minTwoDigits(month),
                            year = value.getFullYear(), // Get year's value
                            formatDate = formatMonth.concat("/",date,"/",year); // Concatenate string
                        Ext.ComponentQuery.query('#textfield')[0].setValue(formatDate); // Set the value of the textfield with itemID equal to textfield
                    }
                }
            },
            {
                xtype:'textfield',
                label:'time',
                itemId: 'textfield',
                value:''

            }
        ]

If you don't understand anything, feel free to ask. Hope it helps :)

edited Jan 23 '13 at 13:10

jimmy

37
1
6

answered Jan 23 '13 at 12:18

Eli

14,779
5
59
77

thanks for rply,my code works successfully,here i want to disply the time picker, when we select the time from that picker ,i want to get that time in the textfield { xtype:'textfield', label:'time', itemId: 'textfield', value:'' } – jimmy Jan 23 '13 at 12:31
Maybe you need to understand more about my solution since above code just follow what you want. Give it a try :) – Eli Jan 23 '13 at 12:41
okay, i will chk .I have one doubt.by using the above code can we get time picker? – jimmy Jan 23 '13 at 12:47
i checked your code , unfortunately both fields birthday,time fields are getting the date – jimmy Jan 23 '13 at 12:49
in the time field,i want to display time from the picker,can u help me to do this? thanks .... – jimmy Jan 23 '13 at 12:56
1

I don't know why you cannot make it because I've checked and it works smoothly. Do you get any error in the console? – Eli Jan 23 '13 at 12:57
i got this error ,in console "Uncaught TypeError: Object 02/23/2013 has no method 'getDate'" – jimmy Jan 23 '13 at 12:59
in the time field ,u got the time picker or time? – jimmy Jan 23 '13 at 13:00
user1479606,just now i updated the code as u said,can u check once? – jimmy Jan 23 '13 at 13:13
1

@jimmy wah, no wonder. Don't do like that, my code is just an update for your old version, just keep your old version and replace the part that I added above – Eli Jan 23 '13 at 13:27

Display the time picker value in the textfield using sencha touch 2

1 Answers1