how to write mm/dd/yyyy date format for input field in javascript?

Question

I have to format a date in an input textbox in javascript or angular, and I am facing an issue in my code.

HTML:

<input  type="text" class="form-control" name="dateOfBirth" ng-model="dob" placeholder="Birthday(MM/DD/YYYY)" ng-required="true" ng-change="change()" maxlength="10" ng-maxlength="10" dob-format>

JS:

 vm.change = function (e) {
    if (vm.dob) {
        var dobLen = vm.dob.length;
        if (dobLen === 2 || dobLen === 5)
            vm.dob = vm.dob + "/";
    }
};

If I type "6"(month) instead of "06", it must automatically change to "06", here I am facing an issue where the forward slash will come when I type two letters and the backspace is not working. So anyone please help me.

Any help would be appreciated.

Answer 1

在更改事件中进行相应更改。

Regex_replace('0' + Replace([Starting Date], '/', '/0'), '0*(\d\d)/0*(\d\d)/0*(\d\d)', '20$3-$1-$2')

Answer 2

public static getDateForm_german(date: Date): string {
    let filter = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    };
    return date.toLocaleString('de-DE', filter);  
    // returns like 30.02.1999 for 1999-02-30
}

i know it is not the format you are looking for, and it is typescript. but i think you are looking for something like this.

Answer 3

Try like below:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
          app.controller('appCtrl', ['$scope', function($scope){
              vm=$scope;
               vm.change = function (e) {
    if (vm.dob) {
        var dobLen = vm.dob.length;
        if (dobLen === 2 || dobLen === 5)
            vm.dob = vm.dob + "/";
    }
};
          }]);
</script>

HTML:

<div ng-app="myApp" ng-controller="appCtrl">
        <input  type="text" class="form-control" name="dateOfBirth" ng-model="dob" placeholder="Birthday(MM/DD/YYYY)" ng-required="true" ng-change="change()" maxlength="10" ng-maxlength="10" dob-format>
     </div> 

This is working like charm for me.

Answer 4

A mixture of the pattern attribute and some onchange formatting can fix this:

 var inp = document.body.appendChild(document.createElement("input")); inp.pattern = "\\\\d\\\\d/\\\\d\\\\d/\\\\d\\\\d"; inp.placeholder = "YY/MM/DD"; inp.required = true; function formatDate(evt) { var val = inp .value .toString().split("/") .map(function(a) { if (a.length == 1) { return "0" + a; } return a; }) .join("/"); if (/\\d\\d\\/\\d\\d\\/\\d\\d/.test(val)) { inp.value = val; } } inp.onchange = formatDate;