Home > Web Front-end > JS Tutorial > body text

Ext JS 4 implements date selection control with week (Practical Combat 2)_extjs

WBOY
Release: 2016-05-16 17:24:59
Original
1098 people have browsed it
Foreword

Date and time in JavaScript
Ext JS 4 implements date selection control with week (Practice 1)

If you need to know more about some preparatory knowledge of this article, you can refer to the above two articles.
Javascript provides Date object for processing time. But Date does not provide a method to get the day of the week.
If you want to get the week of the year for a certain time through js on the web side, you can implement it according to some algorithms. Of course, jquery's extension components directly provide such ready-made packages.
Like Ext js, there is a method to get the week, Ext.Date.getWeekOfYear(date).

Question

Whether Ext JS is used, it will be perfect What about solving the problem of the week?
As mentioned in the first article of this series, Ext’s datepicker cannot see the day of the week and needs to be expanded by yourself.
However, there is a problem when expanding:
The Date object in Javascript language starts every week on Sunday.
The getWeekOfYear method of Ext JS follows ISO-8601, and each week starts on Monday. (Other methods do not follow this standard, and Ext JS mixes different date and time representation standards).
Ext.Date.getWeekOfYear The return value of this method is a number between 1-53.
In this case, some problems will arise:
The date display control of Ext js starts from Sunday: (S M T W T F S (Sunday, Monday, Tuesday...Saturday))
However, the date display control is obtained through the selected time The week starts on Sunday again. Result:

1. The week of each Sunday will be smaller by 1 (for example, 2013/08/18, Sunday, should be 34 weeks, but through this method it is counted as the end of the previous week, 33 weeks)
Copy code The code is as follows:

date = new Date("2013/08/18") ;
var week = Ext.Date.getWeekOfYear(date);
alert("week=" week);

2. The Ext Js date control displays 42 days by default, like this If so, there will be a problem where the two years interact.

Is the current year showing 53 weeks? It’s still the first week of next year.

Solution

Combine the Date object of js and Ext.Date of Ext js to obtain the day of the week string.
1. Sunday is the first day of the week
2. The number of weeks in a year is from (1-52), if it exceeds 52 weeks, it is counted to the first week of the next year. For example, 2013/12/29 is the 53rd week of 2013, counting to the first week of 2014
3. Return "W1334" such a week format
Copy the code The code is as follows:

/*
* 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(12 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;
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!