如何更改 html 日期选择器的日期格式

Question

I am using AngularJs to create a form where I need to add a date picker which should show date in format of mm-dd-yyyy . But the default HTML5 date picker shows date in dd-mm-yyyy format. Is there any way to show date in mm-dd-yyyy format?

My code -

<div>
    <div class="col-md-6">
        <div  class="position-relative form-group">
            <label for="123" class="font-weight-bold">Date of Birth <span class="text-danger">*</span></label>
            <div id="dob" class="input-group date">
                <input type="date" class="form-control required" id="dob" ng-model="data.DOB" required />
            </div>
        </div>
    </div>
    <button ng-click="submit(data)">Submit</button>
</div>
 

$scope.submit = function(data) {
            console.log(data);
        }

How can I achieve this?

Answer 1

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

Check this for more details - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date