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.
|
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));
}
}
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.