When using the jQuery UI Datepicker and starting the week on a Sunday, the week numbers are incorrect. For example, 3rd Jan 2016 should be week 1 as all of the dates (3rd to 9th) are in the same year. But as you can see in the screenshot below, the UI shows it as week 53.
Here is the code to render the datepicker:
$("#datepicker" ).datepicker({
showWeek: true,
firstDay: 0
});
So nothing special, other than showing the week numbers and starting the week on Sunday instead of Monday (as per default).
Here is a fiddle of the issue: https://jsfiddle.net/vLqabmmz/
Due to the fact that this seems like a bug in jQuery UI. I'm posting the possible answer being the reporting of this as a bug to the jQuery UI team here: https://bugs.jqueryui.com/ticket/14907#ticket
i checked further and iso8601Week() method of jqueryUI is working fine, the problem is in its representation (the layout).
If you extract the value of the week you can see that the standard is followed and is fine. 3-rd is week 53 and after that 4 ... 7 (which is the first Thursday of the year and this is the week number 1). You can check with the code below.
$(function() {
$( "#datepicker" ).datepicker({
showWeek: true,
onSelect: function(dateText, inst) {
$(this).val("'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)));
}
});
});
As seen from documentation for calculateWeek here:
This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4.
So comments are right qualifying this as a bug. While this is not resolved yet, you can overcome this easily by setting firstDay to 1 like this:
$("#datepicker" ).datepicker({
showWeek: true,
firstDay: 1
});
Week number would be correct, it is easier than rewrite calculateWeek, only difference is that week will start on Monday instead on Sunday. Note that default behavior sets firstDay to 0.
Here is a display of the jQuery calendar for the first week of 2017 - fully contained in a new year.
Yet, the week number is shown as 52 of year 2016 (wtf).
To me it looks like a bug to be corrected, otherwise there is no reason to display the week number.
https://en.wikipedia.org/wiki/ISO_week_date:
The first week of a year is the week that contains the first Thursday of the year (and, hence, always contains 4 January).
You should update locale:
moment.updateLocale('en', {
week: {
dow: 1,
doy: 1
}
});
Related
Hi dear stackoverflow community people, need your help in a problem.
I am using rrule JavaScript lib to generate event dates for calendar. Below is the example condition for which I want event dates.
freq: Monthly
startDate: 1 Nov 22, 6AM
count: 10
weekdays: Mon, Tuesday, and Friday
now what other inputs/parameter should I give to rrule so that it generates dates only for 3rd week of the month? (Basically, I want event to occur in every specified week (first, second, third, fourth, last) of every month in the give date range or number of counts).
please tell me if and how is it possible through rrule only or if this can be achieved using any other way or other lib along with rrule.
Thank you in advance.
Please ask if have any question or need clarity.
Initially, I tried bysetpos but then realise that it gives nth number of the day I selected (for example bysetpos:1 and byweekday: Mon will give every first monday of the month)
This should return the last week of the year:
moment().year('2021').week(51).day('monday').format('YYYY-MM-DD');
But instead it is returning 2022-12-12. I think there is a bug in moment.js.
Here is codepen: https://jsfiddle.net/5402bkmp/
You should post your code here, not elsewhere.
var now = moment().year('2021').week(51).day('monday').format('YYYY-MM-DD');
console.log(now.toString());
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
Breaking down the code, if run on Monday 27 December:
moment()
Creates a moment object for 27 Dec 2021
.year('2021')
Sets the year to 2021, which changes nothing because it's already set to 2021. It also handles cases like 2020-02-29 + 1 year, which becomes 2021-02-28.
.week(51)
Sets to "localised" start of week 51. The problem is, how does the user know how moment.js localises things? For me it seems to be Sun 12 Dec 2021. That numbering seems to be based on the first week starting on the first Sunday on or before 1 Jan 2021 (i.e. Sun 27 Dec 2020), e.g. new Date(2020, 11, 27 + 50*7) gives 12 Dec 2021.
.day('monday')
Sets the date to Monday of the same localised week, again it's hard for users to know what their "localised" week is. For me, it just keeps it as Monday because it seems the localised week starts on Sunday (my PC is set to start weeks on Monday).
.format('YYYY-MM-DD')
So I think it's clear that a problem with using the week method is that neither the programmer nor user know what the result will be because they don't know what moment.js is using to localise things (possibly navigator.language). And results can be very different to what is expected.
One fix, as Sergiu suggested, is to use isoWeek so at least the result is consistent and predictable. ISO weeks start on Monday, with the first week being the one with the most days in the subject year. It's also expressed as the week of the first Thursday, or the week of 4 January, they all work to give the same Monday as the start of week 1 of any particular year. Some years have 52 weeks, some 53, and usually a couple of days near the end of the year are part the first week of the following year or last week of the previous year.
You might also like to see Get week of year in JavaScript like in PHP.
You need to use .isoWeek instead of .week (documented here, though it's unclear to me why).
That's works really good to me!
moment.locale("myLanguage", { week: { dow: 0 }});
momentExt.updateLocale("myLanguage", { week: { dow: 0 }});
Example here: https://jsfiddle.net/naqr7upL/
I have used moment.js to calculate 30 days limit in a form field where I have used daterangepicker.js to pick the date. I have disabled all previous date from current date and all dates after 30 days counting from current date. Everything was working fine until the "year" nation attacked(hehe git it?).
My date calculation was working fine using moment.js, but as the year is changing, everything breaks. Whenever I change the year to 2021 from 2020 every date becomes disabled. Like I want to post something today(22/12/2020) and want to set the deadline next year, to do that when I change the year every date becomes disable. Before changing the year I can see the dates of next year enabled and I can select it, it works fine like that. But whenever I change the year dates becomes disabled.
This is my current code to calculate date limit:
$('input[name="application_deadline"]').daterangepicker({
locale: {
format: 'DD-MM-YYYY HH:mm'
},
singleDatePicker: true,
showDropdowns: true,
startDate: moment(),
endDate: moment().subtract(-29, 'days'),
minDate: moment(),
maxDate: moment().subtract(-29, 'days')
});
My code technically works if I disable the line:
maxDate: moment().subtract(-29, 'days')
Then every date is enabled after the current date but removes the 30 days limit which I require to be working.
I have attached two screenshots of before and after changing year for the reference.
What you're describing sounds like a bug in daterangepicker.js. To reproduce, I've tested latest version from their website using jQuery 3.5.1.
Unfortunately I'm not able to reproduce what you're describing. Did you try updating to latest version 3.1?
I'm using this version of Bootstrap DatePicker: http://eternicode.github.io/bootstrap-datepicker/ (the range type), and i have uploaded my demo on JSFiddle on here: http://jsfiddle.net/qs5co179/6/
The relevant JavaScript:
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yyyy",
minViewMode : 1
});
I have set the parameter minViewMode : 1 so I can view only months on calendar instead of full days, the reason is that I want to strict the user to enter:
1st day of the month in: input name="start"
and strict them too to enter only the last day of the month in: input name="end" (but the default is always 1st day of the month when you click)
For example my data entry that i am looking for like below:
From: 01/07/2015 - To: 30/09/2015.. in this format (dd/mm/yyyy)
Now I can't find any parameter to set the calender to pick the last day of the month instead of always 1st day when you click on the month in "To:" field.
one more thing also that I want to always make "From:" and "To:" having 3months period and no less, I want always to make the range 3 months minimum for the entery.
Thanks a lot in advance...
You could attach an event handler to the changeDate event (doc), and change the date manually (i.e. add a month, substract a day).
For the date handling part, I would
Get the date parts
Increase the month by one, if its December, then change it to January
Create a new Date instance
date = date.setDate(date.getDate() - 1) to get the correct day
The date parts could be exctracted by simple string slicing:
var day = str.slice(0,2);
var month = str.slice(3,5);
var year = str.slice(6,10);
I'm trying to get the day name in javascript.
Every time I search for usage of the function getDay(), it is explained that this method returns the day of the week, for example: 0 is sunday, 1 is monday etc.
So the 1st janauary 2010 was a friday, can someone explain why i'm getting 1 instead of 5? The same for 2nd janauary 2010, i'm getting 2 instead of 5.
I've tried some ways to do that without success.
Here's my code :
theDay = new Date(2010,01,01);
alert(theDay.getDay());
Thank You !!!
The month in JS is zero-based, just like the day of the week.
Date(2010,01,01) is 1 February, 2010. January is month zero. Sure enough, 1 February 2010 was a Monday (I remember it well).
Try this:
var theDay = new Date(2010,00,01);
alert(theDay.getDay());
The month starts at 0, so what you're doing is trying to find Feb 1st, 2010 which is a Monday. This would be correct:
theDay = new Date(2010,0,01);
alert(theDay.getDay());