added datetime picker and better date validation

app/Http/Controllers/Admin/VoucherController.php

@@ -11,8 +11,6 @@ use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-use Illuminate\Support\Facades\Validator;
-use Illuminate\Validation\ValidationData;
 use Illuminate\Validation\ValidationException;
 
 class VoucherController extends Controller
@@ -50,7 +48,7 @@ class VoucherController extends Controller
             'code'       => 'required|string|alpha_dash|max:36',
             'uses'       => 'required|numeric|max:2147483647',
             'credits'    => 'required|numeric|between:0,99999999',
-            'expires_at' => 'nullable|date|after:1 hour',
+            'expires_at' => ['nullable','date_format:d-m-Y','after:today',"before:1000 years"],
         ]);
 
         Voucher::create($request->except('_token'));
@@ -96,7 +94,7 @@ class VoucherController extends Controller
             'code'       => 'required|string|alpha_dash|max:36',
             'uses'       => 'required|numeric|max:2147483647',
             'credits'    => 'required|numeric|between:0,99999999',
-            'expires_at' => 'nullable|date|after:1 hour',
+            'expires_at' => ['nullable','date_format:d-m-Y','after:today',"before:1000 years"],
         ]);
 
         $voucher->update($request->except('_token'));

resources/views/admin/vouchers/create.blade.php

@@ -11,7 +11,7 @@
                 <div class="col-sm-6">
                     <ol class="breadcrumb float-sm-right">
                         <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
-                        <li class="breadcrumb-item"><a href="{{route('admin.products.index')}}">Vouchers</a></li>
+                        <li class="breadcrumb-item"><a href="{{route('admin.vouchers.index')}}">Vouchers</a></li>
                         <li class="breadcrumb-item"><a class="text-muted" href="{{route('admin.products.create')}}">Create</a>
                         </li>
                     </ol>
@@ -50,7 +50,7 @@
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="credits">Credits *</label>
+                                    <label for="credits">* Credits</label>
                                     <input value="{{old('credits')}}" placeholder="500" id="credits"
                                            name="credits" type="number" step="any" min="0"
                                            max="99999999"
@@ -64,7 +64,7 @@
 
 
                                 <div class="form-group">
-                                    <label for="code">Code *</label>
+                                    <label for="code">* Code</label>
                                     <div class="input-group">
                                         <input value="{{old('code')}}" placeholder="SUMMER" id="code" name="code"
                                                type="text"
@@ -84,7 +84,7 @@
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="uses">Uses * <i data-toggle="popover" data-trigger="hover" data-content="A voucher can only be used one time per user. Uses specifies the number of different users that can use this voucher." class="fas fa-info-circle"></i></label>
+                                    <label for="uses">* Uses<i data-toggle="popover" data-trigger="hover" data-content="A voucher can only be used one time per user. Uses specifies the number of different users that can use this voucher." class="fas fa-info-circle"></i></label>
                                     <div class="input-group">
                                         <input value="{{old('uses') ?? 1}}" id="uses" min="1" max="2147483647"
                                                name="uses" type="number"
@@ -102,12 +102,14 @@
                                     @enderror
                                 </div>
 
-
-                                <div class="form-group">
+                                <div class="form-group mb-3">
                                     <label for="expires_at">Expires at</label>
-                                    <input value="{{old('expires_at')}}" id="expires_at" name="expires_at"
-                                           type="datetime-local"
-                                           class="form-control @error('expires_at') is-invalid @enderror">
+                                    <div class="input-group date" id="expires_at" data-target-input="nearest">
+                                        <input value="{{old('expires_at')}}" name="expires_at" placeholder="dd-mm-yyyy" type="text" class="form-control @error('expires_at') is-invalid @enderror datetimepicker-input" data-target="#expires_at"/>
+                                        <div class="input-group-append" data-target="#expires_at" data-toggle="datetimepicker">
+                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+                                        </div>
+                                    </div>
                                     @error('expires_at')
                                     <div class="text-danger">
                                         {{$message}}
@@ -115,7 +117,6 @@
                                     @enderror
                                 </div>
 
-
                                 <div class="form-group text-right">
                                     <button type="submit" class="btn btn-primary">
                                         Submit
@@ -127,12 +128,31 @@
                 </div>
             </div>
 
