 asked on
Modify Javascript Plugin Code (Start Week)
Hi all,
I need to modify a plugin so that the week starts on Monday instead of on Sunday (as it is)
Can someone help here please?
I tried changing the below code but it's not enough as the dates are 1 day wrong when I do so.
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
Here is the full source code (unchanged) attached below.
THanks
I need to modify a plugin so that the week starts on Monday instead of on Sunday (as it is)
Can someone help here please?
I tried changing the below code but it's not enough as the dates are 1 day wrong when I do so.
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
Here is the full source code (unchanged) attached below.
THanks
(function($, undefined ) {
$.widget( "mobile.datebox", $.mobile.widget, {
options: {
theme: 'c',
pickPageTheme: 'b',
pickPageInputTheme: 'e',
pickPageButtonTheme: 'a',
pickPageHighButtonTheme: 'e',
noAnimation: false,
disabled: false,
zindex: '500',
setDateButtonLabel: 'Set date',
setTimeButtonLabel: 'Set time',
titleDateDialogLabel: 'Set Date',
titleTimeDialogLabel: 'Set Time',
titleDialogLabel: false,
meridiemLetters: ['AM', 'PM'],
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthsOfYear: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novemeber', 'December'],
timeFormat: 24,
mode: 'datebox',
calShowDays: true,
calShowOnlyMonth: false,
useDialogForceTrue: false,
useDialogForceFalse: false,
useDialog: false,
useModal: false,
noButtonFocusMode: false,
fieldsOrder: ['m', 'd', 'y'],
headerFormat: 'ddd, mmm dd, YYYY',
dateFormat: 'YYYY-MM-DD',
minuteStep: 1,
defaultDate: false,
minYear: false,
maxYear: false,
},
_dstAdjust: function(date) {
if (!date) { return null; }
date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
return date;
},
_getFirstDay: function(date) {
return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
},
_getLastDate: function(date) {
return 32 - this._dstAdjust(new Date(date.getFullYear(), date.getMonth(), 32)).getDate();
},
_getLastDateBefore: function(date) {
return 32 - this._dstAdjust(new Date(date.getFullYear(), date.getMonth()-1, 32)).getDate();
},
_formatHeader: function(date) {
var header = this.options.headerFormat,
padMonth = (( date.getMonth() < 9 ) ? "0" : "") + ( date.getMonth() + 1 ),
padDay = (( date.getDate() < 10 ) ? "0" : "") + date.getDate();
header = header.replace('YYYY', date.getFullYear());
header = header.replace('mmm', this.options.monthsOfYear[date.getMonth()] );
header = header.replace('MM', padMonth);
header = header.replace('mm', date.getMonth() + 1);
header = header.replace('ddd', this.options.daysOfWeek[date.getDay()] );
header = header.replace('DD', padDay);
header = header.replace('dd', date.getDate());
return header;
},
_formatDate: function(date) {
var dateStr = this.options.dateFormat,
padMonth = (( date.getMonth() < 9 ) ? "0" : "") + ( date.getMonth() + 1 ),
padDay = (( date.getDate() < 10 ) ? "0" : "") + date.getDate();
dateStr = dateStr.replace('YYYY', date.getFullYear());
dateStr = dateStr.replace('MM', padMonth);
dateStr = dateStr.replace('mm', (date.getMonth() + 1));
dateStr = dateStr.replace('DD', padDay);
dateStr = dateStr.replace('dd', date.getDate());
return dateStr;
},
_formatTime: function(date) {
var hours = 0,
meri = '',
padMin = (( date.getMinutes() < 9 ) ? "0" : "") + ( date.getMinutes() );
console.log(date);
if ( this.options.timeFormat == 12 ) {
if ( date.getHours() > 11 ) {
meri = 1;
if ( date.getHours() < 22 ) {
hours = '0' + ( date.getHours() - 12 );
} else {
hours = '' + ( date.getHours() - 12 );
}
} else {
meri = 0;
if ( date.getHours() > 9 ) {
hours = '' + date.getHours();
} else {
if ( date.getHours() == 0 ) {
hours = '' + 12;
} else {
hours = '0' + date.getHours();
}
}
}
if ( date.getHours() == 12 ) { meri = 1; hours = '12'; }
return hours + ":" + padMin + ' ' + this.options.meridiemLetters[meri];
} else {
return (( date.getHours() < 9 ) ? "0" : "") + date.getHours() + ":" + padMin;
}
},
_makeDate: function (str) {
str = str.trim();
var o = this.options,
self = this,
seperator = o.dateFormat.replace(/[myd ]/gi, "").substr(0,1),
parts = o.dateFormat.split(seperator),
data = str.split(seperator),
date = new Date();
if ( o.mode == 'timebox' ) {
if ( str == '' ) { // EMPTY FIELD
return date;
}
if ( o.timeFormat == 12 ) {
var timeRegex = /^([012]?[0-9]):([0-5][0-9])\s*(am?|pm?)?$/i,
match = timeRegex.exec(str);
if(match === null) { //use current time if no match
return date;
}
if(match[1] <= 12 && match[3] && match[3].toLowerCase().charAt(0) == 'p') { //ignore pm if hour >12
match[1] = parseInt(match[1],10) + 12;
}
if(match[1] == 12 && match[3] && match[3].toLowerCase().charAt(0) == 'a') { //12am is the 0 hour
match[1] = 0;
}
} else {
var timeRegex = /^([012]?[0-9]):([0-5][0-9])$/i,
match = timeRegex.exec(str);
if(match === null) { //use current time if no match
return date;
}
}
if(match[1] > 24) { //use current time if hour out of range
return date;
}
date.setMinutes(match[2]);
date.setHours(match[1]);
return date;
} else {
if ( parts.length != data.length ) { // Unrecognized string in input
if ( o.defaultDate !== false ) {
date = new Date(o.defaultDate);
if ( ! date.getDate() ) {
return new Date();
} else {
return date;
}
} else {
return new Date();
}
} else { // Good string in input
for ( i=0; i<3; i++ ) {
if ( parts[i].match(/d/i) ) { d_day = data[i]; }
if ( parts[i].match(/m/i) ) { d_mon = data[i]; }
if ( parts[i].match(/y/i) ) { d_yar = data[i]; }
}
date = new Date(d_yar, d_mon-1, d_day);
if ( ! date.getDate() ) {
return new Date();
} else {
return date;
}
}
}
},
_update: function() {
var self = this,
o = self.options;
if ( o.mode == 'timebox' ) {
self.pickerMins.val(self.theDate.getMinutes());
if ( o.timeFormat == 12 ) {
if ( self.theDate.getHours() > 11 ) {
self.pickerMeri.val(o.meridiemLetters[1]);
if ( self.theDate.getHours() == 12 ) {
self.pickerHour.val(12);
} else {
self.pickerHour.val(self.theDate.getHours() - 12);
}
} else {
self.pickerMeri.val(o.meridiemLetters[0]);
if ( self.theDate.getHours() == 0 ) {
self.pickerHour.val(12);
} else {
self.pickerHour.val(self.theDate.getHours());
}
}
} else {
self.pickerHour.val(self.theDate.getHours());
}
}
if ( o.mode == 'datebox' ) {
self.pickerHeader.html( self._formatHeader(self.theDate) );
self.pickerMon.val(self.theDate.getMonth() + 1);
self.pickerDay.val(self.theDate.getDate());
self.pickerYar.val(self.theDate.getFullYear());
}
if ( o.mode == 'calbox' ) { // Meat and potatos - make the calendar grid.
self.pickerDate.text(
o.monthsOfYear[self.theDate.getMonth()] + " "
+ self.theDate.getFullYear()
);
self.pickerGrid.html('');
var start = self._getFirstDay(self.theDate),
end = self._getLastDate(self.theDate),
lastend = self._getLastDateBefore(self.theDate),
today = -1,
thisDate = new Date(),
presetDate = self._makeDate(self.input.val()),
highlightDay = -1,
presetDay = -1;
prevtoday = lastend - (start - 1);
nexttoday = 1;
if ( thisDate.getMonth() === self.theDate.getMonth() && thisDate.getFullYear() === self.theDate.getFullYear() ) { highlightDay = thisDate.getDate(); }
if ( presetDate.getMonth() === self.theDate.getMonth() && presetDate.getFullYear() === self.theDate.getFullYear() ) { presetDay = presetDate.getDate(); }
if ( o.calShowDays ) {
var weekDays = $("<div>", {'class':'ui-datebox-gridrow'}).appendTo(self.pickerGrid);
for ( i = 0; i<=6;i++ ) {
$("<div>"+o.daysOfWeekShort[i]+"</div>").addClass('ui-datebox-griddate ui-datebox-griddate-empty ui-datebox-griddate-label').appendTo(weekDays);
}
}
for ( i=0;i<=5;i++ ) {
if ( i === 0 || ( i > 0 && (today > 0 && today <= end) ) ) {
var thisRow = $("<div>", {'class': 'ui-datebox-gridrow'}).appendTo(self.pickerGrid);
for ( j=0;j<=6;j++) {
if ( j === start && i === 0 ) { today = 1; }
if ( today > end ) { today = -1; }
if ( today < 1 ) {
if ( o.calShowOnlyMonth ) {
$("<div>", {'class': 'ui-datebox-griddate ui-datebox-griddate-empty'}).appendTo(thisRow);
} else {
if ( i === 0 ) {
$("<div>"+prevtoday+"</div>")
.addClass('ui-datebox-griddate ui-datebox-griddate-empty').appendTo(thisRow)
.attr('data-date', prevtoday)
.click(function(e) {
e.preventDefault();
self.theDate.setMonth(self.theDate.getMonth() - 1);
self.theDate.setDate($(this).attr('data-date'));
self.input.val(self._formatDate(self.theDate));
self.close();
self.input.trigger('change');
});
prevtoday++;
} else {
$("<div>"+nexttoday+"</div>")
.addClass('ui-datebox-griddate ui-datebox-griddate-empty').appendTo(thisRow)
.attr('data-date', nexttoday)
.click(function(e) {
e.preventDefault();
self.theDate.setMonth(self.theDate.getMonth() + 1);
self.theDate.setDate($(this).attr('data-date'));
self.input.val(self._formatDate(self.theDate));
self.close();
self.input.trigger('change');
});
nexttoday++;
}
}
} else {
var thisTheme = o.pickPageButtonTheme;
if ( ( today === highlightDay || today === presetDay ) ) { thisTheme = o.pickPageHighButtonTheme; }
$("<div>"+today+"</div>")
.addClass('ui-datebox-griddate ui-corner-all ui-btn-up-'+thisTheme)
.attr('data-date', today)
.appendTo(thisRow)
.click(function(e) {
e.preventDefault();
self.theDate.setDate($(this).attr('data-date'));
self.input.val(self._formatDate(self.theDate));
self.close();
self.input.trigger('change');
}).hover(
function() { $(this).addClass('ui-btn-down-'+thisTheme).removeClass('ui-btn-up-'+thisTheme); },
function() { $(this).addClass('ui-btn-up-'+thisTheme).removeClass('ui-btn-down-'+thisTheme); }
);
today++;
}
}
}
}
}
},
_isInt: function (s) {
return (s.toString().search(/^[0-9]+$/) === 0);
},
open: function() {
this.input.trigger('change').blur();
var self = this,
o = this.options,
inputOffset = self.focusedEl.offset(),
pickWinHeight = self.pickerContent.outerHeight(),
pickWinWidth = self.pickerContent.innerWidth(),
pickWinTop = inputOffset.top + ( self.focusedEl.outerHeight() / 2 )- ( pickWinHeight / 2),
pickWinLeft = inputOffset.left + ( self.focusedEl.outerWidth() / 2) - ( pickWinWidth / 2);
windowWidth = $(document).width();
if ( (pickWinHeight + pickWinTop) > $(document).height() ) {
pickWinTop = $(document).height() - (pickWinHeight + 2);
}
if ( pickWinTop < 45 ) { // Fix for popup ending up under header
pickWinTop = 45;
}
if ( ( windowWidth > 400 && !o.useDialogForceTrue ) || o.useDialogForceFalse ) {
self.options.useDialog = false;
if ( o.useModal ) {
self.screen.fadeIn('slow');
} else {
self.screen.removeClass('ui-datebox-hidden');
}
self.pickerContent.addClass('ui-overlay-shadow in').css({'position': 'absolute', 'top': pickWinTop, 'left': pickWinLeft}).removeClass('ui-datebox-hidden');
} else {
self.options.useDialog = true;
self.pickPageContent.append(self.pickerContent);
self.pickerContent.css({'top': 'auto', 'left': 'auto', 'marginLeft': 'auto', 'marginRight': 'auto'}).removeClass('ui-overlay-shadow ui-datebox-hidden');
$.mobile.changePage(self.pickPage, 'pop', false, true);
}
},
close: function() {
var self = this;
if ( self.options.useDialog ) {
$(self.pickPage).dialog('close');
//$.mobile.changePage([self.pickPage,self.thisPage], 'pop', true, false);
self.pickerContent.addClass('ui-datebox-hidden').removeAttr('style').css('zIndex', self.options.zindex);
self.thisPage.append(self.pickerContent);
} else {
if ( self.options.useModal ) {
self.screen.fadeOut('slow');
} else {
self.screen.addClass('ui-datebox-hidden');
}
self.pickerContent.addClass('ui-datebox-hidden').removeAttr('style').css('zIndex', self.options.zindex).removeClass('in');
}
self.focusedEl.removeClass('ui-focus');
},
_create: function(){
var self = this,
o = $.extend(this.options, this.element.data('options')),
input = this.element,
focusedEl = input.wrap('<div class="ui-input-datebox ui-shadow-inset ui-corner-all ui-body-'+ o.theme +'"></div>').parent(),
theDate = new Date();
$('label[for='+input.attr('id')+']').addClass('ui-input-text').css('verticalAlign', 'middle');
input.removeClass('ui-corner-all ui-shadow-inset');
var openbutton = $('<a href="#" class="ui-input-clear" title="date picker">date picker</a>')
.click(function (e) {
e.preventDefault();
if ( !o.disabled ) {
self.open();
}
})
.appendTo(focusedEl).buttonMarkup({icon: 'grid', iconpos: 'notext', corners:true, shadow:true})
.css({'vertical-align': 'middle', 'float': 'right'});
if ( o.noButtonFocusMode ) { openbutton.hide(); }
focusedEl.parent().tap(function() {
if ( !o.disabled ) {
focusedEl.addClass('ui-focus');
}
//input.focus();
if ( !o.disabled && o.noButtonFocusMode ) { self.open(); }
});
input
.focus(function(){
if ( ! o.disabled ) {
focusedEl.addClass('ui-focus');
if ( o.noButtonFocusMode ) { focusedEl.addClass('ui-focus'); self.open(); }
}
input.removeClass('ui-focus');
})
.blur(function(){
focusedEl.removeClass('ui-focus');
input.removeClass('ui-focus');
})
.change(function() {
self.theDate = self._makeDate(self.input.val());
self._update();
});
var dialogTitle = this.options.titleDialogLabel;
if ( dialogTitle === false ) {
if ( this.options.mode == 'timebox' ) {
var dialogTitle = this.options.titleTimeDialogLabel;
} else {
var dialogTitle = this.options.titleDateDialogLabel;
}
}
var thisPage = input.closest('.ui-page'),
pickPage = $("<div data-role='dialog' class='ui-dialog-datebox' data-theme='" + o.pickPageTheme + "' >" +
"<div data-role='header' data-backbtn='false' data-theme='a'>" +
"<div class='ui-title'>" + dialogTitle + "</div>"+
"</div>"+
"<div data-role='content'></div>"+
"</div>")
.appendTo( $.mobile.pageContainer )
.page().css('minHeight', '0px').css('zIndex', o.zindex).addClass('pop'),
pickPageContent = pickPage.find( ".ui-content" ),
pickPageClose = pickPage.find( ".ui-header a").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
self.close();
});
$.extend(self, {
pickPage: pickPage,
thisPage: thisPage,
pickPageClose: pickPageClose,
pickPageContent: pickPageContent,
input: input,
theDate: theDate,
focusedEl: focusedEl
});
self._buildPage();
if ( input.is(':disabled') ) {
self.disable();
}
},
_incrementField: function(event, fieldOrder) {
if (this.options.mode == 'timebox' ) {
if ( fieldOrder == 0 ) { this.theDate.setHours(this.theDate.getHours() + 1); }
if ( fieldOrder == 1 ) {
var newMin = this.theDate.getMinutes();
var rem = newMin % this.options.minuteStep;
if(rem == 0) {
newMin = newMin + this.options.minuteStep;
} else {
newMin = newMin + (this.options.minuteStep-rem);
}
this.theDate.setMinutes(newMin);
}
if ( fieldOrder == 2 ) {
if ( this.options.timeFormat == 12 ) {
if ( this.pickerMeri.val() == this.options.meridiemLetters[0] ) {
this.pickerMeri.val(this.options.meridiemLetters[1]);
this.theDate.setHours(this.theDate.getHours() + 12);
} else {
this.pickerMeri.val(this.options.meridiemLetters[0]);
this.theDate.setHours(this.theDate.getHours() - 12);
}
}
}
} else {
if (this.options.fieldsOrder[fieldOrder] == 'y') {
if ( this.options.maxYear !== false ) {
if ( this.theDate.getFullYear() + 1 <= this.options.maxYear ) {
this.theDate.setYear(this.theDate.getFullYear() + 1);
}
} else {
this.theDate.setYear(this.theDate.getFullYear() + 1);
}
}
if (this.options.fieldsOrder[fieldOrder] == 'm') { this.theDate.setMonth(this.theDate.getMonth() + 1); }
if (this.options.fieldsOrder[fieldOrder] == 'd') { this.theDate.setDate(this.theDate.getDate() + 1); }
}
this._update();
},
_decrementField: function(event, fieldOrder) {
if (this.options.mode == 'timebox' ) {
if ( fieldOrder == 0 ) { this.theDate.setHours(this.theDate.getHours() - 1); }
if ( fieldOrder == 1 ) {
var newMin = this.theDate.getMinutes();
var rem = newMin % this.options.minuteStep;
if(rem == 0) {
newMin = newMin - this.options.minuteStep;
} else {
newMin = newMin - rem;
}
this.theDate.setMinutes(newMin);
}
} else {
if (this.options.fieldsOrder[fieldOrder] == 'y') {
if ( this.options.minYear !== false ) {
if ( this.theDate.getFullYear() - 1 >= this.options.minYear ) {
this.theDate.setYear(this.theDate.getFullYear() - 1);
}
} else {
this.theDate.setYear(this.theDate.getFullYear() - 1);
}
}
if (this.options.fieldsOrder[fieldOrder] == 'm') { this.theDate.setMonth(this.theDate.getMonth() - 1); }
if (this.options.fieldsOrder[fieldOrder] == 'd') { this.theDate.setDate(this.theDate.getDate() - 1); }
}
this._update();
},
_buildPage: function () {
var self = this,
o = self.options,
pickerContent = $("<div>", { "class": 'ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-'+o.pickPageTheme} ).css('zIndex', o.zindex);
if ( o.noAnimation ) {
pickerContent.removeClass('pop');
}
if ( o.mode == 'timebox' ) {
var pickerPlus = $("<div>", { "class":'ui-datebox-controls' }).appendTo(pickerContent),
pickerInput = $("<div>", { "class":'ui-datebox-controls' }).appendTo(pickerContent),
pickerMinus = $("<div>", { "class":'ui-datebox-controls' }).appendTo(pickerContent),
pickerSet = $("<div>", { "class":'ui-datebox-controls'}).appendTo(pickerContent),
pickerHour = $("<input type='text' />")
.keyup(function() {
if ( $(this).val() !== '' && self._isInt($(this).val()) ) {
newHour = parseInt($(this).val(),10);
if ( newHour == 12 ) {
if ( o.timeFormat == 12 && pickerMeri.val() == o.meridiemLetters[0] ) { newHour = 0; }
}
self.theDate.setHours(newHour);
self._update();
}
}).addClass('ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-'+o.pickPageInputTheme),
pickerMins = $("<input type='text' />")
.keyup(function() {
if ( $(this).val() !== '' && self._isInt($(this).val()) ) {
self.theDate.setMinutes(parseInt($(this).val(),10));
self._update();
}
}).addClass('ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-'+o.pickPageInputTheme),
pickerMeri = $("<input type='text' />")
.keyup(function() {
if ( $(this).val() !== '' ) {
self._update();
}
}).addClass('ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-'+o.pickPageInputTheme);
pickerHour.appendTo(pickerInput);
pickerMins.appendTo(pickerInput);
if ( o.timeFormat == 12 ) { pickerMeri.appendTo(pickerInput); }
$("<a href='#'>" + o.setTimeButtonLabel + "</a>")
.appendTo(pickerSet).buttonMarkup({theme: o.pickPageTheme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self.input.val(self._formatTime(self.theDate));
self.close();
self.input.trigger('change');
});
$("<div><a href='#'></a></div>")
.appendTo(pickerPlus).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'plus', iconpos: 'bottom', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self._incrementField(e, 0);
})
.clone(false).appendTo(pickerPlus)
.click(function(e) {
e.preventDefault();
self._incrementField(e, 1);
});
$("<div><a href='#'></a></div>")
.appendTo(pickerMinus).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'minus', iconpos: 'top', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self._decrementField(e, 0);
})
.clone(false).appendTo(pickerMinus)
.click(function(e) {
e.preventDefault();
self._decrementField(e, 1);
});
if ( o.timeFormat == 12 ) {
$("<div><a href='#'></a></div>")
.appendTo(pickerPlus).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'plus', iconpos: 'bottom', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self._incrementField(e, 2);
});
$("<div><a href='#'></a></div>")
.appendTo(pickerMinus).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'minus', iconpos: 'top', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self._incrementField(e, 2);
});
}
$.extend(self, {
pickerHeader: pickerHeader,
pickerHour: pickerHour,
pickerMins: pickerMins,
pickerMeri: pickerMeri,
});
pickerContent.appendTo(self.thisPage);
}
if ( o.mode == 'datebox' ) {
var pickerHeader = $("<div class='ui-datebox-header'><h4>Unitialized</h4></div>").appendTo(pickerContent).find("h4"),
pickerPlus = $("<div>", { "class":'ui-datebox-controls' }).appendTo(pickerContent),
pickerInput = $("<div>", { "class":'ui-datebox-controls' }).appendTo(pickerContent),
pickerMinus = $("<div>", { "class":'ui-datebox-controls' }).appendTo(pickerContent),
pickerSet = $("<div>", { "class":'ui-datebox-controls'}).appendTo(pickerContent),
pickerMon = $("<input type='text' />")
.keyup(function() {
if ( $(this).val() !== '' && self._isInt($(this).val()) ) {
self.theDate.setMonth(parseInt($(this).val(),10)-1);
self._update();
}
}).addClass('ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-'+o.pickPageInputTheme),
pickerDay = $("<input type='text' />")
.keyup(function() {
if ( $(this).val() !== '' && self._isInt($(this).val()) ) {
self.theDate.setDate(parseInt($(this).val(),10));
self._update();
}
}).addClass('ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-'+o.pickPageInputTheme),
pickerYar = $("<input type='text' />")
.keyup(function() {
if ( $(this).val() !== '' && self._isInt($(this).val()) ) {
self.theDate.setYear(parseInt($(this).val(),10));
self._update();
}
}).addClass('ui-input-text ui-corner-all ui-shadow-inset ui-datebox-input ui-body-'+o.pickPageInputTheme);
for(i=0; i<=2; i++) {
if (self.options.fieldsOrder[i] == 'y') { pickerYar.appendTo(pickerInput); }
if (self.options.fieldsOrder[i] == 'm') { pickerMon.appendTo(pickerInput); }
if (self.options.fieldsOrder[i] == 'd') { pickerDay.appendTo(pickerInput); }
}
$("<a href='#'>" + o.setDateButtonLabel + "</a>")
.appendTo(pickerSet).buttonMarkup({theme: o.pickPageTheme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self.input.val(self._formatDate(self.theDate));
self.close();
self.input.trigger('change');
});
$("<div><a href='#'></a></div>")
.appendTo(pickerPlus).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'plus', iconpos: 'bottom', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self._incrementField(e, 0);
})
.clone(false).appendTo(pickerPlus)
.click(function(e) {
e.preventDefault();
self._incrementField(e, 1);
})
.clone(false).appendTo(pickerPlus)
.click(function(e) {
e.preventDefault();
self._incrementField(e, 2);
});
$("<div><a href='#'></a></div>")
.appendTo(pickerMinus).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'minus', iconpos: 'top', corners:true, shadow:true})
.click(function(e) {
e.preventDefault();
self._decrementField(e, 0);
})
.clone(false).appendTo(pickerMinus)
.click(function(e) {
e.preventDefault();
self._decrementField(e, 1);
})
.clone(false).appendTo(pickerMinus)
.click(function(e) {
e.preventDefault();
self._decrementField(e, 2);
});
$.extend(self, {
pickerHeader: pickerHeader,
pickerDay: pickerDay,
pickerMon: pickerMon,
pickerYar: pickerYar,
});
pickerContent.appendTo(self.thisPage);
}
if ( o.mode == 'calbox' ) {
var pickerHeader = $("<div>", {"class": 'ui-datebox-gridheader'}).appendTo(pickerContent);
pickerGrid = $("<div>", {"class": 'ui-datebox-grid'}).appendTo(pickerContent);
pickerNextMon = $("<div class='ui-datebox-gridminus'><a href='#'>Prev Month</a></div>")
.appendTo(pickerHeader).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'minus', inline: true, iconpos: 'notext', corners:true, shadow:true})
.click( function(e) {
e.preventDefault();
self.theDate.setMonth(self.theDate.getMonth() - 1);
self._update();
}),
pickerLastMon = $("<div class='ui-datebox-gridplus'><a href='#'>Next Month</a></div>")
.appendTo(pickerHeader).buttonMarkup({theme: o.pickPageButtonTheme, icon: 'plus', inline: true, iconpos: 'notext', corners:true, shadow:true})
.click( function(e) {
e.preventDefault();
self.theDate.setMonth(self.theDate.getMonth() + 1);
self._update();
}),
pickerDate = $("<div class='ui-datebox-gridlabel'><h4>Uninitialized</h4></div>").appendTo(pickerHeader).find('h4'),
$.extend(self, {
pickerDate: pickerDate,
pickerGrid: pickerGrid
});
pickerContent.appendTo(self.thisPage);
}
var screen = $("<div>", {'class':'ui-datebox-screen ui-datebox-hidden'})
.css({'z-index': o.zindex-1})
.appendTo(self.thisPage)
.bind("click", function(event){
self.close();
event.preventDefault();
});
if ( o.useModal ) {
screen.addClass('ui-datebox-screen-modal');
}
$.extend(self, {
pickerContent: pickerContent,
screen: screen
});
},
disable: function(){
this.element.attr("disabled",true);
this.element.parent().addClass("ui-disabled");
this.options.disabled = true;
this.element.blur();
},
enable: function(){
this.element.attr("disabled", false);
this.element.parent().removeClass("ui-disabled");
this.options.disabled = false;
}
});
$( ".ui-page" ).live( "pagecreate", function() {
$( 'input[data-role="datebox"]', this ).each(function() {
$(this).datebox();
});
/* Next is for compat with old CalendarBox */
$( 'input[data-role="calendarbox"]', this ).each(function() {
$(this).datebox({'mode': 'calbox'});
});
});
})( jQuery );
JavaScriptAJAX
Last Comment
error77
ASKER
Hi jmiller1979,
Could you explain what I need to change, I'm not sure what I need to do.
Thanks
Could you explain what I need to change, I'm not sure what I need to do.
Thanks
Did you change the arrays so they read as below?
daysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday'],
daysOfWeekShort: [ 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa','Su']
ASKER
Yes I have. Only issue is that the date does not correspond with the week day.
For example: Today is Saturday 14th  ... On the calendar it's now Sunday 14th ...
Know what I mean?
For example: Today is Saturday 14th  ... On the calendar it's now Sunday 14th ...
Know what I mean?
Would you be able to provide a complete example page using this plugin so that I can test changes?
You cannot just change the values in the array. You would need to edit lines 254 to 313 of jquery.mobile.datebox.js to change the order in which dates show as the author has not included a customisable option for doing so.
If you change in following two places - it would work as you expected.
1. Change the values in arrays to start with Monday, as below
2. Change the number 1 to 0 in function _getFirstDay, as below
Â
Hope this helps.
1. Change the values in arrays to start with Monday, as below
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
2. Change the number 1 to 0 in function _getFirstDay, as below
Â
_getFirstDay: function(date) {
return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
},
Hope this helps.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Perfect! Thanks very much!
The calShowDays appears to always be true so that if statement should execute each time. The array is read from 0 to 6, so Monday should be 0 if you want it to display first.
Open in new window