date inputs

src/assets/icons/calendar.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.71792 3.34884C4.38151 3.34884 4.10254 3.09581 4.10254 2.7907V0.55814C4.10254 0.253023 4.38151 0 4.71792 0C5.05433 0 5.33331 0.253023 5.33331 0.55814V2.7907C5.33331 3.09581 5.05433 3.34884 4.71792 3.34884Z" fill="#f2f2f2"/>
+<path d="M11.2824 3.34884C10.946 3.34884 10.667 3.09581 10.667 2.7907V0.55814C10.667 0.253023 10.946 0 11.2824 0C11.6188 0 11.8978 0.253023 11.8978 0.55814V2.7907C11.8978 3.09581 11.6188 3.34884 11.2824 3.34884Z" fill="#f2f2f2"/>
+<path d="M5.12813 9.86046C5.02146 9.86046 4.9148 9.83815 4.81633 9.80094C4.70967 9.76373 4.62762 9.71162 4.54557 9.64464C4.39787 9.50325 4.30762 9.31721 4.30762 9.11628C4.30762 9.01953 4.33223 8.92279 4.37326 8.83348C4.41429 8.74418 4.47172 8.66233 4.54557 8.58791C4.62762 8.52094 4.70967 8.46883 4.81633 8.43162C5.11172 8.31999 5.48095 8.37954 5.71069 8.58791C5.85839 8.72931 5.94864 8.92279 5.94864 9.11628C5.94864 9.16093 5.94044 9.21303 5.93223 9.26512C5.92403 9.30978 5.90762 9.35442 5.883 9.39907C5.86659 9.44372 5.84198 9.48837 5.80916 9.53302C5.78454 9.57023 5.74351 9.60743 5.71069 9.64464C5.5548 9.7786 5.34146 9.86046 5.12813 9.86046Z" fill="#f2f2f2"/>
+<path d="M8.0002 9.86048C7.89353 9.86048 7.78687 9.83816 7.6884 9.80095C7.58174 9.76374 7.49969 9.71163 7.41764 9.64466C7.26994 9.50326 7.17969 9.31722 7.17969 9.11629C7.17969 9.01955 7.2043 8.9228 7.24533 8.8335C7.28636 8.74419 7.34379 8.66234 7.41764 8.58792C7.49969 8.52095 7.58174 8.46884 7.6884 8.43163C7.98379 8.31256 8.35302 8.37955 8.58276 8.58792C8.73046 8.72932 8.82071 8.9228 8.82071 9.11629C8.82071 9.16094 8.81251 9.21304 8.8043 9.26514C8.7961 9.30979 8.77969 9.35443 8.75507 9.39908C8.73866 9.44374 8.71405 9.48838 8.68123 9.53303C8.65661 9.57024 8.61558 9.60745 8.58276 9.64466C8.42687 9.77861 8.21353 9.86048 8.0002 9.86048Z" fill="#f2f2f2"/>
+<path d="M10.8713 9.86048C10.7646 9.86048 10.658 9.83816 10.5595 9.80095C10.4528 9.76374 10.3708 9.71163 10.2887 9.64466C10.2559 9.60745 10.2231 9.57024 10.1903 9.53303C10.1574 9.48838 10.1328 9.44374 10.1164 9.39908C10.0918 9.35443 10.0754 9.30979 10.0672 9.26514C10.059 9.21304 10.0508 9.16094 10.0508 9.11629C10.0508 8.9228 10.141 8.72932 10.2887 8.58792C10.3708 8.52095 10.4528 8.46884 10.5595 8.43163C10.8631 8.31256 11.2241 8.37955 11.4539 8.58792C11.6015 8.72932 11.6918 8.9228 11.6918 9.11629C11.6918 9.16094 11.6836 9.21304 11.6754 9.26514C11.6672 9.30979 11.6508 9.35443 11.6262 9.39908C11.6098 9.44374 11.5851 9.48838 11.5523 9.53303C11.5277 9.57024 11.4867 9.60745 11.4539 9.64466C11.298 9.77861 11.0846 9.86048 10.8713 9.86048Z" fill="#f2f2f2"/>
+<path d="M5.12813 12.4651C5.02146 12.4651 4.9148 12.4428 4.81633 12.4056C4.71787 12.3684 4.62762 12.3163 4.54557 12.2493C4.39787 12.1079 4.30762 11.9144 4.30762 11.7209C4.30762 11.6242 4.33223 11.5274 4.37326 11.4381C4.41429 11.3414 4.47172 11.2595 4.54557 11.1926C4.84916 10.9172 5.4071 10.9172 5.71069 11.1926C5.85839 11.334 5.94864 11.5274 5.94864 11.7209C5.94864 11.9144 5.85839 12.1079 5.71069 12.2493C5.5548 12.3833 5.34146 12.4651 5.12813 12.4651Z" fill="#f2f2f2"/>
+<path d="M8.0002 12.4651C7.78687 12.4651 7.57353 12.3833 7.41764 12.2493C7.26994 12.1079 7.17969 11.9144 7.17969 11.7209C7.17969 11.6242 7.2043 11.5274 7.24533 11.4381C7.28636 11.3414 7.34379 11.2595 7.41764 11.1926C7.72123 10.9172 8.27917 10.9172 8.58276 11.1926C8.65661 11.2595 8.71405 11.3414 8.75507 11.4381C8.7961 11.5274 8.82071 11.6242 8.82071 11.7209C8.82071 11.9144 8.73046 12.1079 8.58276 12.2493C8.42687 12.3833 8.21353 12.4651 8.0002 12.4651Z" fill="#f2f2f2"/>
+<path d="M10.8713 12.4651C10.658 12.4651 10.4446 12.3833 10.2887 12.2493C10.2149 12.1823 10.1574 12.1005 10.1164 12.0037C10.0754 11.9144 10.0508 11.8177 10.0508 11.721C10.0508 11.6242 10.0754 11.5275 10.1164 11.4382C10.1574 11.3414 10.2149 11.2596 10.2887 11.1926C10.4774 11.0214 10.7646 10.9395 11.0272 10.9916C11.0846 10.9991 11.1339 11.014 11.1831 11.0363C11.2323 11.0512 11.2816 11.0735 11.3308 11.1033C11.3718 11.1256 11.4128 11.1628 11.4539 11.1926C11.6015 11.334 11.6918 11.5275 11.6918 11.721C11.6918 11.9144 11.6015 12.1079 11.4539 12.2493C11.298 12.3833 11.0846 12.4651 10.8713 12.4651Z" fill="#f2f2f2"/>
+<path d="M14.9743 6.39252H1.02554C0.689131 6.39252 0.410156 6.1395 0.410156 5.83438C0.410156 5.52927 0.689131 5.27625 1.02554 5.27625H14.9743C15.3107 5.27625 15.5896 5.52927 15.5896 5.83438C15.5896 6.1395 15.3107 6.39252 14.9743 6.39252Z" fill="#f2f2f2"/>
+<path d="M11.2821 16H4.71795C1.72308 16 0 14.4372 0 11.7209V5.39534C0 2.67906 1.72308 1.11627 4.71795 1.11627H11.2821C14.2769 1.11627 16 2.67906 16 5.39534V11.7209C16 14.4372 14.2769 16 11.2821 16ZM4.71795 2.23255C2.37128 2.23255 1.23077 3.26697 1.23077 5.39534V11.7209C1.23077 13.8493 2.37128 14.8837 4.71795 14.8837H11.2821C13.6287 14.8837 14.7692 13.8493 14.7692 11.7209V5.39534C14.7692 3.26697 13.6287 2.23255 11.2821 2.23255H4.71795Z" fill="#f2f2f2"/>
+</svg>