+            <i class="fas"></i>
+
         </div>
     </section>
     <!-- END CONTENT -->
 
 
     <script>
+        document.addEventListener('DOMContentLoaded', (event) => {
+            $('#expires_at').datetimepicker({
+                format : 'DD-MM-yyyy',
+                icons: {
+                    time: 'far fa-clock',
+                    date: 'far fa-calendar',
+                    up: 'fas fa-arrow-up',
+                    down: 'fas fa-arrow-down',
+                    previous: 'fas fa-chevron-left',
+                    next: 'fas fa-chevron-right',
+                    today: 'fas fa-calendar-check',
+                    clear: 'far fa-trash-alt',
+                    close: 'far fa-times-circle'
+                }
+            });
+        })
+
         function setMaxUses() {
             let element = document.getElementById('uses')
             element.value = element.max;

resources/views/admin/vouchers/edit.blade.php

@@ -11,7 +11,7 @@
                 <div class="col-sm-6">
                     <ol class="breadcrumb float-sm-right">
                         <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
-                        <li class="breadcrumb-item"><a href="{{route('admin.products.index')}}">Vouchers</a></li>
+                        <li class="breadcrumb-item"><a href="{{route('admin.vouchers.index')}}">Vouchers</a></li>
                         <li class="breadcrumb-item"><a class="text-muted"
                                                        href="{{route('admin.products.edit' , $voucher->id)}}">Edit</a>
                         </li>
@@ -108,11 +108,14 @@
                                     @enderror
                                 </div>
 
-                                <div class="form-group">
+                                <div class="form-group mb-3">
                                     <label for="expires_at">Expires at</label>
-                                    <input value="{{ $voucher->expires_at ?  $voucher->expires_at->format('Y-m-d\TH:i') : ''}}" id="expires_at" name="expires_at"
-                                           type="datetime-local"
-                                           class="form-control @error('expires_at') is-invalid @enderror">
+                                    <div class="input-group date" id="expires_at" data-target-input="nearest">
+                                        <input value="{{$voucher->expires_at ? $voucher->expires_at->format('d-m-Y') : ''}}" name="expires_at" placeholder="dd-mm-yyyy" type="text" class="form-control @error('expires_at') is-invalid @enderror datetimepicker-input" data-target="#expires_at"/>
+                                        <div class="input-group-append" data-target="#expires_at" data-toggle="datetimepicker">
+                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+                                        </div>
+                                    </div>
                                     @error('expires_at')
                                     <div class="text-danger">
                                         {{$message}}
@@ -138,6 +141,23 @@
 
 
     <script>
+        document.addEventListener('DOMContentLoaded', (event) => {
+            $('#expires_at').datetimepicker({
+                format : 'DD-MM-yyyy',
+                icons: {
+                    time: 'far fa-clock',
+                    date: 'far fa-calendar',
+                    up: 'fas fa-arrow-up',
+                    down: 'fas fa-arrow-down',
+                    previous: 'fas fa-chevron-left',
+                    next: 'fas fa-chevron-right',
+                    today: 'fas fa-calendar-check',
+                    clear: 'far fa-trash-alt',
+                    close: 'far fa-times-circle'
+                }
+            });
+        })
+
         function setMaxUses() {
             let element = document.getElementById('uses')
             element.value = element.max;

resources/views/layouts/main.blade.php

@@ -16,6 +16,9 @@
     {{--  summernote --}}
     <link rel="stylesheet" href="{{asset('plugins/summernote/summernote-bs4.min.css')}}">
 
+    {{--  datetimepicker --}}
+    <link rel="stylesheet" href="{{asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">
+
     <link rel="stylesheet" href="{{asset('css/app.css')}}">
     <link rel="preload" href="{{asset('plugins/fontawesome-free/css/all.min.css')}}" as="style"
           onload="this.onload=null;this.rel='stylesheet'">
@@ -335,6 +338,12 @@
 <!-- Summernote -->
 <script src="{{asset('plugins/summernote/summernote-bs4.min.js')}}"></script>
 
+<!-- Moment.js -->
+<script src="{{asset('plugins/moment/moment.min.js')}}"></script>
+
+<!-- Datetimepicker -->
+<script src="{{asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
+
 <script>
     $(document).ready(function () {
         $('[data-toggle="popover"]').popover();