如何在单击文本字段时显示datepicker

Question

我想向文本字段start_date和end_date显示，而点击它应该显示每个字段的日期选择器。对此提出任何建议。提前致谢

下面是图片

以下是代码段

        Ext.define('CustomApp', {
            extend: 'Rally.app.App',
            componentCls: 'app',
            _startDate : 0,
            _endDate : 0,
            launch: function() {
                var that = this;
                var minDate = new Date(new Date() - 8640000000*90); //milliseconds in day = 86400000   
                var datePicker = Ext.create('Ext.panel.Panel', {
                    title: 'Choose a PSI Dates',
                    bodyPadding: 10,
                    width: 400,
                    layout: {
                        type: 'hbox',
                    },
                    renderTo: Ext.getBody(),
                    items: [{
                        xtype: 'datepicker',
                        title: 'PSI start date',
                        minDate: minDate,
                        id: 'start_date',
                        handler: function(picker, date) {                                
                            that._startDate = Ext.getCmp('start_date').getValue();
                        }
                    },
                    {
                        xtype: 'datepicker',
                        title: 'PSI end date',
                        minDate: minDate,
                        id: 'end_date',
                        handler: function(picker, date) {
                            that._endDate = Ext.getCmp('end_date').getValue();
                            that._prepareChart();
                        }

                    }
                    ]
                });         
                this.add(datePicker);   
                //this.add(enddatePicker);          
            },

Answer 1

使用datefield而不是datepicker。 JSFiddle

  items: [{
           fieldLabel: 'Start Date',
           xtype: 'datefield',              
           minDate: minDate,
           id: 'start_date',
           listeners: {
               render: function(){
                    var picker = this.getPicker();
                    picker.on("select",function(){ this.hide(); });
                    this.triggerCell.hide();
                    this.inputCell.on("click",function(){                                                  
                        if(picker.hidden)                               
                            picker.show(); 
                        else
                            picker.hide();
                     });                                    
                }
            }
        }, {
           fieldLabel: 'End Date',
           xtype: 'datefield',
           minDate: new Date(),
            listeners: {
                render: function(){
                    var picker = this.getPicker();
                    picker.on("select",function(){ this.hide(); });
                    this.triggerCell.hide();
                    this.inputCell.on("click",function(){                                                   
                        if(picker.hidden)                              
                            picker.show(); 
                        else
                            picker.hide();                            
                    });                                    
                }
            }
    }]

Answer 2

试试这个：

var result = context
            .ExpenseGroups
            .GroupBy(eg => eg.Id, (s) => new { Name = s.Name, Amount = s.Expenses.SelectMany(e => e.Items).Sum(i => i.PlannedAmount) })
            .ToList();