Date Range using ExtJS Date Field and Advanced VType

Post Pic

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 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:

1
2
3
4
5
6
7
8
9
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<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>

Date Range Using ExtJS Date Field and Advanced VType

Below is the working example for the same:

Preview – Date Range using ExtJS Date Field

Download:

Download – Date Range using ExtJS Date Field

Related Entries...

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

14 Responses

06.24.09

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.

06.24.09

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

06.24.09

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.

06.24.09

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.

Thanks,
Vivek

06.24.09

Thanks for you reply.
I will try it now. :)

06.24.09

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.

06.24.09

Excelent! This article helped me so much! Thank you!

06.24.09

changed:
var start = field.ownerCt.getForm().findField(field.startDateField);
//var start = Ext.getCmp(field.startDateField);

and
var end = field.ownerCt.getForm().findField(field.endDateField);
//var end = Ext.getCmp(field.endDateField);

For not to set ids only the name because I use many instances. And setting the ids create conflicts between them.

06.24.09

Hi!
Cool thing, this new vtype. Learned something again.
But I don’t get this:
Why isn’t there an inf loop?
Validator starts, detects a start-Field, sets new Range in end field and validates end field. Then an end-field is detected, ne range is set and start field is being validated …

Did I miss something?

06.24.09

Thanks for the article; provided some help on a form that I was creating where I had a series of ranges for which I needed validation.

One item of note, though. My form has a Reset button wherein the values of the form are reset to their original state using something like:

entryForm.getForm().reset();

If you use this validation technique, you will need to manually reset the min values of the end fields and the max values of the start fields. There isn’t a discrete method to do so (at least I didn’t see one in the api), so I had to do something like this:

Ext.getCmp(‘nameOfStartField’).setMaxValue(null);

Thanks again for the post!

06.24.09

Thanks for that code. I also used the code from screamdamage to use the fields without ids. Just a little note: Instead of field.ownerCt it could also be field.ownerCt.ownerCt or field.ownerCt.ownerCt.ownerCt and so on – depending on your form. So i had to write a little recursive function to retrieve the form.

Thanks again for the example!
Jens

[…] I found an article at Developer Snippets where they propose a solution using vtype, well it is the same but here I have modified that the […]

06.24.09

Nice article. can I have the examples.css file please.
pls send me to this email address- madhuw2011@gmail.com
Thank you so much

06.24.09

Hi Madhu, which CSS file you are looking for?

Leave Your Response

* Name, Email, Comment are Required