Blog Archive

ExtJs Date manipulation - Add and Subtract example

How to Add/Subtract Days, Months and Years from a given Date in ExtJs

Date manipulation is essential to any application programming. Ext.Date.add() method makes it easy to do date calculations in ExtJs.

add( Date date, String interval, Number value )
Date Provides a convenient method for performing basic date arithmetic.

Parameters are
  • Date 
    • The date to modify 
  • interval
    • String A valid date interval enum value. 
  • value
    •  Number The amount to add to the current date. 
Returns a Date, Here is an example...


ExtJs date manipulation Add and Subtract

Application HTML file - index.html

<html>
<head>
<title>ExtJs date manipulation - Add and Subtract</title>

<link rel="stylesheet" type="text/css"
 href="extjs/resources/css/ext-all.css">
<style type="text/css">
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({ 
 enabled: true 
 });

Ext.application({
    
 name: 'myApp',
 appFolder: 'app/dateCalculations',
    
    controllers: [
                  'MyController'
              ],

    launch: function() {
 Ext.create('Ext.container.Container', {
         renderTo: 'myExample',
         height: 250,
            width: 400,
         layout: {
                align: 'stretch',
                type: 'vbox'
            },
         defaults: { 
            labelWidth: 150,
            margin: '5 5 5 5 '
         },
          items: [
                     {
                         xtype: 'form',
                         height: 200,
                         bodyPadding: 10,
                         title: 'My Date Calculation Form',
                         items: [
                             {
                                 xtype: 'datefield',
                                 fieldLabel: 'From Date',
                                 itemId: 'fromDate',
                                 anchor: '100%',
                                 value: new Date() 
                             },
                             {
                                 xtype: 'numberfield',
                                 fieldLabel: 'Add/Subtract by',
                                 itemId: 'myCounter',
                                 anchor: '100%',
                                 value: 10
                             },
                             {
                                 xtype: 'radiogroup',
                                 fieldLabel: 'Date Type',
                                 itemId: 'dateType',
                                 items: [
                                     {
                                         xtype: 'radiofield',
                                         boxLabel: 'Days',
                                         name: 'dt',
                                         checked: true,
                                         inputValue: 'D'
                                     },
                                     {
                                         xtype: 'radiofield',
                                         boxLabel: 'Months',
                                         name: 'dt',
                                         inputValue: 'M'
                                     },
                                     {
                                         xtype: 'radiofield',
                                         boxLabel: 'Years',
                                         name: 'dt',
                                         inputValue: 'Y'
                                     }
                                 ]
                             },
                             {
                                 xtype: 'button',
                                 text: 'Press here to see Results below...',
                                 margin: '0 0 5 0'
                             },
                             {
                                 xtype: 'displayfield',
                                 value: '',
                                 itemId: 'resultDate',
                                 fieldLabel: '<b>Result Date</b>',
                                 anchor: '100%'
                             }
                         ]
                     }
                 ]
        });
    }
}); 
    </script>

</head>
<body>
 <div id="myExample"></div>
</body>
</html>

Application Controller - MyController.js

Ext.define('myApp.controller.MyController', {
 extend : 'Ext.app.Controller',

 init : function() {
  this.control({

     'container' : {
      render : this.onContainerRendered
     },
     'container button' : {
      click : this.onButtonClick
     }
    });
 },

 onContainerRendered : function() {
  // console.log('The container was rendered');
 },

 onButtonClick : function(button) {
  // console.log('Button Click');
  var myView = button.up('container');
  var fromDate = myView.getComponent('fromDate').getValue();
  var myCounter = myView.getComponent('myCounter').getValue();
  var dateType = myView.getComponent('dateType').getValue().dt;

  var resultDate = myView.getComponent('resultDate');
  if (dateType === "D") {
   resultDate.setValue(Ext.Date.add(fromDate, Ext.Date.DAY,
     myCounter));
  }
  if (dateType === "M") {
   resultDate.setValue(Ext.Date.add(fromDate, Ext.Date.MONTH,
     myCounter));
  }
  if (dateType === "Y") {
   resultDate.setValue(Ext.Date.add(fromDate, Ext.Date.YEAR,
     myCounter));
  }

 }

});

References