select datepicker

This commit is contained in:
2024-05-07 10:04:17 +07:00
parent d71cbe3065
commit 615e36647a
7 changed files with 261 additions and 99 deletions

View File

@@ -8,7 +8,7 @@
<a href="/admin/?opt=order&list=unpaid">Chưa thanh toán</a>
<a href="/admin/?opt=order&list=unfulfilled">Chưa ship</a>
</div>
<form method="get" action="" enctype="multipart/form-data" id="form-search">
<input type="hidden" name="opt" value="order">
<input type="hidden" name="status" id="js-status" value="">
@@ -16,28 +16,44 @@
<input type="hidden" name="assign_to" id="assign_to" value="">
<input type="hidden" name="payment" id="js-payment" value="">
<input type="hidden" name="fullfillment" id="js-fullfillment" value="">
<div class="flex items-center mb-[15px] p-[15px_16px] border border-[#F6F6F6] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
<input type="text" name="orderCode" value="" placeholder="Mã đơn hàng" class="w-[375px] h-[36px] p-[0_10px] m-[0_10px_0_0] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<div
class="flex items-center mb-[15px] p-[15px_16px] border border-[#F6F6F6] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
<input type="text" name="orderCode" value="" placeholder="Mã đơn hàng"
class="w-[375px] h-[36px] p-[0_10px] m-[0_10px_0_0] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<span class="whitespace-nowrap">hoặc</span>
<input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)" class="w-[375px] h-[36px] p-[0_10px] m-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<div class="relative m-[0_15px]">
<i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[10px] left-[10px] leading-[35px]"></i>
<input type="text" name="from_date" value="" onfocus="scwShow(this,event);" onclick="scwShow(this,event);" placeholder="Từ ngày" class="w-[125px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
</div>
<div class="relative m-[0_15px]">
<i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[10px] left-[10px] leading-[35px]"></i>
<input type="text" name="to_date" value="" onfocus="scwShow(this,event);" onclick="scwShow(this,event);" placeholder="Đến ngày" class="w-[125px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)"
class="w-[375px] h-[36px] p-[0_10px] m-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
<div date-rangepicker class="flex items-center" datepicker-format="dd/mm/yyyy" datepicker-buttons
datepicker-autoselect-today>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<i
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[4px] left-[10px] leading-[35px]"></i>
</div>
<input datepicker name="start" type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[125px] ps-[30px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Từ ngày">
</div>
<div class="relative ml-[15px]">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<i
class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[4px] left-[10px] leading-[35px]"></i>
</div>
<input name="end" type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[125px] ps-[30px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Đến ngày">
</div>
</div>
<input type="submit" value="Tìm kiếm" class="bg-[#0041E8] rounded-[4px] text-[#fff] font-[500] h-[36px] p-[0_10px] cursor-pointer">
<input type="submit" value="Tìm kiếm"
class="bg-[#0041E8] rounded-[4px] text-[#fff] font-[500] h-[36px] p-[0_10px] cursor-pointer ml-[15px]">
</div>
</form>
<div class="flex items-center justify-between m-[14px_0_20px]">
<div>
<p class="m-[0_55px_0_0] inline-block">
@@ -50,16 +66,18 @@
</div>
<div>
<a href="" class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
<a href=""
class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
<i class="fas fa-print m-[0_4px_0_0]"></i> In danh sách
</a>
<a href="" class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
<a href=""
class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
<i class="far fa-file-excel m-[0_4px_0_0]"></i> Tải file excel
</a>
</div>
</div>
<div class="order-page-table">
<table>
<thead>
@@ -119,9 +137,12 @@
</td>
<td> Hà Nội </td>
<td> 69.600.000 </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]" style="background-color: red"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]" style="background-color: yellow"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]" style="background-color: green"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
style="background-color: red"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
style="background-color: yellow"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
style="background-color: green"></span> </td>
<td>
<a href=""> Nguyen Duc Quan </a>
</td>
@@ -144,9 +165,12 @@
</td>
<td> Hà Nội </td>
<td> 69.600.000 </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]" style="background-color: blue"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]" style="background-color: yellow"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]" style="background-color: green"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
style="background-color: blue"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
style="background-color: yellow"></span> </td>
<td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
style="background-color: green"></span> </td>
<td>
<a href=""> test hura </a>
</td>