! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

InputDate 적용 시 달력 UI 미노출 문의 > Q&A | 토론

본문 바로가기

PureJS InputDate 적용 시 달력 UI 미노출 문의

페이지 정보

작성자 올트NHJ 작성일 2022-06-28 17:25 조회 1,656회 댓글 0건
제품 버전 : 5.latest
컨트롤 이름 : InputDate

본문

그리드 컬럼에 InputDate 를 적용한 상태에서 해당 컬럼의 데이터가 빈값인 경우 아래와 같이 빈 칸에 드롭다운 마크만 표시되는데



 

이 상태에서 해당 셀의 드롭다운을 클릭하면 아래와 같은 exception 이 발생하고 달력 UI 가 노출되지 않습니다.



 

저 상태에서 포커스를 옮기면 현재 날짜가 자동으로 입력되고, 이후에는 달력이 정상적으로 표시됩니다.

값이 없는 경우에도 달력 UI 를 노출하는 방법은 없을까요?


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

5 답변

PureJS Re: InputDate 적용 시 달력 UI 미노출 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2022-06-29 09:08 댓글 0건

본문

안녕하세요. 그레이프시티입니다.


해당 에러는 일반적으로 InputDate 컨트롤의 값이 Date 타입이 아닌 경우 나타납니다. 만일 빈 값인 경우에도 원활하게 동작하게 만들기 위해서 inputDate의 isRequired를 false로 설정해보시기 바랍니다.


- isRequired


다른 궁금한 점이 생기면, 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림 


댓글목록

등록된 댓글이 없습니다.

PureJS Re: InputDate 적용 시 달력 UI 미노출 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 올트NHJ 작성일 2022-06-29 10:23 댓글 0건

본문

의견 주신대로 아래와 같이 InputDate 생성 시 isRequired=false 로 설정했는데 현상이 동일합니다.


754957127a54d15d3bae9b780e541a0f_1656465807_7827.png
확인 부탁드립니다.

댓글목록

등록된 댓글이 없습니다.

PureJS Re: InputDate 적용 시 달력 UI 미노출 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2022-06-29 11:07 댓글 0건

본문

안녕하세요 그레이프시티입니다.


공유 주신 내용을 바탕으로 저희 쪽에서 확인해보았으나 안타깝게도 재현이 되지 않아 정확한 원인 파악이 되지 않고 있습니다. 저희 쪽으로 재현 가능한 샘플을 공유해주신다면 재현 및 디버깅 후 답변 드릴 수 있도록 하겠습니다.


다른 궁금한 점이 생기면, 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림 

댓글목록

등록된 댓글이 없습니다.

PureJS Re: InputDate 적용 시 달력 UI 미노출 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 올트NHJ 작성일 2022-06-30 09:39 댓글 0건

본문

다시 문의 드리기 위하여 제공해주시는 샘플 수정하여 아래와 같이 js 코드를 작성했습니다.


아래 컬럼 중 date2 에 노출되는 컬럼의 경우 셀의 드롭다운 아이콘으로 달력을 표시하려고 하면 최초 문의했던 오류가 발생하면서 달력 UI 가 노출되지 않습니다.

추가로 확인해보면 데이터에 null 이 들어가는 경우에는 값이 나오지 않더라도 달력 UI 가 노출되는데 ''(공백문자) 로 입력되는 경우에는 UI 가 노출되지 않습니다.


확인 부탁드립니다.

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo-core.css';
import './styles.css';
import { FlexGrid } from '@grapecity/wijmo.grid';
import { InputDate } from '@grapecity/wijmo.input';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
    let data = [];
    for (var i = 0; i < 30; i++) {
        data.push({
            id: i,
            date: new Date(2015, Math.floor(i / 10) % 12, (Math.floor(i / 10) + 1) % 28),
            date2: ''
        });
    }
    new FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            {
                header: 'Date', binding: 'date', width: 150,
                format: 'yyyy-MM-dd',
                editor: new InputDate(
                    document.createElement('div'),
                    {
                        format: 'yyyy-MM-dd',
                        mask: '0000-00-00',
                        placeholder: '____-__-__',
                        isRequired: false
                    }
                )
            },
            {
                header: 'Date2', binding: 'date2', width: 150,
                format: 'yyyy-MM-dd',
                editor: new InputDate(
                    document.createElement('div'),
                    {
                        format: 'yyyy-MM-dd',
                        mask: '0000-00-00',
                        placeholder: '____-__-__',
                        isRequired: false
                    }
                )
            }
        ],
        itemsSource: data
    });
}

댓글목록

등록된 댓글이 없습니다.

PureJS Re: InputDate 적용 시 달력 UI 미노출 문의

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2022-07-01 10:22 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의주신 내용과 관련하여 '' 공백 문자를 데이터로 주는 경우, 문자로 값이 전달되어 해당 에러가 발생되는 것으로 추측됩니다. 확인하신 것과 같이 공백문자 대신 null 값을 date2의 값으로 할당하여 초기 표시 및 선택 시 값이 빈 값으로 나오는 동시에 UI가 정상적으로 나오므로 해당 방법을 사용하시길 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.