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'}
]
}
]
}
});
通过使用上面的代码,我得到了在第一个文本字段中成功显示的datepicker的值。同样,我想在另一个文本字段中显示datepicker的值。 任何人都可以帮我做这件事......提前谢谢
答案 0 :(得分:1)
您可以通过在每次更改textfield
值时设置picker's
的值来执行此操作,这是一个解决方案:
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:''
}
]
如果你什么都不懂,请随便问。希望它有所帮助:)