diff --git a/src/components/Datepicker/DatePicker.svelte b/src/components/Datepicker/DatePicker.svelte
index 5762011..ba2bc35 100644
--- a/src/components/Datepicker/DatePicker.svelte
+++ b/src/components/Datepicker/DatePicker.svelte
@@ -138,6 +138,10 @@
     date = e.detail.timeStamp
     dispatch('dateChecked', e.detail)
   }
+
+  function windowClick(){
+    visible = false;
+  }
 </script>
 
 <style>
@@ -202,13 +206,14 @@
     box-shadow: none !important;
   } */
 </style>
-
+<svelte:window on:click={windowClick}></svelte:window>
 <div style="width: {width};position: relative">
   {#if !calendar}
     {#if pickerRule === 'rangeChoice'}
       <div
         style="position: relative;margin: 5px 0 0 0;"
-        on:click={() => {
+        on:click={(e) => {
+          e.stopPropagation()
           visible = !visible
         }}>
       <Input type="text" class={inputClass} bind:value={rangePickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" />
@@ -216,7 +221,8 @@
     {:else}
       <div
         style="position: relative;margin: 5px 0 0 0;"
-        on:click={() => {
+        on:click={(e) => {
+          e.stopPropagation()
           visible = !visible
         }}>
         <Input type="text" class={inputClass} bind:value={pickerResult} readonly iconPack="fa" icon="{icon? 'calendar': ''}" />
@@ -225,7 +231,7 @@
     {/if}
   {/if}
   {#if visible || calendar}
-    <div class={'calendar_' + theme} style="left: {left}">
+    <div class={'calendar_' + theme} style="left: {left}"  on:click={(e)=>e.stopPropagation()}>
       <Selector />
       {#if $view === 'y'}
         <YearView />
diff --git a/src/components/Timepicker/TimePicker.svelte b/src/components/Timepicker/TimePicker.svelte
index 3965418..33416f0 100755
--- a/src/components/Timepicker/TimePicker.svelte
+++ b/src/components/Timepicker/TimePicker.svelte
@@ -132,6 +132,10 @@
     }
     dispatch('timeChecked', data)
   }
+
+  function windowClick(){
+    visible = false;
+  }
 </script>
 
 <style>
@@ -199,9 +203,10 @@
     line-height: 40px;
   } */
 </style>
-
+<svelte:window on:click={windowClick}></svelte:window>
 <div style="width: {width};position: relative">
-  <div style="position: relative" on:click={() => {
+  <div style="position: relative" on:click={(e) => {
+        e.stopPropagation()
         visible = !visible
       }} >
     <!-- <input
@@ -216,7 +221,7 @@
     <Input type="text" class={inputClass} bind:value={_time} readonly iconPack="fa" icon="{icon? 'clock': ''}" />
   </div>
    {#if visible}
-      <div class="touch-time-wrapper"  style="left: {left}">
+      <div class="touch-time-wrapper"  style="left: {left}" on:click={(e)=>e.stopPropagation()}>
         <div class="touch-time">{_time}</div>
         <div class="touch-time-picker">
           <Switcher type="hours" data={HOURS} selected={selectedHour} on:timeChange={timeChanged} } {hour12} />