Avatar of error77
error77
 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


(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 );

Open in new window

JavaScriptAJAX

Avatar of undefined
Last Comment
error77

8/22/2022 - Mon
Jerry Miller

And you changed the daysOfWeek and daysOfWeekShort arrays as below?

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.
daysOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday'],
daysOfWeekShort: [ 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa','Su']


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);
				}
			}

Open in new window

error77

ASKER
Hi jmiller1979,

Could you explain what I need to change, I'm not sure what I need to do.

Thanks

Jerry Miller

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']

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
error77

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?


Zyloch

Would you be able to provide a complete example page using this plugin so that I can test changes?
Vampireofdarkness

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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
sriggumma

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
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
		daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],

Open in new window


2. Change the number 1 to 0 in function _getFirstDay, as below
 
_getFirstDay: function(date) {
		return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
	},

Open in new window



Hope this helps.
ASKER CERTIFIED SOLUTION
sriggumma

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.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
error77

ASKER
Perfect! Thanks very much!