Date format in quarters in angularjs - javascript

I am working in angularjs app and I am parsing dates depending of what period are selected in dropdown, for example for "days" and using:
{{mydate| date:'MMM/dd/yy'}}
for months:
{{mydate| date:'MMM/yyyy'}}
I there any way to format dates like Q1/2016?
I need pass this date format to google chart with config variable too.
UPDATE
If I use 'Q/yyyy' for 10/01/2016 the results is 'T4/2016', why is added T to quarter number?
SOLUTION
'Q/yyyy' working fine, the problem is with my google chrome language setting, that is in spanish and T is for "Trimestre", quarter in spanish.

If you use momentjs (which I highly recommend).
moment(mydate).utc().quarter();

Related

Get date inside jquery datepicker with not-ISO date format

I'm using jQuery datepicker to set the limit in a time series made with Highcharts for a personal project.
My date format is dd/mm/yyyy.
Following code works for sure till some weeks ago
onSelect: function () {
var minTime = $('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime();
var maxTime = $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime();
}
But now I get following error:
"The specified value "03/02/2021" does not conform to the required format, "yyyy-MM-dd".
Searching I've understood that it depends on the fact that I'm using a format different from the ISO.
How I can fix this issue maintaining my date format?
Bonus question:
What could be changed from the last time that I've checked my site?
Thank you all

How do I make a Date Select component?

I'm trying to create a component that consists of a <select> that will contain options that are months and their values are their numerical dates (eg: Jan = 1, Feb = 2, etc.), and the day and year are controlled with regular number inputs. All of this will return a date format like `"9/26/2019"
So far I'm able to do that with selecting the month and returning something like "12", but I'm not sure how to handle the day and year.
I'm also using a library named luxon to get the current day using DateTime.local().toLocaleString() in hopes to have a default value passed in to these inputs, but I'm also not sure on how to achieve that.
so far, this is what I have:
https://codesandbox.io/s/gallant-shaw-qpc9r
My question is: is there a method to completely handle all of these at once and output a format like MM/dd/yyyy? Or should I stick to having 3 completely different inputs that will control each field? Or is there a way I could leverage Luxon to return the date format I need?

Kendo DateTimePicker Not Handling UTC Offset

We are using the Kendo datetimepicker, implemented using the AngularJS directives:
<input type="text" kendo-date-time-picker k-ng-model="TheDateModel">
Where: TheDateModel = 2016-02-15 20:58:24.0000000 +00:00
I am in the CST timezone, which is -6 hour offset from the GMT. The current result of the datetimepicker shows a time of 8:58 pm but my expected result is 2:58 pm.
What in the world am I doing wrong?
Disclaimer: I work for Kendo UI team
The Kendo UI Datepicker uses JavaScript Date object internally to hold the selected date value. As you probably know, it always uses the local (browser) timezone. We tried to explain that caveat in our docs too:
JavaScript Date Object - Basics
Due to this default behavior, the widget will use the already converted Date value (with the applied local timezone). The widget doesn't manipulate the value timezone, as it does not have sufficient information how to do that.
Solution
The best approach in this case is to convert the Date strings (like the one you mentioned "2016-02-15 20:58:24.0000000 +00:00") manually before feed the DatePicker widget. For instance, here is one possible approach to do that:
http://dojo.telerik.com/EyuRA
Notice how the value is parsed and then adjusted in the loadData method. Similar thing should be done by the developer that needs to handle different TZ in their app.
I've been down this road and had to implement this:
http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides
So I found the solution to my problem. First off for clarity, and sorry for the misinformation, but my date was coming down from the server as 2016-02-15T20:58:24.0000000+00:00 - add the T and remove all spaces.
All that needed to be done was to add the k-parse-formats attribute to the directive as follows:
<input type="text" kendo-date-time-picker k-parse-formats=['yyyy-MM-ddTHH:mm:sszzz'] k-ng-model="TheDateModel">
Boom, considers the offset and your current timezone, and correctly parses and displays the date and time. Just be aware, that when you specify your own parse formats, to include all possible formats that your dates could be.
For example, I then ran into a problem where I had milliseconds greater than 0 coming through on my dates: 2016-02-15T20:58:24.1234567+00:00. This broke the datetimepicker again. Simpler fix: just changed my parsing format to: yyyy-MM-ddTHH:mm:ss.fffffffzzz. Make sure the number of f is greater than or equal to the number of possible milliseconds.
<input type="text" kendo-date-time-picker k-parse-formats=['yyyy-MM-ddTHH:mm:ss.fffffffzzz'] k-ng-model="TheDateModel">

Comparing dates in Javascript

Imagine there are two labels on a webpage both displaying a date. How would you find out which is the greater date taking into account what the users locale is.
Say Label 1 : 04/11/2009 Label 2: 09/10/2009
If it were in the US Label 2 > Label 1
If it were the UK Label 1 > Label 2
The date constructor ignores locale information so var d = new Date('04/11/2009') will always be the 11th April 2009 rather than the 4th November 2009 no matter the locale. Does anyone know any tricks to get around this? Any libraries worth checking out?
(the only wayout i can see at the moment is get the locale info using js and then parse the label so i can create a date object with another constructor but this seems to much for a supposedly simple problem?Furthermore this is not going to work well with lots of locales)
Recommend using a library like Globalize.js or Date.js

Manipulating dates in Javascript without the Date object

It appears I can't use the javascript Date object as it inherintly defaults to US dates when you initialise with a datestring. There is no way of passing any culture information to the date object
I.e. No matter what the clients locale settings are
var d = new Date("08/10/2009") will always create a date object representing the 10th August 2009 rather than the 8th October 2009 if the clients locale was the UK.
So given that my requirement is to be able to add/subtract days/months/years easily is there a clever way of doing this easily without the Date object
All i need to do is add a day to a date (or a string representation of a date). so if my code detects the locale setttings are in the US, when it sees a string like "10/08/2009" it whacks it up to "10/09/2009" but if it had detected it was in the UK it would have know it a uk string representation of a date and whacked it up to "09/10/2009"
For date manipulation and localization on JavaScript I always recommend the DateJS library.
This library abstracts the use of Date objects, has a very good localization options, powerful date parsing and formatting, and it also has a very nice fluent API.
If you know you are getting input formatted dd/mm/yyyy you can easily assemble the correct date.
function britDay(D){
D= D.match(/\d+/g);
return new Date(+D[2], D[1]-1, +D[0]);
}
toLocaleDateString will return the date in the format expected by the user.
Relying on the user input that obeys particular formatting rules is optimistic-
which is why most sites use separate, labeled inputs or select fields for the month, date and year.
You probably know that it's easy to add one day to a date, just add 86,400 * 1000 milliseconds to the date. It sounds like displaying in your locale is the issue; does Date.toLocaleString() not do the right thing for you?
dojo.date.locale.parse will be able to parse a formatted string according the locale of your choice. It has a table of cultural data based off unicode.org/cldr. See this article for more information.

Categories