mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(date-picker): append calendar to date picker element #345

Browse source 
Fixes #345
This commit is contained in:
Eric Y Liu 2021-07-08 06:59:41 -07:00
commit 0bfbc9cf86
1 changed files with 8 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/DatePicker/DatePicker.svelte
View file

@ -15,12 +15,6 @@
*/
export let value = "";
/**
* Specify the element to append the calendar to
* @type {HTMLElement}
*/
export let appendTo = document.body;
/** Specify the date format */
export let dateFormat = "m/d/Y";
@ -69,10 +63,10 @@
const range = derived(mode, (_) => _ === "range");
const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range");
let calendar = undefined;
let datePickerRef = undefined;
let inputRef = undefined;
let inputRefTo = undefined;
let calendar = null;
let datePickerRef = null;
let inputRef = null;
let inputRefTo = null;
setContext("DatePicker", {
range,
@ -119,7 +113,7 @@
if ($hasCalendar && !calendar) {
calendar = createCalendar({
options: {
appendTo,
appendTo: datePickerRef,
dateFormat,
defaultDate: $inputValue,
locale,
@ -163,15 +157,9 @@
<svelte:body
on:click="{({ target }) => {
if (!calendar || !calendar.isOpen) {
return;
}
if (datePickerRef && datePickerRef.contains(target)) {
return;
}
if (!calendar.calendarContainer.contains(target)) {
calendar.close();
}
if (!calendar || !calendar.isOpen) return;
if (datePickerRef && datePickerRef.contains(target)) return;
if (!calendar.calendarContainer.contains(target)) calendar.close();
}}" />
<div