Date Range using ExtJS Date Field and Advanced VType

On 06.24.09, In Ext JS, Featured, JavaScript, by
Tags: ,
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...

admin

Visit Authors Website  |  All Articles From This Author

You Might Like:

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

itmoxodoelo
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.

admin
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

Ei Chaw San
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.

admin
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

Ei Chaw San
06.24.09

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

Ei Chaw San
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.

Adriano BR
06.24.09

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

screamdamage
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.

Sebastian
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?

Robert Eberhart
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!

Jens
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

Extjs date range using advanced vtype for datefield – HEKATON
06.24.09

[...] 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 [...]

madhu
06.24.09

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

admin
06.24.09

Hi Madhu, which CSS file you are looking for?

Leave Your Response