Front/JS & jQuery

[js] pignoseCalendar ๋ฐ”์ธ๋”ฉ

์˜ค์„ ์ง€โ™ฌ 2025. 9. 1. 11:03
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ‘‰  pignoseCalendar ๊ธฐ๋ณธ ๋™์ž‘

  • pignoseCalendar๋Š” ๋‹จ์ˆœํžˆ ์ธํ’‹์—๋งŒ ๋‹ฌ๋ฆฌ๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ, ๊ทธ ์ธํ’‹๊ณผ ๊ฐ™์€ input-group ์˜์—ญ ํด๋ฆญ๋„ ํŠธ๋ฆฌ๊ฑฐ๋กœ ์ธ์‹ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ณต์‹ ๋ฌธ์„œ์—์„œ๋„ input-group๊ณผ ๊ฐ™์ด ์“ฐ๋ฉด ์•„์ด์ฝ˜/๋ฒ„ํŠผ ํด๋ฆญ ์‹œ์—๋„ focus ์ด๋ฒคํŠธ๊ฐ€ ์ธํ’‹์— ์ „๋‹ฌ๋˜๋„๋ก ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
    (.input-group-append .input-group-text ํด๋ฆญ → ๋‚ด๋ถ€์ ์œผ๋กœ input.focus() ๋ฐœ์ƒ → ๋‹ฌ๋ ฅ์ด ๋œธ)

์ฆ‰, <i class="far fa-calendar"></i> ์•„์ด์ฝ˜์„ ๋ˆŒ๋ €์„ ๋•Œ๋„ ์‹ค์ œ๋กœ๋Š” ์ธํ’‹์„ focus() ์‹œํ‚ค๊ธฐ ๋•Œ๋ฌธ์— pignoseCalendar๊ฐ€ ์‹คํ–‰๋˜๋Š” ๊ฑฐ์˜ˆ์š”.


โœ… ์ •๋ฆฌํ•˜๋ฉด:

  1. pignoseCalendar๋Š” input์˜ focus ์ด๋ฒคํŠธ๋ฅผ ํ›„ํ‚นํ•ด์„œ ๋‹ฌ๋ ฅ์„ ๋„์›€.
  2. Bootstrap input-group-append๋Š” ํด๋ฆญ ์‹œ ์ธ์ ‘ํ•œ ์ธํ’‹์— focus๋ฅผ ์คŒ.
  3. ๊ทธ๋ž˜์„œ ์•„์ด์ฝ˜ ํด๋ฆญ → ์ธํ’‹ focus → pignoseCalendar ์‹คํ–‰ → ๋‹ฌ๋ ฅ ๋œธ.
728x90
๋ฐ˜์‘ํ˜•