Skip to main content

Search and Top Navigation

#5255 closed feature (wontfix)

Opened March 02, 2010 12:03PM UTC

Closed April 03, 2013 03:27PM UTC

dateFormat/altFormat accept week number and year (iso 8601)

Reported by: houba Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.datepicker Version: 1.7.2
Keywords: haspatch Cc:
Blocked by: Blocking:
Description

I add to poorly hack the jquery datepicker plugin to get the week number (dateFormat) and the year (altFormat) from it.

The hack is bold and doesn't fit (i'm not js coder).

I did two functions that just c/p iso8601Week in formatDate:

getWeek (1to1 copy of iso8601Week) that return the week number

var getWeek = function(date) {
	var checkDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
	var firstMon = new Date(checkDate.getFullYear(), 1 - 1, 4); // First week always contains 4 Jan
	var firstDay = firstMon.getDay() || 7; // Day of week: Mon = 1, ..., Sun = 7
	firstMon.setDate(firstMon.getDate() + 1 - firstDay); // Preceding Monday
	if (firstDay < 4 && checkDate < firstMon) { // Adjust first three days in year if necessary
		checkDate.setDate(checkDate.getDate() - 3); // Generate for previous year
		return $.datepicker.iso8601Week(checkDate);
	} else if (checkDate > new Date(checkDate.getFullYear(), 12 - 1, 28)) { // Check last three days in year
		firstDay = new Date(checkDate.getFullYear() + 1, 1 - 1, 4).getDay() || 7;
		if (firstDay > 4 && (checkDate.getDay() || 7) < firstDay - 3) { // Adjust if necessary
			return 1;
		}
	}
	return Math.floor(((checkDate - firstMon) / 86400000) / 7) + 1; // Weeks to given date
};

and getWeekYear that return the correct year iso8601

		var getWeekYear = function(date) {
			var checkDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
			var firstMon = new Date(checkDate.getFullYear(), 1 - 1, 4); // First week always contains 4 Jan
			var firstDay = firstMon.getDay() || 7; // Day of week: Mon = 1, ..., Sun = 7
			firstMon.setDate(firstMon.getDate() + 1 - firstDay); // Preceding Monday
			if (firstDay < 4 && checkDate < firstMon) { // Adjust first three days in year if necessary
				checkDate.setDate(checkDate.getDate() - 3); // Generate for previous year
				return checkDate.getFullYear();
			} else if (checkDate > new Date(checkDate.getFullYear(), 12 - 1, 28)) { // Check last three days in year
				firstDay = new Date(checkDate.getFullYear() + 1, 1 - 1, 4).getDay() || 7;
				if (firstDay > 4 && (checkDate.getDay() || 7) < firstDay - 3) { // Adjust if necessary
					return checkDate.getFullYear() +1;
				}
			}
		return checkDate.getFullYear(); // Weeks to given date
		};

and another one that c/p formatNumber to get the zero fill on week number

		var fillMe = function(value, len) {
			var num = '' + value;
			while (num.length < len)
				num = '0' + num;
			return num;
		};

then I added two cases for the switch(format.charAt(iFormat))

						case 'w':
							output += getWeekYear(date);
							break;
						case 'W':
							output += fillMe( getWeek(date), 2 );
							break;

and here the call to the datepicker plugins

$("#week").datepicker({
	firstDay: 1,
	dateFormat: 'W',
	constrainInput: false, //hack did broke out this
	altField: '#year',
	altFormat: 'w'
	});

finally the html form

<input id="year" name="year" type="text" value="" />
<input id="week" name="week" type="text" value="" />

I had to do this fastly, it work for my need for now, but hoping that the dateFormat/altFormat could accept week number and year in iso8601 to be formatted.

the user stories :

user have to choose a year and a week to get in that week his data.

I can easily imagine row/<tr> highlight and the week number shown (little push on another request ;))

regards,

houba

Attachments (0)
Change History (7)

Changed March 25, 2010 10:28PM UTC by kbwood comment:1

resolution: → wontfix
status: newclosed

This won't work for the datepicker, which is for picking dates! On opening, the datepicker parses the attached field to determine the date to show. It cannot determine this from just a week number. You would be better off attaching the datepicker to a hidden input and setting the year/week in response to onSelect. Similarly, in beforeShow you could set the date based on the year/week settings. BTW, you don't need to rewrite the ISO 8601 week calculation - it is accessible at $.datepicker.iso8601Week().

Changed April 07, 2010 03:11PM UTC by houba comment:2

I think my wrote was bad (or I didn't understood your reply)

Users have to pick a date to get a week number + it's year FROM the date they picked, so as datePicker output (and not the date itself)

1- user pick a date from datePicker

2- datePicker calculate from that date the week number and the year

3- datePicker push the result in the user field (dateFormat and altFormat)

4- user send the week + year to the form processing.

So the feature is to accept week and year to be output'd from the plugins.

Anyway, I won't bother more.

Changed June 22, 2010 04:27AM UTC by lucashv comment:3

resolution: wontfix
status: closedreopened

I would agree with houba. I have the exactly same issue.

I need my date field to display the year+weeknumber in the format: yyyy-Wwn where W is a literal and wn is the week number following the ISO8601 specifications (Date with week number: 2010-W25-2. see: http://en.wikipedia.org/wiki/ISO_8601). I took a look in the formatDate function to try to find a way to display the week number in the list of literals options that is going to be replaced by its date component but there has no such option. So I think that what houba was looking for is that if you could add an literal to represent the week number so we can use the formatDate function like this to display the week number:

$(function() {

$("input.datepicker").datepicker({ showWeek: true, firstDay: 1, dateFormat: 'yy-ww' });

});

Note the pattern 'yy-ww' in the dateFormat function where the ww would represent the week number.

I think that it would be a great enhancement for the datepicker to have this option with a minimal effort to implement it.

Regards

Changed September 28, 2010 12:52PM UTC by polybas comment:4

I solved this problem like this:

jQuery UI Datepicker 1.8.2

Рarameters of datepicker plugin:

$(document).ready(function(){
  $('#datepicker').datepicker({
    dateFormat: 'W',
    showWeek: true,
    changeMonth: true,
  });
 });

And added after switch(a.charAt(j)){

case 'W':l+=g("W",this.iso8601Week(new Date(b.getFullYear(), b.getMonth(), b.getDate())),2);break;

Changed October 11, 2012 09:04PM UTC by scottgonzalez comment:5

milestone: TBD1.11.0

Changed October 19, 2012 09:39PM UTC by mikesherov comment:6

keywords: iso 8601, week numberhaspatch
status: reopenedopen

Changed April 03, 2013 03:27PM UTC by scottgonzalez comment:7

resolution: → wontfix
status: openclosed

I'm not sure how this got reopened, but as kbwood said, datepicker is for picking a date, not a week.