JSP/KendoUI/날짜 포멧 확인

문제

2022.10.24 - [Web/frontend] - javascrpit/유효성 체크(정규식)처럼 날짜 형식을 체크했지만, 코드가 깔끔하지 않고 완벽하지 않아서(02/31 같은 값을 잡아내지 못한다.) 새로운 방법을 찾아야 했다. 마침 프로젝트에서 kendoUI를 사용하고 있어서 kendoUI에서 제공하는 함수가 있지는 않을까 찾아보았다.

해결방법

1. 날짜 형식 체크
https://docs.telerik.com/kendo-ui/knowledge-base/datepicker-validate-whether-value-is-in-correct-format

<h2>Use client-side validation:</h2>
<input id="date">
<button id = "submitBtn">submit</button>

<script>
  $(function () {
    $("#date").kendoDatePicker();
    $("#submitBtn").kendoButton({
       click : function(e){
         var dateValue = $("#date").val();
         if (dateValue != ""){
            if (!kendo.parseDate(dateValue, "MM/dd/yyyy")){ // null
                console.log("Not a valid date in MM/dd/yyyy format!");

            }else {
                console.log("A valid date in MM/dd/yyyy format!");
            }
         }

         console.log("empty!!");
       }
    });
 })
</script>

2. 날짜 비교
https://stackoverflow.com/questions/59411669/trigger-validation-if-start-date-end-date-kendo-datepicker

var inputdate1= $('#inputdateid1').data("kendoDatePicker").value();
var inputdate2= $('#inputdateid2').data("kendoDatePicker").value();
if (new Date(inputdate1) > new Date(inputdate2)){
	alert(" Your alert message !");
}

더 공부할 내용

MVVM pattern
https://docs.telerik.com/kendo-ui/framework/mvvm/overview

공식문서를 보면 viewModel, bind를 사용하고 있다. 안드로이드도 viewModel과 livedata 를 사용하여 값이 변할 때 액션을 지정할 수 있는데, 그 형태가 비슷해서 놀랐다. MVVM의 제대로 된 활용을 조금 더 고민해봐야겠다.

<div data-bind="text: person.lowerCaseName"></div>

<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe",
        lowerCaseName: function() {
            return this.get("name").toLowerCase();
        }
    }
});
kendo.bind($("div"), viewModel);
</script>

바인딩
https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/attr

속성, 값, 스타일, 커스텀 등 다양한 data-binding을 제공한다. 이러한 데이터 바인딩이 KendoUI만의 특징인건지, 다른 라이브러리/툴에서도 흔하게 사용되는 개념인건지 궁금해졌다.