Advertisement

Learn Photoshop, Flash, Adobe AIR, ExtJS, jQuery, Ajax, Dojo, HTML, CSS, JavaScript, XML, Accessibility, Database, DWR, Gears, GWT, Java, JSON, MooTools, Office, Perl, PHP, Programming, Prototype, Scriptaculous and more, Want to explore your choice of videos from all over world at once place! then what are you waiting for, just click, explore and learn.
And if you are a sports person, enjoy videos of Sports - below are the latest sports videos which you have ever seen before.

Date Range using ExtJS Date Field and Advanced VType

Categories: Ext JS, Featured, JavaScript
Tags: ,
Written By: admin

Advertisement



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

Articles which you would like to read:

Advertisement



7 Responses to “Date Range using ExtJS Date Field and Advanced VType”

  1. itmoxodoelo Says:

    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.

  2. admin Says:

    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

  3. Ei Chaw San Says:

    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.

  4. admin Says:

    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

  5. Ei Chaw San Says:

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

  6. Ei Chaw San Says:

    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.

  7. Adriano BR Says:

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

Leave a Reply





Featured & Popular Articles

Online Sponsor