From 9ee7da2b4798a455fed483730c3b4cf1309f0f34 Mon Sep 17 00:00:00 2001 From: Ahliman HUSEYNOV Date: Mon, 22 Apr 2024 19:23:37 +0200 Subject: [PATCH] Add date picker component --- src/components/styled/date-picker.css | 23 ++ src/docs/src/lib/data/pages.js | 6 + .../components/date-picker/+page.svelte.md | 289 ++++++++++++++++++ 3 files changed, 318 insertions(+) create mode 100644 src/components/styled/date-picker.css create mode 100644 src/docs/src/routes/(docs)/components/date-picker/+page.svelte.md diff --git a/src/components/styled/date-picker.css b/src/components/styled/date-picker.css new file mode 100644 index 00000000000..363e2454817 --- /dev/null +++ b/src/components/styled/date-picker.css @@ -0,0 +1,23 @@ +.date-picker { + @apply flex flex-col gap-2 p-4; + + &-header { + @apply flex items-center justify-between; + } + + &-body { + @apply flex flex-col gap-2 p-4; + } + + &-weekdays { + @apply text-base-content grid grid-cols-7 gap-1 text-center text-xs; + } + + &-days { + @apply text-base-content grid grid-cols-7 gap-4 text-center text-xs; + + > [aria-current="date"] { + @apply bg-primary text-primary-content rounded-full; + } + } +} diff --git a/src/docs/src/lib/data/pages.js b/src/docs/src/lib/data/pages.js index 51c67b1e2fd..e5a432f0779 100644 --- a/src/docs/src/lib/data/pages.js +++ b/src/docs/src/lib/data/pages.js @@ -252,6 +252,12 @@ export const pages = [ tags: "checkbox", href: "/components/checkbox/", }, + // date picker + { + name: "Date picker", + tags: "date picker", + href: "/components/date-picker/", + }, { name: "File Input", tags: "file upload", diff --git a/src/docs/src/routes/(docs)/components/date-picker/+page.svelte.md b/src/docs/src/routes/(docs)/components/date-picker/+page.svelte.md new file mode 100644 index 00000000000..9423f0bb8cf --- /dev/null +++ b/src/docs/src/routes/(docs)/components/date-picker/+page.svelte.md @@ -0,0 +1,289 @@ +--- +title: Date picker +desc: The date picker component is used to select a date from a calendar. +published: true +layout: components +--- + + + + + + + + +
+
+ +
April 2024
+ +
+
+
    +
  • Sun
    • +
  • Mon
    • +
  • Tue
    • +
  • Wed
    • +
  • Thu
    • +
  • Fri
    • +
  • Sat
    • +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
  • 10
    • +
  • 11
    • +
  • 12
    • +
  • 13
    • +
  • 14
    • +
  • 15
    • +
  • 16
    • +
  • 17
    • +
  • 18
    • +
  • 19
    • +
  • 20
    • +
  • 21
    • +
  • 22
    • +
  • 23
    • +
  • 24
    • +
  • 25
    • +
  • 26
    • +
  • 27
    • +
  • 28
    • +
  • 29
    • +
  • 30
    • +
+
+
+
{
+`

+  

+    
+    
April 2024

+    
+  

+  

+    
    
+      
  • Sun
    • 
+      
  • Mon
    • 
+      
  • Tue
    • 
+      
  • Wed
    • 
+      
  • Thu
    • 
+      
  • Fri
    • 
+      
  • Sat
    • 
+    

+    
    
+      
  • 
+      
  • 
+      
  • 
+      
  • 
+      
  • 
+      
  • 
+      
  • 1
    • 
+      
  • 2
    • 
+      
  • 3
    • 
+      
  • 4
    • 
+      
  • 5
    • 
+      
  • 6
    • 
+      
  • 7
    • 
+      
  • 8
    • 
+      
  • 9
    • 
+      
  • 10
    • 
+      
  • 11
    • 
+      
  • 12
    • 
+      
  • 13
    • 
+      
  • 14
    • 
+      
  • 15
    • 
+      
  • 16
    • 
+      
  • 17
    • 
+      
  • 18
    • 
+      
  • 19
    • 
+      
  • 20
    • 
+      
  • 21
    • 
+      
  • 22
    • 
+      
  • 23
    • 
+      
  • 24
    • 
+      
  • 25
    • 
+      
  • 26
    • 
+      
  • 27
    • 
+      
  • 28
    • 
+      
  • 29
    • 
+      
  • 30
    • 
+    

+  

+
`
+}
+ + + +
+
Click outside to close
+
+
+ + Click to open +
+
+
+ +
April 2024
+ +
+
+
    +
  • Sun
    • +
  • Mon
    • +
  • Tue
    • +
  • Wed
    • +
  • Thu
    • +
  • Fri
    • +
  • Sat
    • +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
  • 10
    • +
  • 11
    • +
  • 12
    • +
  • 13
    • +
  • 14
    • +
  • 15
    • +
  • 16
    • +
  • 17
    • +
  • 18
    • +
  • 19
    • +
  • 20
    • +
  • 21
    • +
  • 22
    • +
  • 23
    • +
  • 24
    • +
  • 25
    • +
  • 26
    • +
  • 27
    • +
  • 28
    • +
  • 29
    • +
  • 30
    • +
+
+
+
+
+
{
+`

+  

+      
+      Click to open
+  

+

+      

+        
+        
April 2024

+        
+      

+      

+        
    
+          
  • Sun
    • 
+          
  • Mon
    • 
+          
  • Tue
    • 
+          
  • Wed
    • 
+          
  • Thu
    • 
+          
  • Fri
    • 
+          
  • Sat
    • 
+        

+        
    
+          
  • 
+          
  • 
+          
  • 
+          
  • 
+          
  • 
+          
  • 
+          
  • 1
    • 
+          
  • 2
    • 
+          
  • 3
    • 
+          
  • 4
    • 
+          
  • 5
    • 
+          
  • 6
    • 
+          
  • 7
    • 
+          
  • 8
    • 
+          
  • 9
    • 
+          
  • 10
    • 
+          
  • 11
    • 
+          
  • 12
    • 
+          
  • 13
    • 
+          
  • 14
    • 
+          
  • 15
    • 
+          
  • 16
    • 
+          
  • 17
    • 
+          
  • 18
    • 
+          
  • 19
    • 
+          
  • 20
    • 
+          
  • 21
    • 
+          
  • 22
    • 
+          
  • 23
    • 
+          
  • 24
    • 
+          
  • 25
    • 
+          
  • 26
    • 
+          
  • 27
    • 
+          
  • 28
    • 
+          
  • 29
    • 
+          
  • 30
    • 
+        

+      

+    

+
`
+}
+