tui.grid
tui.grid copied to clipboard
Custom edit about datePicker
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) });
}
}
}
@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?
@jajugoguma
How to apply inputmask and keyEvent to grid datePicker?
please check again :)
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!