1

i want to get system date format using Angular js. User may have selected it as dd/mm/YYYY, dd/mm/yy ... and so on it can be any date format which is selected by user on his/her computer. Is it possible to get the date format?

--EDIT--

I don't have the value of date like 10/12/2016, 10-Dec-2016... and so on this date value also i need to pick from user's system with same format as user have selected.

Arpit Kumar
  • 2,179
  • 5
  • 28
  • 53
  • AFAIK, browser doesn't provide information about it – Zen Oct 12 '16 at 11:52
  • I have some resource [here](https://docs.angularjs.org/guide/i18n) but i am not clear how to use it. Thanks. – Arpit Kumar Oct 12 '16 at 11:54
  • http://stackoverflow.com/questions/673905/best-way-to-determine-users-locale-within-browser might be helpful. – Zen Oct 12 '16 at 11:57
  • This feels like an XY question. http://xyproblem.info/. You want to do something unknown (X), and believe that getting the system date format (Y) will solve your problem. You are asking about Y, but it's not clear why you need to solve Y in the first place, since Y isn't really a common solution to any problem. – Claies Oct 12 '16 at 12:40
  • what does "pick from user's system" mean? You seem to be confused. If you present a `date` picker in HTML, your JavaScript will read this as a `Date` object, which is not locale specific. (the number of milliseconds since January 1, 1970, 00:00:00). You can work with this on the client or the server, and it will always output correctly. Again, I ask, what is your **actual problem** you are trying to solve? – Claies Oct 12 '16 at 12:50
  • But in this date picker i need to set a certain date format, This date format i want to set as user's system date format. This is the actual requirement. – Arpit Kumar Oct 12 '16 at 12:52
  • Why do you care what the user has their system set to? This continues to not make sense, it isn't something that is required to know from a calculations perspective or any common business scenario. – Claies Oct 12 '16 at 12:53
  • you don't have control over what the browser presents to the user, and don't need to have this control, by design. This is an integral feature of how the `date` control in HTML operates, that the browser is able to correctly present the correct value no matter where in the world the source of the date was set. – Claies Oct 12 '16 at 12:56
  • It is business requirement, the project i am working on can be applied across the globe in any of country and date format in each country will be different, and this requirement is user specific means in the same country two diffreent user can have different date format in their system. That's way i need it – Arpit Kumar Oct 12 '16 at 12:58
  • Again, **you don't need to be concerned with this!!**. The HTML Date control **ALREADY DOES THIS FOR YOU**. – Claies Oct 12 '16 at 13:00
  • have you written code and tested it and determined that it doesn't output the way you expect? If so, then posting that code, demonstrating your problem, will be more helpful to you (and others) than the question you have now, which seems to be asking how to solve a problem that doesn't exist in the first place. – Claies Oct 12 '16 at 13:03
  • You can't reliably detect system settings for date formats. Far better to use an unambiguous date format, which is a simple as using month name rather than number, e.g. "January 21 2016" and "21 January 2016" are unambiguous regardless of the user's preferred format, as is the ISO 8601 format: 2016-01-21. – RobG Oct 12 '16 at 23:02

3 Answers3

0

I think that you can't find out his/her computer date format with only Javascript. If you are using some dynamic language on backend, you should try to retrieve time format that way.

alxbxbx
  • 313
  • 1
  • 5
  • 18
  • Correct advice, but not an answer. :-( – RobG Oct 12 '16 at 22:59
  • Can you tell me what language you are using on backend? Because depends mainly on language, so i could help you. – alxbxbx Oct 13 '16 at 12:32
  • Also i just remembered something when I've worked on some project. I've used HTML5 in AngularJS and if I remember well, HTML5 did format my date input just like it was on my system. So don't bother with that, every user will have different view of date. Try to change your date and time format on your system, then run your application again and see what happens. – alxbxbx Oct 13 '16 at 12:38
0

I think you can check Mozilla MDN, but I believe JS can't get you this info, because JS is dependent on browser API. So, if a browser API provides that then it's fine otherwise use any framework like .Net or Java etc.

0

Not a full-proof solution but can but use as a reference and you can add support for new formats.

Logic

  • Create a date object for a specific date that will exist for every year. Like: 31/12/2016
  • Now search first non alphanumeric character. This is your delimiter.
  • Now that you have 3 parts, you can find dd easily by comparing value to 31.
  • Even year part is easy, since it can have 2 values, 16 or 2016.
  • Month can be tricky. It can have 12 or Dec or December. For that you can have 2 checks. If number and equal to 12, it mm. If not number and length is 3, its mmm else mmmm

Now you can create var d = new Date('2016/12/31') and pass d.toLocaleDateString() to below function.

function getDateFormat(dateStr) {
  var delimiter = dateStr.match(/[^0-9a-z]/i)[0];
  var dateParts = dateStr.split(delimiter);
  var r = dateParts.map(function(d, i) {
    if (d == 31) {
      return "dd"
    } else if (!isNaN(d) && (d == 2016 || (d + 2000) == 2016)) {
      return d.toString().length === 4 ? "YYYY" : "yy"
    } else if (d == 12) {
      return "mm"
    } else if (isNaN(d)) {
      var _t = d.replace(/[^a-z]/gi, '')
      return _t.length === 3 ? "mmm" : "mmmm"
    }
  });
  return r.join(delimiter);
}

Date.prototype.getSystemDateFormat = function(){
  return getDateFormat(new Date('2016/12/31').toLocaleDateString());
}
//or
Date.prototype.SYSTEM_FORMAT = (function(){
  return getDateFormat(new Date('2016/12/31').toLocaleDateString());
})()

console.log(new Date().getSystemDateFormat())
console.log(new Date().SYSTEM_FORMAT)

var d1 = "12/31/2016"
console.log(getDateFormat(d1))

d1 = "31/12/2016"
console.log(getDateFormat(d1))

d1 = "31 December 2016"
console.log(getDateFormat(d1))

d1 = "31 Dec. 2016"
console.log(getDateFormat(d1))

d1 = "31-12-2016"
console.log(getDateFormat(d1))

d1 = "31.12.2016"
console.log(getDateFormat(d1))

You can also add functions to date.prototype to get value directly instead of calling it every time,

Date.prototype.getSystemDateFormat = function(){
  return getDateFormat(new Date('2016/12/31').toLocaleDateString());
}
//or
Date.prototype.SYSTEM_FORMAT = (function(){
  return getDateFormat(new Date('2016/12/31').toLocaleDateString());
})()

Edit 1

As correctly pointed out by @RobG, date.toLocaleString or date.toLocaleDateString are not uniform across all browsers. They are not supported by < IE11. So this is not a reliable answer. You can use it for reference though.

Community
  • 1
  • 1
Rajesh
  • 24,354
  • 5
  • 48
  • 79
  • it is helpful but my challenge is that i don't even have the value of d1, d2, d3... then what should be done? – Arpit Kumar Oct 12 '16 at 12:26
  • Sorry. I added that part later. You have to create a dummy date `var d = new Date('2016/12/31')` and then `getDateFormat(d.toLocaledateString())` This should give you necessary value – Rajesh Oct 12 '16 at 12:28
  • Is there any way to get this dummy date from user's system? instead of typing manually. – Arpit Kumar Oct 12 '16 at 12:33
  • I wish but I don't know of. As other answers have already specified, there is no API for JS to get it by default. Though I have added prototype functions which may reduce load. – Rajesh Oct 12 '16 at 12:38
  • Dude, you do not have to set it to any HTML element. This is a part of initialisation. You can hard-code some values, as your code depends on its output. – Rajesh Oct 12 '16 at 12:47
  • Sorry it is date value not input date value. i edited my question once again just now. – Arpit Kumar Oct 12 '16 at 12:49
  • This method is extremely unreliable. *toLocaleDateString* is entirely implementation dependent, and on at least half the browsers I've tested the systems settings for date format are ignored. – RobG Oct 12 '16 at 23:00
  • @RobG my apologies. I was not aware about that. I'd still keep my answer as a reference for other. Thanks for pointing out. :-) – Rajesh Oct 13 '16 at 05:48
  • @RobG I was just trying to test it on `IE7 & IE8` on browserStack and was expecting to throw error but it returns `Thursday, October 13, 2016`. Can MDN docs be incorrect? – Rajesh Oct 13 '16 at 10:24
  • @Rajesh—incorrect about what? MDN is a public wiki, anyone can contribute and yes it can be wrong. However, "2016/12/31" is not a string format specified as being supported by the standard so parsing is entirely implementation dependant. The value of *toLocaleString* is [**specified**](http://ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocalestring) as being implementation dependent and certainly does differ between say Safari and Firefox. – RobG Oct 13 '16 at 22:52