如何在点击文本框时显示日期选择器

我想在文本框中显示start_date和end_date，点击此按钮应显示每个日期选择器的日期选择器。对此有任何建议。在此先感谢如何在点击文本框时显示日期选择器

以下是图像

enter image description here

并在下面的代码片断

 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);   
      },

来源

2014-10-01 Sontya

http://jqueryui.com/datepicker/ – 2014-10-01 04:49:25

@AbdulJabbar - 感谢您的答复，但我使用ExtJS的日期选择器，不使用jQuery。 – Sontya 2014-10-01 04:51:15

您可以将onfocus事件添加到将调用CustomApp启动函数的start_date和end_date字段中。 – 2014-10-01 05:25:53

使用DateField和代替的日期选择器。 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();        
        });          
       } 
      } 
    }]

来源

2014-10-01 06:37:25 Gilsha

谢谢，你看起来很酷我会尝试这一点，我试着你发送的小提琴，但是一旦显示datepciker就不会隐藏 – Sontya 2014-10-01 06:45:53

我也在使用chrome。 – Sontya 2014-10-01 06:50:17

更新了答案和小提琴。现在试试。 – Gilsha 2014-10-01 06:57:11

试试这个：

{ 
    xtype: 'datefield', 
    name: 'order_date', 
    emptyText: '', 
    fieldLabel: 'Order Date', 
    hideLabel: true, 
    allowBlank: true, 
    margins: '0 10 0 10', 
    format:'d/m/Y', 
    submitFormat:'Y-m-d', 
    value: '', 
    maxValue: new Date(), 
    listeners:{ 
     render: function(cmp, eOpts){ 
      //this.triggerCell.hide(); 
      cmp.inputCell.on("click",function(){ 
       cmp.onTriggerClick(); 
      }); 
     } 
    } 
}

来源

2015-10-23 14:55:45 Raksmey

如何在点击文本框时显示日期选择器

回答

相关问题