Book Image

Ext JS 3.0 Cookbook

Book Image

Ext JS 3.0 Cookbook

Overview of this book

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer. Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead. It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving themóour cookbook provides expert information for people working with Ext JS.
Table of Contents (15 chapters)
Ext JS 3.0 Cookbook
Credits
About the Author
About the Reviewer
Preface

Formatting, parsing, and manipulating dates


Another area where the dynamic nature of JavaScript creates challenges is dates manipulation. This recipe covers formatting, conversion, and range checking for dates.

How to do it...

You can format, convert, and range check dates as show in the following steps:

  1. 1. Add the date patterns you will use to format dates in your code:

    Date.patterns = {
    ISO8601Long: "Y-m-d H:i:s",
    ISO8601Short: "Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
    };
    
  2. 2. Create a sample Date object:

    var now = new Date();
    
    
  3. 3. Format the date using the patterns:

    var ISO8601Long = now.format(Date.patterns.ISO8601Long);
    //ISO8601Long is similar to 2009-03-05 14:01:45
    var ISO8601Short = now.format(Date.patterns.ISO8601Short);
    //ISO8601Long is similar to 2009-03-05
    var ShortDate = now.format(Date.patterns.ShortDate);
    //ISO8601Long is similar to 3/5/2009
    var LongDate = now.format(Date.patterns.LongDate);
    //ISO8601Long is similar to Thursday, March 05, 2009
    var FullDateTime = now.format(Date.patterns.FullDateTime);
    //ISO8601Long is similar to Thursday, March 05, 2009 2:01:45 PM
    var MonthDay = now.format(Date.patterns.MonthDay);
    //ISO8601Long is similar to March 05
    var ShortTime = now.format(Date.patterns.ShortTime);
    //ISO8601Long is similar to 2:01 PM
    var LongTime = now.format(Date.patterns.LongTime);
    //ISO8601Long is similar to 2:01:45 PM
    var SortableDateTime = now.format(Date.patterns.SortableDateTime);
    //ISO8601Long is similar to 2009-03-05T14:01:45
    var UniversalSortableDateTime = now.format(Date.patterns.UniversalSortableDateTime);
    //ISO8601Long is similar to 2009-03-05 14:01:45-0500
    var YearMonth = now.format(Date.patterns.YearMonth);
    //ISO8601Long is similar to March, 2009
    
  4. 4. Create a variable to hold your parsed date:

    var aDate = new Date();
    
  5. 5. Convert a string to a date:

    aDate = Date.parseDate("March, 2009", Date.patterns.YearMonth);
    //aDate = Thu Mar 5 00:00:00 EST 2009
    aDate = Date.parseDate("2:01:45 PM", Date.patterns.LongTime);
    //aDate = Thu Mar 5 14:01:45 EST 2009
    aDate = Date.parseDate("2009-03-05", Date.patterns.ISO8601Short);
    //aDate = Thu Mar 5 00:00:00 EST 2009
    
  6. 6. For range checking, create range limits:

    var low = Date.parseDate("July, 2008", Date.patterns.YearMonth);
    var high = Date.parseDate("July, 2009", Date.patterns.YearMonth);
    
  7. 7. Check whether your date is in the range:

    var now = new Date();
    var inRange = now.between(low, high);
    // inRange is true
    

How it works...

Ext JS enhances the JavaScript Date object with the Ext.Date class, which provides a number of properties and functions that simplify your work with dates.

Regarding date formats, although there isn't a central repository of format patterns in Ext JS, the Ext JS API documentation provides the ones used in the previous example. In order for these formats to become available on the Date object, they should be copied into any script that is included after Date.js.

There's more...

Besides the functions in the examples above, Ext.Date allows you to do things such as:

  • Getting the numeric representation of the year

  • Getting the number of days in the current month

  • Determining the number of milliseconds between two dates

  • Getting the date of the first day of the month in which a date resides

  • Getting the first day of the current month

  • Getting the offset from GMT of the current date

  • Getting the date of the last day of the month in which a date resides

  • Getting the last day of the current month

  • Getting the month number for the given short/full month name

  • Getting the short day name for a given day number

  • Getting the short month name for a given month number

  • Determining if a date is in a leap year