How modify the result default date format to this(dd-month-year) format in DatePicker control?



I am using datepicker control as a modal. By this i can able to get result date in default format. I want to display and store that in dd-mm-yy format.
In this case how shall i achieve?

My code,

//Modalview function

 createdpModelView(args) {
        let that = this;
        let currentDate = new Date();
        let options: ModalDialogOptions = {
            context: currentDate.toDateString(),
            fullscreen: false,
            viewContainerRef: this.viewContainerRef
        this.modalService.showModal(Datepicmodal, options)
            .then((dateresult: Date) => {
                console.log("date result " + dateresult);
//here i am facing issue//
                if (args === "issue") {
let datePicker =<DatePicker>("datePicker");
let selectedDate = new Date(datePicker.year, datePicker.month - 1,;
this.issuedateng = selectedDate;
console.log("selected date " + selectedDate);

else if (args === "expiry") {
                    this.expirydateng = dateresult;

Thanks in advance.


Depending on user locale you may want to display dates in a different format, some may be used to looking at dd / mm, and others at mm / dd. It is then best to display localized date.

Please refer to the JavaScript documentation on using toLocaleDataString on Date instances -

The following wiki article shows where the dd/mm/yy format is used -


Maybe this will help you:

Take into consideration “” is the date from the DatePicker

        var date =;
        var arr= new Array();
        arr= date .split(" ");

        var month= this.getMonthFromString(arr[1]);
        var fullDate = arr[3] + "-" + month+ "-" + arr[2];  //not sure if it is on  dd-mm-yy, i think it is on yy-mm-dd , just replace the arr[3] with arr[2].

    getMonthFromString(mon) {
        return new Date(Date.parse(mon + " 1, 2012")).getMonth() + 1


@Pete.K Its working fine. Now i got better idea on Javascript Date instances.


@PurpleRune This is what i want exactly. Now its working fine.


Based on the (dateresult: Date) you get back from the DatepickerModal.
You could do:

this.variableYouWantToSet = (('0' + dateresult.getDate()).slice(-2) + "-" + ('0' + (dateresult.getMonth() + 1)).slice(-2) + "-" + dateresult.getFullYear());

It should return you a date in “dd-mm-yyyy” format of type String.
I think this is a bit more cleaner without the need of extra functions?

If you only need it for display on screen (and using Angular).
Try pipes like {{yourDateVariable | date: 'dd-MM-yyyy'}} in your XML :slight_smile: