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


#1

Hi,

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 = this.page.getViewById<DatePicker>("datePicker");
let selectedDate = new Date(datePicker.year, datePicker.month - 1, datePicker.day);
this.issuedateng = selectedDate;
console.log("selected date " + selectedDate);
                } 
-----------------------------------------------------------------------------

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

Thanks in advance.


#2

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 -
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.

The following wiki article shows where the dd/mm/yy format is used - https://en.wikipedia.org/wiki/Date_format_by_country


#3

Maybe this will help you:

Take into consideration “this.date” is the date from the DatePicker

        var date = this.date.toString();
        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
    }


#4

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


#5

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


#6

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: