Custom edit about datePicker

[yangyeongwon]

Hi :)

Below is the code to apply inputmask and keyEvent to datePicker using custom editor.

on the toast grid How to apply datePicker input mask without using custom editor?

Is it possible to apply keydown event when data input in datePicker provided by ToastGrid?

class CustomTextEditor{

        constructor(props) {
        //editor 생성
        this.el = this.makeElement(props);

        //datePicker 생성
        this.createDatePicker(this.el);
    }

    getElement() {
        this.datepickerOffset();
        this.datepicker.open();
        return this.el;
    }

    getValue() {
        var value = this.el.getElementsByTagName("input")[0].value;
        this.datepicker.close();
        return value;
    }

    mounted() {
        this.el.getElementsByTagName("input")[0].select();
    }

    makeElement(props) {
        var tag = "";
        tag += "<div class='tui-grid-layer-editing-inner' style='position:relative;'>";
        tag += "        <div class='tui-grid-datepicker-input-container'>";
        tag += "            <input type='text' class='tui-grid-datepicker-input' id='datetime-input' value="+  String(props.value) +">";
        tag += "            <span class='tui-ico-date'></span>";
        tag += "            <i class='tui-grid-date-icon'></i>";
        tag += "        </div>";
        tag += "</div>";

        var parser = new DOMParser();
        var doc = parser.parseFromString(tag, 'text/html');
        var el = doc.getElementsByTagName('body')[0];
        var input = el.getElementsByTagName("input")[0];

        //마스크적용
        $(input).inputmask({
            mask: '9999-99-99',
                        showMaskOnHover: false, // default: true, 마우스 오버 했을 때 형식 노출 여부  
        });

        //키이벤트
        $(input).on({
            keydown : function(e){
                var keyCode = e.keyCode;
                var target = e.target;

                var isValidKey = (
                    (keyCode >= 48 && keyCode <= 57) ||     // 숫자
                    (keyCode >= 96 && keyCode <= 105) ||    // 숫자 키패드 
                    (keyCode >= 37 && keyCode <= 40) ||     // 방향키
                    (keyCode === 8) ||  // BackSpace
                    (keyCode === 9) ||  // Tap
                    (keyCode === 13) || // 엔터
                    (keyCode === 46)    
                );

                if(!isValidKey){
                    //문자입력방지
                    $(target).attr('readOnly',true);
                    setTimeout(function(){
                        $(target).attr('readOnly',false);
                    }, 10);
                } else {
                    //엔터
                    if(keyCode === 13){
                        if(!new moment(this.value, 'YYYY-MM-DD', true).isValid()){
                            input.select();
                            console.log(input)
                            return false;
                        }
                    }
                    $(target).attr('readOnly',false);
                }
            },
        });

        return el;
    }

    createDatePicker(el) {

        var input = el.getElementsByTagName("input")[0];
        var icon = el.getElementsByTagName("i")[0];

        this.datepicker = new tui.DatePicker('#wrapper', {
            date: new moment(input.value).toDate(),
            autoClose: true,
            openers: [icon, input],
                        input: {
                                 element: '#datetime-input',
                                 format: 'yyyy-MM-dd',
                        },
        });

        this.datepicker.on('close', () => {
            $("#datetime-input").val(new moment(this.datepicker.getDate()).format('YYYY-MM-DD'));
            $("#datetime-input").focus();
        });
    }

    datepickerOffset(){
        var pickerDiv = $(".tui-datepicker");
        var editDiv = $(".tui-grid-layer-editing");

        var parentX = editDiv.position().left;                          //부모 div태그 left
        var parentY = editDiv.position().top;                           //부모 div태그 top
        var wdoHeight = window.innerHeight;                             //브라우저 높이
        var datepickerY = editDiv.offset().top + pickerDiv.height();    //datepicker top
        var scroll = $('.tui-grid-body-area')[1].scrollTop;
        var isOver = datepickerY > wdoHeight;

        this.setPosition(isOver, scroll, parentY + 75, parentX + 30);

        if(datepickerY > wdoHeight) {
            $(".tui-datepicker").css({"opacity":"1", "z-index":"99", "top": (parentY - 300), "left": (parentX + 30) });
        } else {
            $(".tui-datepicker").css({"opacity":"1", "z-index":"99", "top": (parentY + 75), "left": (parentX + 30) });
        }
    }
}

[jajugoguma]

@yangyeongwon Please make sure you have filled out issue respecting our form in English and given us as much context as possible. If not, the issue will be closed or not replied.

I don't understand what you want exactly. Could you please explain more clearly?

[yangyeongwon]

@jajugoguma

How to apply inputmask and keyEvent to grid datePicker?

please check again :)

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!