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">
Related
I'm using moment.js to format a datetime value as follows:
time = moment(this.params['timeValue']).format("HHmmss.SSS")
Here, this.params['timeValue'] is a string. An example value is 2020-02-05 10:00:00.123 . formatting using moment returns the value 100000.123. Sometimes my datetime value goes to microsecond value, but moment js seems to cut the formatted value to millisecond level. For example formatting 2020-02-05 10:00:00.123456 returns 100000.123. I've tried this, but it did not work:
time = moment(this.params['timeValue']).format("HHmmss.SSSSSS")
Could you help me how to handle the formatting of a datetime value with microseconds. If moment.js doesn't handle it, is there any other library I could use?
Moment.js wraps the native date type, which goes down to only milliseconds. You will only get the first three digits, the moment.js documentation shows an example of the fractional seconds (as per your second code snippet), but also mentions that it will only display the 3 significant digits, filling the rest with zeros.
Check out this SO question for more information about microseconds in 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();
I have a timestamp 2016-09-14T10:44:55.027Z and I would like to only display the 10:44:55 part but I'm not completely sure how. I have access to the moment library but not sure how to pass this into moment and format it, also how could I add AM or PM?
moment("2016-09-14T10:44:55.027Z").format('hh:mm:ss')
seems to output 11:44:55?
jsFiddle http://jsfiddle.net/eemfu0ym/
Since your input contains the Z suffix, that means the input value is in UTC. However, you're passing it into the default moment constructor, which is local time, thus a conversion occurs.
To keep it in UTC, the simplest way is to just obtain the moment object in UTC mode to begin with.
var m = moment.utc("2016-09-14T10:44:55.027Z")
Once you have that, you can format it however you like:
m.format('HH:mm:ss') // 24-hour clock time
m.format('hh:mm:ss A') // 12-hour time with meridiem (AM/PM)
See the moment formatting docs for other options. Do note that tokens are case sensitive.
I'm passing in milliseconds for the x-axis and then defining the x-axis as:
xAxis: {
type: 'datetime'
},
However, Highcharts seems to be not getting the exact date on the x-axis but is instead off by one day. To illustrate, hover over any of the bars (fiddle at the bottom of this post) and you will see what Highcharts interprets the day as but then click any of them and I have an on-click event to alert you what the actual date is supposed to be. Notice how it is off by one day.
Is this a known bug in Highcharts? Any workarounds?
Here is my fiddle: http://jsfiddle.net/hohenheim/j8cTE/33/
I believe all you need to do is format/consider for UTC. Highcharts default is UTC (0). (http://api.highcharts.com/highcharts#global) if you change to this:
function appendAds(date1) {
alert(new Date(date1).toUTCString());
$('#tableTitle').html("<u>Info for " + timeConverter(date1) + ":</u>");
...
}
(fiddle) http://jsfiddle.net/j8cTE/34/
You will see that it shows correct date with that "toUTCString()" added. You will likely want to convert it to something more pleasant to read, but remember that you will have to keep UTC in mind if you don't use "toUTCString()".
UPDATE:
I wanted to explain that I used "toUTCString()" since it was quick and something I knew off the top of my head. This method wouldn't work for all things, such as further down in your appendAds function since it is a string. To explain UTC and date formatting, parsing and manipulation in full would be too much for this post. But I will try to go over a few key points when dealing with dates on the web. Also, please see MDN for other date info (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date).
If you need accurate information and/or logic for dates, you will need to know the date format you get (from server, database, etc...) - whether it is UTC or not, for example. Then you need to consider if it needs to be manipulated for display (such as for the viewers browser's timezone). And finally, if that date is being used internally, you need to consider if, when, and where you need to convert it once again (as appropriate).
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.