src/assets/styles/_general.scss

@@ -93,6 +93,14 @@ select {
   }
 }
 
+input[type="date"]::-webkit-calendar-picker-indicator {
+  color: rgba(0, 0, 0, 0);
+  opacity: 1;
+  display: block;
+  background: url("../icons/calendar.svg") no-repeat;
+  border-width: thin;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 1rem;

src/pages/Posts.tsx

@@ -55,7 +55,7 @@ const Posts = () => {
   });
 
   const [params, setParams] = useState<paramsType>({
-    id: "asc",
+    id: "desc",
     title: "asc",
     link: "asc",
     date: "asc",
@@ -390,7 +390,7 @@ const Posts = () => {
                   <input
                     placeholder="Filter by published"
                     id="filter-published"
-                    type="text"
+                    type="date"
                     value={filters.fil_publish_date.value}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       setFilters({
@@ -407,7 +407,7 @@ const Posts = () => {
                   <input
                     placeholder="Filter by created"
                     id="filter-created"
-                    type="text"
+                    type="date"
                     value={filters.fil_createdAt.value}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       setFilters({
@@ -424,7 +424,7 @@ const Posts = () => {
                   <input
                     placeholder="Filter by updated"
                     id="filter-updated"
-                    type="text"
+                    type="date"
                     value={filters.fil_updatedAt.value}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       setFilters({