There are some requirements for date selection to see the week, that is, the day in the date is the week of the year, unfortunately Extjs does not provide such configuration, the following describes the ideal solution.
Preface
Both Ext JS 3 and Ext JS 4 have date-based components (of course, earlier versions ).
However, you need to select a date to see the day of the week, that is, the day of the year in the date.
Unfortunately, Ext js does not provide such configuration.
(For Ext js 4, the ideal method is to have a configuration item similar to showWeek in Ext. picker. Date)
Existing solutions
Go to the network and look at the solution based on Ext js: There are two
Http://enikao.net/extjs/weeknumber/weeknumber.html
And
Http://www.lubber.de/extjs/datepickerplus/
The first solution is to work on IE, which cannot be displayed in other browsers and is ignored directly.
The second solution supports Ext js 2 and Ext js 3, but does not support Ext js 4. Based on my personal experience in Ext js upgrade, I initially felt that there should be no problem in upgrading this extension to Ext js 4. After a long time, I gave up. After Ext js 3 is upgraded to Ext js 4, the display elements on the date page are also modified. The old version uses tr td, and some p and a elements are added to the new version. And the class name is changed. It seems that the upgrade resistance is high. You can only implement this extension by yourself.
Ext JS 4 Date control Extension
First paste the Code:
The Code is as follows:
/*********************************
* @ Author: oscar999
* @ Description: New Widgets Extend from Ext
* @ Verion: V1.0
**********************************/
/**
* Date Picker with Week
*/
Ext. define ('ext. ux. DatePickerWithWeek ',{
Extend: "Ext. picker. Date ",
Alias: "widget. datepickerwithweek ",
Width: 197,
NumWeeks: 6,
RenderTpl :[
'
',
'
',
'',
'
{% This. renderMonthBtn (values, out) %}
',
'',
'
',
'
',
'
',
'{#: This. isEndOfWeek }',
'{#: This. isBeginOfWeek }',
'
','
','
',
'Wk ',
' | ','
',
'{.: This. firstInitial} ',
' | ','','
','
','
',
'',
' | ','','
','
',
' ',
'
{% This. renderTodayBtn (values, out) %}
',
' ',
'
',
{
FirstInitial: function (value ){
// Alert (value );
Return Ext. picker. Date. prototype. getDayInitial (value );
},
IsBeginOfWeek: function (value ){
// Value --;
// Value --;
Var end = (value = 1 | (value-1) % 7 = 0 );
Return end? '':'';
},
IsEndOfWeek: function (value ){
Value --;
Var end = value % 7 ===0 & value! = 0;
Return end? '':'';
},
RenderTodayBtn: function (values, out ){
Ext. DomHelper. generateMarkup (values. $ comp. todayBtn. getRenderTree (), out );
},
RenderMonthBtn: function (values, out ){
Ext. DomHelper. generateMarkup (values. $ comp. monthBtn. getRenderTree (), out );
}
}
],
FullUpdate: function (date ){
This. callParent ([date]);
Var me = this;
Var weekNodes = me. weekNodes;
Var curWeekStart = Ext. Date. clearTime (new Date (date. getFullYear (), date. getMonth (), 1 ));
Var begMonWeek = Ext. Date. getWeekOfYear (curWeekStart );
Var firstDayOfMonth = Ext. Date. getFirstDayOfMonth (curWeekStart );
If (firstDayOfMonth = 0)
{
BegMonWeek + = 1;
}
For (j = 0; j {
WeekNodes [j]. innerHTML = begMonWeek. toString ();
BegMonWeek ++;
}
},
OnRender: function (container, position ){
Var me = this;
Me. callParent (arguments );
Me. cells = me. eventEl. select ('tbody td [role = "gridcell"] ');
Me. textNodes = me. eventEl. query ('tbody td [role = "gridcell"] ');
// Begin extend
Me. weekcells = me. eventEl. select ('tbody td [role = "weekcell"] ');
Me. weekNodes = me. eventEl. query ('tbody td [role = "weekcell"] ');
// End extend
Me. mon (me. eventEl ,{
Scope: me,
Mousewheel: me. handleMouseWheel,
Click :{
// Fn: me. handleDateClick,
Fn: function (){},
Delegate: 'A. '+ me. baseCls +'-date'
}
});
}
/*, InitComponent: function (){
This. callParent ();
}*/
});
/*
* Date Form field use Date Picker with Week
*/
Ext. define ('ext. ux. DateFieldWithWeek ',{
Extend: "Ext. form. field. Date ",
Alias: "widget. datefieldwithweek ",
/* InitComponent: function (){
This. callParent ();
},*/
CreatePicker: function (){
Var me = this
Format = Ext. String. format;
Return new Ext. ux. DatePickerWithWeek ({
PickerField: me,
OwnerCt: me. ownerCt,
RenderTo: document. body,
Floating: true,
Hidden: true,
FocusOnShow: true,
MinDate: me. minValue,
MaxDate: me. maxValue,
DisabledDatesRE: me. disabledDatesRE,
DisabledDatesText: me. disabledDatesText,
DisabledDays: me. disabledDays,
DisabledDaysText: me. disabledDaysText,
Format: me. format,
ShowToday: me. showToday,
StartDay: me. startDay,
MinText: format (me. minText, me. formatDate (me. minValue )),
MaxText: format (me. maxText, me. formatDate (me. maxValue )),
Listeners :{
Scope: me,
Select: me. onSelect
},
KeyNavConfig :{
Esc: function (){
Me. collapse ();
}
}
});
}
});
The principle is simple:
1. Rewrite renderTpl and add the columns displayed on the day of the week.
2. Rewrite fullUpdate and set the value of the week. Ext provides the getWeekOfYear method to obtain the week.
3. onRender. Note that fn: me. handleDateClick In the click operation must be an empty function. Otherwise, it will be executed twice when the date is selected.
