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

input Date의 선택완려버튼 표시하고 동시에 2개의 달력을 표시 할 수있나요? > Q&A | 토론

본문 바로가기

VueJS input Date의 선택완려버튼 표시하고 동시에 2개의 달력을 표시 할 수있나요?

페이지 정보

작성자 토끼바람 작성일 2021-07-23 17:02 조회 5,115회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : inputDate

본문

input date를  2개 올리고 두개의 달력을 표시를 동시에 할 수있나요?

선택완료 버튼을 클릭하였을때 각각 해당 하는 컨트롤에 값을 설정하고 싶습니다.

rangedate를 하고자 했었는데 달력은 2개만 있는 상태에서

하나는 2021 1월 다른 하나는 2022 3월 이렇게 표시되고 각각의 일자를 선택한 후에

완료 버튼을 클릭 할 때 2개의 달력창이 동시에 닫히는 형태로 구현하고 싶은데

방법이 있는지 문의 드립니다


혹은 rangeDate를 사용할때 from 을 선택하면 to 가 자동으로 삭제가 되거나 to 선택하면 from이 선택이 해제가 되는것 

같습니다.


from 혹은  to 를 선택하더라도 다른 선택이 초기화되지 않도록 할 수 있는 방법이 있나요?


감사합니다.


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

댓글목록

등록된 댓글이 없습니다.

1 답변

VueJS Re: input Date의 선택완려버튼 표시하고 동시에 2개의 달력을 표시 할 수있나요?

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

페이지 정보

작성자 GCK루시 작성일 2021-07-26 15:26 댓글 0건

본문

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


Wijmo inputDate 컨트롤을 2개 설정하고 각각의 달력을 동시에 열고 선택완료 클릭 시 달력을 숨김처리하고 싶으신 경우, inputDate의 isDroppedDown, closeOnSelection 속성과 lostFocus 이벤트를 이용하시면 됩니다. 


아래 샘플에서는 왼편의 inputDate 컨트롤의 드롭다운 버튼을 클릭 시 오른편 inpuDate 컨트롤에 대해서 현재 표시되는지 여부를 나타내는 값을 가져오거나 설정 하는 isDroppedDown를 true로 할당하여 달력이 동시에 표시되게 합니다. 다만 lostFocus 이벤트 내에서도 두 개의 컨트롤의 isDroppedDown 상태를 true로 두어 해당 컨트롤의 포커스가 사라져도 드롭다운이 계속 표시되도록 처리합니다. 


사용자가 선택할 때 컨트롤이 자동으로 드롭다운을 닫아야 하는지 여부를 결정하는 값을 가져오거나 설정하는 closeOnSelection 속성은 false로 두어 달력의 날짜 선택 시에도 달력이 숨김처리 되지 않도록 합니다. 그 다음, 선택 완료 버튼을 클릭 시, inputDate 컨트롤의 isDroppedDown을 false로 설정해 동시에 닫히게 구현하였습니다. 자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.




[closeOnSelection]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.inputdate.html#closeonselection 

[isDroppedDown]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.inputdate.html#isdroppeddown


도움말 문서도 같이 전달 드리오니 참고 부탁 드립니다. 



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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

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