CODEWITHSUNDEEP
javascriptdatedatepickersapui5date-formatting
Swappy
Swappy

Reputation: 160

Changing the format of date after picking from datepicker after SAPUI5

I have a datepicker from which I want to extract the date and display in a label. Currently the date is getting displayed in the format MM/DD/YYYY but I want it in the format MMM dd, yyyy (Nov 17, 2017). Below is the code : 

screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
date.setText(screenDate);

XML : 

    <HBox alignItems="Center" renderType="Bare">
                    <Label text="Date of Screening" width="50%"/>
                    <DatePicker class="sapUiLargeMarginBegin" width="50%" id="screeningDate"/>
                </HBox>

Upvotes: 0

Views: 4846

Answers (2)

Naveen Kumar H S
Naveen Kumar H S

Reputation: 1304

FYI, By getting view controls and updating the property in it is not good. It will be good if you have a model.

Solution for your problem is below,

<Label text="{
            path: '/date',
            type: 'sap.ui.model.type.Date',
            formatOptions: {
                style: 'medium',
                pattern: 'MMM dd, yyyy'
            }}"/>
<DatePicker dateValue="{/date}"/>

And in the controller I have a JSONModel as below,

onInit : function() {
    this.model = new JSONModel({
        date : new Date(0)
    });
    this.getView().setModel(this.model);
}

Upvotes: 0

Thomas L.
Thomas L.

Reputation: 249

In addition to Naveen's answer here's the solution with your existing code:

screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
// Make date object out of screenDate
var dateObject = new Date(screenDate);
// SAPUI5 date formatter
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "MMM dd,YYYY" }); 
// Format the date
var dateFormatted = dateFormat.format(dateObject);
date.setText(dateFormatted);

Upvotes: 1

Related Questions