The usage of date function in Ext JS frame and the implementation of date selection control _extjs

Source: Internet
Author: User
Tags current time

The

Ext.date is a single example that encapsulates a series of date manipulation functions, extending the functionality of JavaScript date, and lists some of the common features listed below.
Basic functions:

    The
    • Ext.Date.add (date, interval, value) increases or decreases the time for date, which does not change the value of the original Date object, but instead returns a new Date object. The
    • Ext.Date.between (date, start, end) determines whether date is between start and end. The
    • Ext.Date.clearTime (date, clone) sets the date time to 00 hours, 00 minutes, 00 seconds, and 000 milliseconds. The
    • Ext.Date.clone (date) clones a copy of Date. The
    • Ext.Date.format (date, format) formats the date, returning the formatted string.
    • Ext.Date.getDayOfYear (date) Gets date is the day ordinal of the year.
    • Ext.Date.getDaysInMonth (date) Gets date is the day ordinal of the month.
    • Ext.Date.getFirstDateOfMonth (date) Gets the first day of the month in which the date is located.
    • Ext.Date.getFirstDayOfMonth (date) Gets the week of the first day of the month in which the date is located.
    • Ext.Date.getLastDateOfMonth (date) Gets the last day of the month in which the date is located.
    • Ext.Date.getLastDayOfMonth (date) Gets the week of the last day of the month in which the date is located.
    • Ext.Date.getWeekOfYear (date) Gets the week ordinal of the year in which the date is located. Whether the year in which the
    • Ext.Date.isLeapYear (date) date is a leap years. The
    • Ext.Date.now () returns the number of milliseconds from the current time to January 1, 1970. There are already date.now () implementations of the same functionality in Chrome, IE9, and Ie10. The
    • Ext.Date.parse (input, format, strict) has similar functionality depending on the date the string was created, Date.parse ().

Let's take a look at a few examples of this piecemeal:

Ext.Date.add (date, interval, value) Adds or reduces time to date, which does not change the value of the original Date object, but instead returns a new Date object. 
@param {Date} date original Date object. @param {String} interval value units, you can select Ext.Date.DAY, Ext.Date.HOUR, Ext.Date.MINUTE, Ext.Date.MONTH,//EXT. 
Date.second, Ext.Date.YEAR, Ext.Date.MILLI. 
@param {Number} Value Date object needs to be incremented. 
@return {Date} returns the Date object after the increment value. Example var date = Ext.Date.add (new date (' 10/29/2006 '), Ext.Date.DAY, 5); Increased by 5 days console.log (date); Return results Fri Nov 2006 00:00:00 gmt+0800 (China Standard Time) var date = Ext.Date.add (new date (' 10/29/2006 '), Ext.Date.DAY,-5); 
Decrease by 5 days if the value is negative. Console.log (date); Return results Tue Oct 2006 00:00:00 gmt+0800 (China Standard Time) var date = Ext.Date.add (new date (' 10/29/2006 '), Ext.Date.YEAR, 2); Increased by 2 years Console.log (date); 
Return results Wed The OCT 2008 00:00:00 gmt+0800 (China Standard Time)//Ext.Date.between (date, start, end) determines whether date is between start and ends. 
@param the date to be judged by the {date} date. @param {Date} start//@param {date} end//@return {BooleAn} returns False if date returns true between start and end. 
Example var date = new Date (' 10/29/2006 '); 
var start = new Date (' 10/5/2006 '); 
var end = new Date (' 11/15/2006 '); Ext.Date.between (Date, start, end); 
Returns True//Ext.Date.clearTime (date, clone) sets date time to 00 hours 00 minutes 00 seconds 000 milliseconds. @param {Date} date//@param {Bollean} clone optional argument. 
True returns a copy of date and, if False, returns the date itself, which defaults to false. 
@return {Date} returns the date set. 
Example var date = new Date (' 10/30/2012 14:30:00 '); Ext.Date.clearTime (Date); 
Returns a copy of the Tue Oct 00:00:00 gmt+0800 (China Standard Time)//Ext.Date.clone (date) Clone date. 
@param {Date} date//@return {date} returns the cloned date. 
Example var orig = new Date (' 10/30/2012 '); var copy = Ext.Date.clone (orig); 
Clones a value//Ext.Date.format (date, format) formats the date, returning the formatted string. 
@param {Date} date. 
@param {string} format date form, Y-year, M-month, D-Day, H-24 hours, I-minute, S/s @return {string} returns the formatted string. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.format (DATE, ' y-m-d h:i:s ');  2012-10-20 14:30:00 Ext.Date.format (date, ' Y-year m-month D-day h:i:s '); 
October 20, 2012 14:30:00//Ext.Date.getDayOfYear (date) Gets date is the day of the year//@param {date} date. 
@return {Number} returns a 0~364 of a value range of 365 if it is a leap year. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getDayOfYear (Date); 
Returns 293//Ext.Date.getDaysInMonth (date) Gets the day of the month//@param {date} date. 
@return {Number} to return days. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getDayOfYear (Date); 
returns to//Ext.Date.getFirstDateOfMonth (date) Gets the first day//@param {Date} date of the month in which the date is located. 
@return {Date} returns the first day of the month in which it is located. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getFirstDateOfMonth (Date); return Mon Oct 00:00:00 gmt+0800 (China Standard Time)//Ext.Date.getFirstDayOfMonth (date) Gets the week of the first day of the month in which the Date is located//@param {Da 
TE} date. 
@return {Number} returns the week of the first day of the month in which the value range 0~6. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getfirstdayofmonth (date); 
Returns 1, which means that Monday//Ext.Date.getLastDateOfMonth (date) Gets the last day//@param {Date} date of the month in which the date is located. 
@return {Date} returns the last day of the month in which it is located. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getLastDateOfMonth (Date); return Wed Oct 00:00:00 gmt+0800 (China Standard Time)//Ext.Date.getLastDayOfMonth (date) Gets the week of the last day of the month on which Date is in//@param {Da 
TE} date. 
@return {Number} returns the week of the last day of the month in which the value range 0~6. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getLastDayOfMonth (Date); 
Returns 3, which means Wednesday//Ext.Date.getWeekOfYear (date) Gets the first weeks//@param {Date} Date of the year in which the date is located. 
@return {Number} returns the week ordinal of the year in which the value range 1~53. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.getWeekOfYear (Date); 
Returns whether the year in which the Ext.Date.isLeapYear//(date) date is leap years//@param {date} date. 
@return {Boolean} True indicates a leap year, false indicates excepting. 
Example var date = new Date (' 10/20/2012 14:30:00 '); Ext.Date.isLeapYear (Date); return TRUE//EXT. 
Date.now () returns the number of milliseconds from the current time to January 1, 1970. 
There are already date.now () implementations of the same functionality in Chrome, IE9, and Ie10. 
@return {Number} returns milliseconds. Example var timestamp = Ext.Date.now (); 1351666679575 var date = new Date (timestamp); Wed Oct 14:57:59 gmt+0800 (China Standard Time)//Ext.Date.parse (input, format, strict) the Date.parse () has similar functionality based on the input string creation date 
。 
@param {string} input date string. 
@param {String} format date formatting. 
@param {Boolean} strict verifies the validity of the input string and defaults to False. 
@param {Date} returns the date created. 
Example var input = ' October 31, 2012 14:30:00 '; 
var format = ' Y year M month D-Day h:i:s '; var date = Ext.Date.parse (input, format, true); Wed Oct 14:30:00 gmt+0800 (China Standard Time)

Instance: Implementing a date selection control with week (week)
1. Question:

Whether the use of Ext JS can be a perfect solution to the problem of the week?

In the first article of this series, it is said that EXT DatePicker can not see the week, need to expand their own.

However, there is a problem with the extension:

The date object for the Javascript language starts every week from Sunday.

and Ext JS Getweekofyear This method is to follow ISO-8601, weekly is starting from Monday. (Other methods have not followed this standard, Ext JS mixed with different date time to express the standard).

Ext.Date.getWeekOfYear The return value of this method is the number between 1-53.

In this case, there will be some problems:

Ext JS Date Display control is displayed starting from Sunday: (s M t W t F s (Sunday Monday Tuesday ... Saturday))

However, the week was selected by the time it was chosen to start from Sunday. Lead:

Every Sunday week will be small 1 (for example 2013/08/18, Sunday, should be 34 weeks, but this method is counted as the end of the week, 33 weeks)
Date = new Date ("2013/08/18");
var week = Ext.Date.getWeekOfYear (Date);
Alert ("week=" +week);
EXT Js Date control is displayed by default for 42 days, so that there will be problems in the two-year interaction area
Is it showing 53 weeks? It's the first week of the next year.

2. Solution:

Combining the Date object of JS and the ext.date of Ext JS, the realization gets the week string.

Weekly with Sunday as the first day

The number of weeks per year from (1-52), if more than 52 weeks, counted to the first week of the next year. For example, 2013/12/29 is 2013 years of 53 weeks, the first week of 2014

Returns the format of a week such as "W1334"

* * Return as W1334 () 2013/08/20 * 1. If sunday==> week = week+1 * Getweekofyear (Ext use Iso-8601,week begin Monday) * JS Date (week begin Sunday) * 2. If week > 52==> year = year +1;
 Week = week-52; * 3.
 If month ==11 (month) and week <2 ==> year = year +1;
  */function Getweekstrofdate (date) {var weekstr = null;
    if (date!=null) {weekstr = "W";
    var dateyear = Date.getfullyear ();
    var Dateweek = Ext.Date.getWeekOfYear (Date);
    var firstdayofmonth = Ext.Date.getFirstDayOfMonth (Date);
    var day = Date.getdate ();
    var month = Date.getmonth ();
    Weekday 0-6 var weekday = Date.getday ();
    if (weekday===0) {dateweek++; }//week>52 ==> year +1 if (month==11) {if (dateweek>52) {dateyear =
        1;
      Dateweek-= 52;
      }else if (dateweek<2) {dateyear = 1;
    } var yearstr = dateyear.tostring ();
    Yearstr = yearstr.substring (2,4); Var Dateweekstr = Dateweek.tostring ();
    if (dateweekstr.length<2) {dateweekstr = "0" + dateweekstr;
    } weekstr + = Yearstr;   
  Weekstr + = Dateweekstr;
return weekstr;
 }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.