[UI5] DatePicker

datepicker는 기본으로 제공하는 위젯 중 하나이며, 날짜를 다룰 때 UI 형식으로 달력에서 쉽게 날짜를 선택 하도록 도와주는 역할을 한다. datepicker 모듈을 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로 만들 수 있다.

달력버튼을 누르면

날짜를 선택할 수 있게 나온다. 선택할 수 있는 범위를 지정해줄수 있다.

날짜를 선택하면 함수를 실행시켜 메세지 토스트를 출력하는것까지 해본다.

App.view.xml

<mvc:View 
    controllerName="control.controller.App" 
    xmlns:html="http://www.w3.org/1999/xhtml" 
    xmlns:mvc="sap.ui.core.mvc" 
    displayBlock="true"
    xmlns="sap.m" 
    xmlns:core="sap.ui.core" >
    <App>
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <DatePicker 
                        value="{/sToday}"  
                        valueFormat = "yyyy-MM-dd"
                        displayFormat="{/dateFormat}" 
                        maxDate="{/maxDate}"  
                        minDate="{/minDate}"
                        change=".onChangeFirstDate" />
                                <DatePicker 
                        dateValue="{/oToday}"
                        displayFormat="yyyy-MM"/> 
                    <DateRangeSelection 
                        dateValue="{/oToday}"
                        secondDateValue="{/oToday2}"/>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>                            

value로 default값을 설정한다. 이때 value는 데이터의 타입이 string이어야 하고,
dateValue는 데이터 타입이 date여야 한다.

valueFormat은 날짜의 순서를 지정한다. 데이터를 가져올때 일월년으로 가져오기 때문에 년-월-일로 보여주기 위해 yyyy-MM-dd로 설정한다. 그러면 sToday의 문자열 "2020-08-01"이 2020.8.1로 출력된다.
displayFormat은 화면에 표시할 날짜 형식을 지정한다. dateFormat의 "yyyy-MM-dd" 으로 인해 2020-08-01로 출력된다.
월까지만 표시할땐 "yyyy-MM" 이런식으로 사용해 두번째 DatePicker는 월까지만 표시되고 날짜선택도 월만 선택할수 있다.

maxDate, minDate은 날짜의 선택 범위를 지정한다.

DateRangeSelection는 날짜가 from~ to 범위로 출력되는 모듈이다. 알아서 이전 데이터를 from 데이터로 넣어주고 더 늦은 날짜를 to 데이터로 넣어준다.

---

App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast"
], function(Controller, JSONModel, MessageToast) {
    "use strict";

    return Controller.extend("control.controller.App", {

사용할 기능들을 먼저 셋팅해준다.

    onInit: function() {
        var oData = {
            sToday : "2020-08-01", //value는 string    
            dateFormat : "yyyy-MM-dd",
            maxDate : new Date(),    
            minDate: new Date("2020-07-30"),

                    oToday: new Date("2020-08-01"), //dateValue는 date
                 oToday2 : new Date("2020-08-30")
        };
    var oModel = new JSONModel(oData);
    this.getView().setModel(oModel);
    },

sToday value에 오는 데이터 타입은 string이어야 한다. 그래서 따옴표 안에 입력한다.
maxDate에서 Date()의 괄호에 아무것도 넣지 않으면 오늘날짜 이후로는 선택하지 못하고 이전날짜만 선택할 수 있게 한다.

⭐ 이후 새로 생성한 자바스크립트 객체를 모델에 바인딩하고 그 모델을 뷰에 바인딩한다.

    onChangeFirstDate : function (oEvent) { 
        // MessageToast.show(oEvent.getSource().getValue());
         MessageToast.show(oEvent.getSource().getMaxDate());
    }
    });
});

이벤트 객체를 통해서도 데이터 가져올 수 있다. oEvent의 getValue 프로포티를 사용하면 사용자가 클릭한 데이터를 가져와 메세지 토스트로 뿌려준다.
앞에서 오늘날짜 이후로는 선택하지 못하게 설정했기 때문에 오늘날짜가 max 날짜가 된다. 그래서 getMaxDate 프로포티를 사용하면 오늘날짜가 출력된다.