CODEWITHSUNDEEP
javascripthtmlangularjsdateinput
Riples
Riples

Reputation: 1157

HTML Input[Date] defaulting to mm/dd/yyyy despite locale settings

I am using a html date input in an ng-repeat scenario, and it seems to default to mm/dd/yyyy despite my computer regional settings being set to dd/mm/yyyy.

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
    <input class="form-control" type="date" ng-model="attendee.Dob"/>
</body>

Is there an easy way to re-format this? I can't seem to find anything that works, as everything suggests that the <input> element should use my local datepicker settings.

Sorry if I have missed something here.

Upvotes: 0

Views: 548

Answers (2)

Abdo-Host
Abdo-Host

Reputation: 4123

<script src="//unpkg.com/angular/angular.js"></script>
    <body ng-app>
        <!--
          ddmmyyyy
          dd/mm/yyyy
          mm/dd/yyyy
          dd-mm-yyyy
          mm-dd-yyyy
          Month dd, yyyy
        -->
         <input type="date" name="bday"  ng-model="attendee.Dob" required pattern="\d{4}-\d{2}-\d{2}">
         <br>
         <p> Date :  {{attendee.Dob | date:'MM/dd/yyyy'}}</p>
    </body>

Upvotes: 0

georgeawg
georgeawg

Reputation: 48968

From the Docs:

Date inputs sound convenient — they provide an easy interface for choosing dates, and they normalize the data format sent to the server regardless of the user's locale. However, there are currently issues with <input type="date"> because of its limited browser support.

Unsupporting browsers gracefully degrade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.

The second problem is the more serious one; with date input supported, the value is normalized to the format yyyy-mm-dd. But with a text input, the browser has no recognition of what format the date should be in, and there are many different formats in which people write dates.

At the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a JavaScript library such as jQuery date picker.

For more information, see

Upvotes: 1

Related Questions