Opened 10 years ago

Closed 7 years ago

#5255 closed feature (wontfix)

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

Change History (7)

comment:1 Changed 10 years ago by kbwood

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

comment:2 Changed 10 years ago by houba

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.

comment:3 Changed 9 years ago by lucashv

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

comment:4 Changed 9 years ago by polybas

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;

comment:5 Changed 7 years ago by Scott González

Milestone: TBD1.11.0

comment:6 Changed 7 years ago by mikesherov

Keywords: haspatch added; iso 8601 week number removed
Status: reopenedopen

comment:7 Changed 7 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.