GWT-Ext Date-Picker widget – Change the start of week

The GWT-Ext Date-Picker widget (the Calendar widget that allows for selection of a date) by default shows the starting day of a week as Sunday.  Moreover, there is no API provided to change it to any other day.  E.g. in one of the financial applications that I was recently working on,  users wanted that the start of week as Monday as they transact business from Monday thru Friday.

However, there is a very simple way to fix this problem. As GWT-Ext uses Ext components internally, we just need to modify the ext-all.js to set the start day as Monday (or any other day).  The only drawback of this solution is that it will change the start of week for all instances of the Date-Picker widget used in the application.

Follow these steps to change the start of week:

1. Open ext-all.js in any text-editor (e.g. WordPad). This file would be present in the public/js/ext folder of your project as shown in the screenshot below:

Ext-all.js file location in a GWT project
Ext-all.js file location in a GWT project

2.  Within the file search for the text “Ext.DatePicker“. This line contains all the default properties for the Date-Picker widget.  The properties are comma-separated.

3. Keep scrolling to the right till you find the property “startDay“. If you have never modified the file before, it should have the value set as “0” (zero). The assignment would look like this:

startDay:0

The days of a week are defined using the following integers: Sunday – 0, Monday -1, Tuesday-2,…,Saturday-6.

4. Set the value of startDay to your desired value. E.g. in my case, I wanted the week to start from Monday, so I set it to 1.

5. Save the changes and redeploy the updated JS file on your Web Server.

6. Restart the application.

You will now find that the start-day has changed to whatever day you had set in the ext-all.js file.

Advertisements
This entry was posted in GWT-Ext and tagged , , , . Bookmark the permalink.

One Response to GWT-Ext Date-Picker widget – Change the start of week

  1. Daniel says:

    Thx!

    startDay <- Helped me…

    Found it useful 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s