Date Range using ExtJS Date Field and Advanced VType

Jun 24, 2009

Date Range using ExtJS Date Field and Advanced VType

Categories: Ext JS, Featured, JavaScript

Tags: Ext JS, JavaScript

Written By: admin

Introduction:

Date Ranging is simple using ExtJS DateField. Yes! When I was working for one of my project, In one of my form I got to include Date Range functionality. When I was searching for this functionality, I got an answer from ExtJS forums, I followed one thread and got the answer. Here is the respective thread, which I was talking about. – problem with custom VTypes – daterange, if you drill down on the same page, you can view a link which depicts about the advance vtype by Brian. So, you can grab the latest version of advance vtypes here – vtypes

Preview | Download

Code Courtesy for vtypes – ExtJS and Brian

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);
 
        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        } 
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Below is the required example:

<div>
  <div style="float:left;"><strong>From</strong><br />
    <div id="fromdate"></div>
  </div>
  <div style="float:left; padding-left:20px;"><strong>To</strong><br />
    <div id="todate"></div>
  </div>
  <div style="clear:both"></div>
</div>

Respective ExtJS JavaScript Code:

<script language="javascript">
// Add the additional 'advanced' VTypes -- [Begin]
Ext.apply(Ext.form.VTypes, {
	daterange : function(val, field) {
		var date = field.parseDate(val);
 
		if(!date){
			return;
		}
		if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
			var start = Ext.getCmp(field.startDateField);
			start.setMaxValue(date);
			start.validate();
			this.dateRangeMax = date;
		} 
		else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
			var end = Ext.getCmp(field.endDateField);
			end.setMinValue(date);
			end.validate();
			this.dateRangeMin = date;
		}
		/*
		 * Always return true since we're only using this vtype to set the
		 * min/max allowed values (these are tested for after the vtype test)
		 */
		return true;
	}
});
// Add the additional 'advanced' VTypes -- [End]
 
dateRangeFunc();
function dateRangeFunc()
	{
		// Date picker				
		var fromdate = new Ext.form.DateField({
			format: 'Y-M-d', //YYYY-MMM-DD
			fieldLabel: '',
			id: 'startdt',
			name: 'startdt',
			width:140,
			allowBlank:false,
			vtype: 'daterange',
            endDateField: 'enddt'// id of the 'To' date field
		});
 
		var todate = new Ext.form.DateField({
			format: 'Y-M-d', //YYYY-MMM-DD
			fieldLabel: '',
			id: 'enddt',
			name: 'enddt',
			width:140,
			allowBlank:false,
			vtype: 'daterange',
            startDateField: 'startdt'// id of the 'From' date field
		});
 
		fromdate.render('fromdate');
		todate.render('todate');
} //dateRangeFunc() close
</script>

Below is the working example for the same:

Preview – Date Range using ExtJS Date Field

Download:

Download – Date Range using ExtJS Date Field

Articles which you would like to read:

itmoxodoelo Says:
July 17th, 2009 at 9:57 pm

Hello,

Need information about these two hosting services.

I’m interested in those two hosting companies, need some information from you guys.
It would be better as fast as possible, because at the moment planning to develop little web service and few blogs.

Found Host1Plus and GoDaddy offers its hosting.
Some time ago I had account on Hostmonster, but I don’t like it.

My friend using JustHost, but now its services going bad and bad… So please don’t offer it

Please share your opinions and your own experience.

admin Says:
July 18th, 2009 at 10:01 am

Hi,

Right now my webblog was hosted on dreamhost.com, the service was very good… I am using this since 16 months. There was no problem at all.

Thanks,
Vivek

Ei Chaw San Says:
September 24th, 2009 at 1:18 am

hi,,,,
I’m really sorry for my stupid question.
Pls kindly tell me how to use this with my php file.

Though I download and run it by itself,it doesn’t work at all.
Pls kindly help me.

admin Says:
September 24th, 2009 at 9:24 am

Hi Ei Chaw San,

If you download and run it directly it will not work, since for this ExtJS is needed. You can view the same in the preview and can proceed accordingly.

Ei Chaw San Says:
September 24th, 2009 at 5:42 pm

Thanks for you reply.
I will try it now.

Ei Chaw San Says:
September 24th, 2009 at 10:10 pm

hi…

I have downloaded Ext JS 2.3.0 SDK and put it under xampp/htodoc
I’m using Apache and php.
Then I write the html file and run it.
I cannot get it again.
Pls kindly help me for the right way.
I’m totally an Industrial Attachment Student.I would like to use your date-range picker.It is totally identical to what I need.

Your help is truly appreciated.