diff --git a/resources/lang/en-US/datepicker.php b/resources/lang/en-US/datepicker.php
new file mode 100644
index 0000000000..1abad03a81
--- /dev/null
+++ b/resources/lang/en-US/datepicker.php
@@ -0,0 +1,78 @@
+<?php
+
+return array(
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'today' => 'Today',
+    'clear' => 'Clear',
+    'days' => [
+        'sunday' => 'Sunday',
+        'monday' => 'Monday',
+        'tuesday' => 'Tuesday',
+        'wednesday' =>  'Wednesday',
+        'thursday' =>  'Thursday',
+        'friday' =>  'Friday',
+        'saturday' =>  'Saturday',
+        ],
+
+    'short_days' => [
+        'sunday' => 'Sun',
+        'monday' => 'Mon',
+        'tuesday' => 'Tue',
+        'wednesday' =>  'Wed',
+        'thursday' =>  'Thu',
+        'friday' =>  'Fri',
+        'saturday' =>  'Sat',
+    ],
+
+    'min_days' => [
+        'sunday' => 'Su',
+        'monday' => 'Mo',
+        'tuesday' => 'Tu',
+        'wednesday' =>  'We',
+        'thursday' =>  'Th',
+        'friday' =>  'Fr',
+        'saturday' =>  'Sa',
+    ],
+
+    'months' => [
+        'january' => 'January',
+        'february' => 'February',
+        'march' => 'March',
+        'april' => 'April',
+        'may' => 'May',
+        'june' => 'June',
+        'july' => 'July',
+        'august' => 'August',
+        'september' => 'September',
+        'october' => 'October',
+        'november' => 'November',
+        'december' => 'December',
+    ],
+
+    'months_short' => [
+        'january' => 'Jan',
+        'february' => 'Feb',
+        'march' => 'Mar',
+        'april' => 'Apr',
+        'may' => 'May',
+        'june' => 'Jun',
+        'july' => 'Jul',
+        'august' => 'Aug',
+        'september' => 'Sep',
+        'october' => 'Oct',
+        'november' => 'Nov',
+        'december' => 'Dec',
+    ],
+
+);
diff --git a/resources/views/accessories/edit.blade.php b/resources/views/accessories/edit.blade.php
index 8e0503400f..827e117b51 100644
--- a/resources/views/accessories/edit.blade.php
+++ b/resources/views/accessories/edit.blade.php
@@ -22,7 +22,7 @@
 @include ('partials.forms.edit.location-select', ['translated_name' => trans('general.location'), 'fieldname' => 'location_id'])
 @include ('partials.forms.edit.model_number')
 @include ('partials.forms.edit.order_number')
-@include ('partials.forms.edit.purchase_date')
+@include ('partials.forms.edit.datepicker', ['translated_name' => trans('general.purchase_date'),'fieldname' => 'purchase_date'])
 @include ('partials.forms.edit.purchase_cost', ['currency_type' => $item->location->currency ?? null])
 @include ('partials.forms.edit.quantity')
 @include ('partials.forms.edit.minimum_quantity')
diff --git a/resources/views/asset_maintenances/edit.blade.php b/resources/views/asset_maintenances/edit.blade.php
index 4dd390ddfa..8e41701c79 100644
--- a/resources/views/asset_maintenances/edit.blade.php
+++ b/resources/views/asset_maintenances/edit.blade.php
@@ -65,10 +65,12 @@
           <label for="start_date" class="col-md-3 control-label">{{ trans('admin/asset_maintenances/form.start_date') }}</label>
 
           <div class="input-group col-md-3">
-            <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true" data-date-clear-btn="true">
-              <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="start_date" id="start_date" value="{{ old('start_date', $item->start_date) }}"{{  (Helper::checkIfRequired($item, 'start_date')) ? ' required' : '' }}>
-              <span class="input-group-addon"><x-icon type="calendar" /></span>
-            </div>
+            <x-input.datepicker
+                    name="start_date"
+                    :value="old('start_date', $item->start_date)"
+                    placeholder="{{ trans('general.select_date') }}"
+                    required="{{ Helper::checkIfRequired($item, 'start_date') }}"
+            />
             {!! $errors->first('start_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
           </div>
         </div>
@@ -80,12 +82,12 @@
           <label for="start_date" class="col-md-3 control-label">{{ trans('admin/asset_maintenances/form.completion_date') }}</label>
 
           <div class="input-group col-md-3">
-            <div class="input-group date" data-date-clear-btn="true" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true">
-              <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="completion_date" id="completion_date" value="{{ old('completion_date', $item->completion_date) }}"{{  (Helper::checkIfRequired($item, 'completion_date')) ? ' required' : '' }}>
-              <span class="input-group-addon">
-                <x-icon type="calendar" />
-              </span>
-            </div>
+            <x-input.datepicker
+                    name="completion_date"
+                    :value="old('start_date', $item->start_date)"
+                    placeholder="{{ trans('general.select_date') }}"
+                    required="Helper::checkIfRequired($item, 'completion_date')"
+            />
             {!! $errors->first('completion_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
           </div>
         </div>
diff --git a/resources/views/blade/input/datepicker.blade.php b/resources/views/blade/input/datepicker.blade.php
new file mode 100644
index 0000000000..111aa8dbf7
--- /dev/null
+++ b/resources/views/blade/input/datepicker.blade.php
@@ -0,0 +1,13 @@
+@props([
+    'value' => '',
+    'required' => '',
+    'end_date' => null,
+    'col_size_class' => null,
+])
+
+<!-- Datepicker -->
+<div class="input-group date {{ $col_size_class }}" data-provide="datepicker" data-date-today-highlight="true" data-date-language="{{ auth()->user()->locale }}" data-date-locale="{{ auth()->user()->locale }}" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-clear-btn="true"{{ $end_date ? ' data-date-end-date=' . $end_date : '' }}>
+    <input type="text" placeholder="{{ trans('general.select_date') }}" value="{{ $value }}" maxlength="10" {{ $attributes->merge(['class' => 'form-control']) }} {{ $required=='1' ? 'required' : '' }}>
+    <span class="input-group-addon"><x-icon type="calendar" /></span>
+
+</div>
\ No newline at end of file
diff --git a/resources/views/components/edit.blade.php b/resources/views/components/edit.blade.php
index 206418f894..979d68248c 100644
--- a/resources/views/components/edit.blade.php
+++ b/resources/views/components/edit.blade.php
@@ -26,7 +26,7 @@
 @include ('partials.forms.edit.location-select', ['translated_name' => trans('general.location'), 'fieldname' => 'location_id'])
 @include ('partials.forms.edit.supplier-select', ['translated_name' => trans('general.supplier'), 'fieldname' => 'supplier_id'])
 @include ('partials.forms.edit.order_number')
-@include ('partials.forms.edit.purchase_date')
+@include ('partials.forms.edit.datepicker', ['translated_name' => trans('general.purchase_date'),'fieldname' => 'purchase_date'])
 @include ('partials.forms.edit.purchase_cost')
 @include ('partials.forms.edit.notes')
 @include ('partials.forms.edit.image-upload', ['image_path' => app('components_upload_path')])
diff --git a/resources/views/consumables/edit.blade.php b/resources/views/consumables/edit.blade.php
index 300a7114d9..e844338fa7 100644
--- a/resources/views/consumables/edit.blade.php
+++ b/resources/views/consumables/edit.blade.php
@@ -22,7 +22,7 @@
 @include ('partials.forms.edit.model_number')
 @include ('partials.forms.edit.item_number')
 @include ('partials.forms.edit.order_number')
-@include ('partials.forms.edit.purchase_date')
+@include ('partials.forms.edit.datepicker', ['translated_name' => trans('general.purchase_date'),'fieldname' => 'purchase_date'])
 @include ('partials.forms.edit.purchase_cost')
 @include ('partials.forms.edit.quantity')
 @include ('partials.forms.edit.minimum_quantity')
diff --git a/resources/views/hardware/checkout.blade.php b/resources/views/hardware/checkout.blade.php
index ac5c8022ec..60d64221e2 100755
--- a/resources/views/hardware/checkout.blade.php
+++ b/resources/views/hardware/checkout.blade.php
@@ -110,14 +110,15 @@
                                 {{ trans('admin/hardware/form.checkout_date') }}
                             </label>
                             <div class="col-md-8">
-                                <div class="input-group date col-md-7" data-provide="datepicker"
-                                     data-date-format="yyyy-mm-dd" data-date-end-date="0d" data-date-clear-btn="true">
-                                    <input type="text" class="form-control"
-                                           placeholder="{{ trans('general.select_date') }}" name="checkout_at"
-                                           id="checkout_at" value="{{ old('checkout_at', date('Y-m-d')) }}">
-                                    <span class="input-group-addon">
-                                        <x-icon type="calendar" /></span>
-                                </div>
+
+                                <x-input.datepicker
+                                        name="checkout_at"
+                                        end_date="0d"
+                                        col_size_class="col-md-7"
+                                        :value="old('expected_checkin', date('Y-m-d'))"
+                                        placeholder="{{ trans('general.select_date') }}"
+                                        required="{{ Helper::checkIfRequired($item, 'checkout_at') }}"
+                                />
                                 {!! $errors->first('checkout_at', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                             </div>
                         </div>
@@ -129,15 +130,12 @@
                             </label>
 
                             <div class="col-md-8">
-                                <div class="input-group date col-md-7" data-provide="datepicker"
-                                     data-date-format="yyyy-mm-dd" data-date-start-date="0d" data-date-clear-btn="true">
-                                    <input type="text" class="form-control"
-                                           placeholder="{{ trans('general.select_date') }}" name="expected_checkin"
-                                           id="expected_checkin" value="{{ old('expected_checkin') }}">
-                                    <span class="input-group-addon">
-                                        <x-icon type="calendar" />
-                                    </span>
-                                </div>
+                                <x-input.datepicker
+                                        name="expected_checkin"
+                                        :value="old('expected_checkin', $item->expected_checkin)"
+                                        placeholder="{{ trans('general.select_date') }}"
+                                        required="{{ Helper::checkIfRequired($item, 'expected_checkin') }}"
+                                />
                                 {!! $errors->first('expected_checkin', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                             </div>
                         </div>
@@ -224,15 +222,4 @@
 
 @section('moar_scripts')
     @include('partials/assets-assigned')
-
-    <script>
-        //        $('#checkout_at').datepicker({
-        //            clearBtn: true,
-        //            todayHighlight: true,
-        //            endDate: '0d',
-        //            format: 'yyyy-mm-dd'
-        //        });
-
-
-    </script>
 @stop
diff --git a/resources/views/hardware/edit.blade.php b/resources/views/hardware/edit.blade.php
index 28b9a8438a..921a4542fd 100755
--- a/resources/views/hardware/edit.blade.php
+++ b/resources/views/hardware/edit.blade.php
@@ -114,28 +114,8 @@
             <div id="optional_details" class="col-md-12" style="display:none">
                 @include ('partials.forms.edit.name', ['translated_name' => trans('admin/hardware/form.name')])
                 @include ('partials.forms.edit.warranty')
-
-                <!-- Datepicker -->
-                <div class="form-group{{ $errors->has('next_audit_date') ? ' has-error' : '' }}">
-
-                    <label class="col-md-3 control-label" for="next_audit_date">
-                        {{ trans('general.next_audit_date') }}
-                    </label>
-
-                    <div class="input-group col-md-4">
-                        <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
-                            <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="next_audit_date" id="next_audit_date" value="{{ old('next_audit_date', $item->next_audit_date) }}" readonly style="background-color:inherit" maxlength="10">
-                            <span class="input-group-addon"><x-icon type="calendar" /></span>
-                        </div>
-                    </div>
-                    <div class="col-md-8 col-md-offset-3">
-                        {!! $errors->first('next_audit_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-                        <p class="help-block">{!! trans('general.next_audit_date_help') !!}</p>
-                    </div>
-
-                </div>
-
-
+                @include ('partials.forms.edit.datepicker', ['translated_name' => trans('admin/hardware/form.expected_checkin'),'fieldname' => 'expected_checkin'])
+                @include ('partials.forms.edit.datepicker', ['translated_name' => trans('general.next_audit_date'),'fieldname' => 'next_audit_date', 'help_text' => trans('general.next_audit_date_help')])
                 <!-- byod checkbox -->
                 <div class="form-group byod">
                     <div class="col-md-7 col-md-offset-3">
@@ -167,8 +147,8 @@
 
                 <div id='order_details' class="col-md-12" style="display:none">
                     @include ('partials.forms.edit.order_number')
-                    @include ('partials.forms.edit.purchase_date')
-                    @include ('partials.forms.edit.eol_date')
+                    @include ('partials.forms.edit.datepicker', ['translated_name' => trans('general.purchase_date'),'fieldname' => 'purchase_date'])
+                    @include ('partials.forms.edit.datepicker', ['translated_name' => trans('admin/hardware/form.eol_date'),'fieldname' => 'asset_eol_date'])
                     @include ('partials.forms.edit.supplier-select', ['translated_name' => trans('general.supplier'), 'fieldname' => 'supplier_id'])
 
                     @php
diff --git a/resources/views/layouts/default.blade.php b/resources/views/layouts/default.blade.php
index 4175cdf11a..69adec5ef4 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -1028,6 +1028,68 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
         <script nonce="{{ csrf_token() }}">
 
+            $.fn.datepicker.dates['{{ app()->getLocale() }}'] = {
+                days: [
+                    "{{ trans('datepicker.days.sunday') }}",
+                    "{{ trans('datepicker.days.monday') }}",
+                    "{{ trans('datepicker.days.tuesday') }}",
+                    "{{ trans('datepicker.days.wednesday') }}",
+                    "{{ trans('datepicker.days.thursday') }}",
+                    "{{ trans('datepicker.days.friday') }}",
+                    "{{ trans('datepicker.days.saturday') }}"
+                ],
+                daysShort: [
+                    "{{ trans('datepicker.short_days.sunday') }}",
+                    "{{ trans('datepicker.short_days.monday') }}",
+                    "{{ trans('datepicker.short_days.tuesday') }}",
+                    "{{ trans('datepicker.short_days.wednesday') }}",
+                    "{{ trans('datepicker.short_days.thursday') }}",
+                    "{{ trans('datepicker.short_days.friday') }}",
+                    "{{ trans('datepicker.short_days.saturday') }}"
+                ],
+                daysMin: [
+                    "{{ trans('datepicker.min_days.sunday') }}",
+                    "{{ trans('datepicker.min_days.monday') }}",
+                    "{{ trans('datepicker.min_days.tuesday') }}",
+                    "{{ trans('datepicker.min_days.wednesday') }}",
+                    "{{ trans('datepicker.min_days.thursday') }}",
+                    "{{ trans('datepicker.min_days.friday') }}",
+                    "{{ trans('datepicker.min_days.saturday') }}"
+                ],
+                months: [
+                    "{{ trans('datepicker.months.january') }}",
+                    "{{ trans('datepicker.months.february') }}",
+                    "{{ trans('datepicker.months.march') }}",
+                    "{{ trans('datepicker.months.april') }}",
+                    "{{ trans('datepicker.months.may') }}",
+                    "{{ trans('datepicker.months.june') }}",
+                    "{{ trans('datepicker.months.july') }}",
+                    "{{ trans('datepicker.months.august') }}",
+                    "{{ trans('datepicker.months.september') }}",
+                    "{{ trans('datepicker.months.october') }}",
+                    "{{ trans('datepicker.months.november') }}",
+                    "{{ trans('datepicker.months.december') }}",
+                ],
+                monthsShort:  [
+                    "{{ trans('datepicker.months_short.january') }}",
+                    "{{ trans('datepicker.months_short.february') }}",
+                    "{{ trans('datepicker.months_short.march') }}",
+                    "{{ trans('datepicker.months_short.april') }}",
+                    "{{ trans('datepicker.months_short.may') }}",
+                    "{{ trans('datepicker.months_short.june') }}",
+                    "{{ trans('datepicker.months_short.july') }}",
+                    "{{ trans('datepicker.months_short.august') }}",
+                    "{{ trans('datepicker.months_short.september') }}",
+                    "{{ trans('datepicker.months_short.october') }}",
+                    "{{ trans('datepicker.months_short.november') }}",
+                    "{{ trans('datepicker.months_short.december') }}",
+                ],
+                today: "{{ trans('datepicker.today') }}",
+                clear: "{{ trans('datepicker.clear') }}",
+                format: "yyyy-mm-dd",
+                weekStart: 0
+            };
+
             var clipboard = new ClipboardJS('.js-copy-link');
 
             clipboard.on('success', function(e) {
diff --git a/resources/views/licenses/edit.blade.php b/resources/views/licenses/edit.blade.php
index 092c323a62..7bb12728bc 100755
--- a/resources/views/licenses/edit.blade.php
+++ b/resources/views/licenses/edit.blade.php
@@ -78,7 +78,7 @@
 @include ('partials.forms.edit.supplier-select', ['translated_name' => trans('general.supplier'), 'fieldname' => 'supplier_id'])
 @include ('partials.forms.edit.order_number')
 @include ('partials.forms.edit.purchase_cost')
-@include ('partials.forms.edit.purchase_date')
+@include ('partials.forms.edit.datepicker', ['translated_name' => trans('general.purchase_date'),'fieldname' => 'purchase_date'])
 
 <!-- Expiration Date -->
 <div class="form-group {{ $errors->has('expiration_date') ? ' has-error' : '' }}">
diff --git a/resources/views/partials/forms/edit/datepicker.blade.php b/resources/views/partials/forms/edit/datepicker.blade.php
index d91659134e..74ec021e4b 100644
--- a/resources/views/partials/forms/edit/datepicker.blade.php
+++ b/resources/views/partials/forms/edit/datepicker.blade.php
@@ -2,11 +2,21 @@
 <div class="form-group{{ $errors->has($fieldname) ? ' has-error' : '' }}">
     <label for="{{ $fieldname }}" class="col-md-3 control-label">{{ $translated_name }}</label>
     <div class="input-group col-md-4">
-        <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
-            <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="{{ $fieldname }}" id="{{ $fieldname }}" value="{{ old($fieldname, ($item->{$fieldname}) ? date('Y-m-d', strtotime($item->{$fieldname})) : '') }}" readonly style="background-color:inherit" maxlength="10">
-            <span class="input-group-addon"><x-icon type="calendar" /></span>
-        </div>
+        <x-input.datepicker
+                name="{{ $fieldname }}"
+                value="{{ old($fieldname, ($item->{$fieldname}) ? date('Y-m-d', strtotime($item->{$fieldname})) : '') }}"
+                placeholder="{{ trans('general.select_date') }}"
+                required="{{ Helper::checkIfRequired($item, 'start_date') }}"
+        />
         {!! $errors->first($fieldname, '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
     </div>
+    @if  (isset($help_text))
+        <div class="col-md-8 col-md-offset-3">
+            <p class="help-block">
+                {!!  $help_text !!}
+            </p>
+        </div>
+    @endif
 </div>
 
+<!-- /Datepicker -->
\ No newline at end of file
diff --git a/resources/views/partials/forms/edit/eol_date.blade.php b/resources/views/partials/forms/edit/eol_date.blade.php
deleted file mode 100644
index 5efba06a85..0000000000
--- a/resources/views/partials/forms/edit/eol_date.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- EOL Date -->
-<div class="form-group {{ $errors->has('asset_eol_date') ? ' has-error' : '' }}">
-    <label for="asset_eol_date" class="col-md-3 control-label">{{ trans('admin/hardware/form.eol_date') }}</label>
-    <div class="input-group col-md-4">
-        <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
-            <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="asset_eol_date" id="asset_eol_date" readonly value="{{  old('asset_eol_date', optional($item->asset_eol_date)->format('Y-m-d') ?? $item->asset_eol_date ?? '')  }}"  style="background-color:inherit"  maxlength="20" />
-            <span class="input-group-addon"><x-icon type="calendar" /></span>
-        </div>
-        {!! $errors->first('asset_eol_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-    </div>
-</div>
diff --git a/resources/views/partials/forms/edit/purchase_date.blade.php b/resources/views/partials/forms/edit/purchase_date.blade.php
deleted file mode 100644
index f07387c309..0000000000
--- a/resources/views/partials/forms/edit/purchase_date.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Purchase Date -->
-<div class="form-group {{ $errors->has('purchase_date') ? ' has-error' : '' }}">
-   <label for="purchase_date" class="col-md-3 control-label">{{ trans('general.purchase_date') }}</label>
-   <div class="input-group col-md-4">
-        <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
-            <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="purchase_date" id="purchase_date" readonly value="{{  old('purchase_date', ($item->purchase_date) ? $item->purchase_date->format('Y-m-d') : '') }}" style="background-color:inherit">
-            <span class="input-group-addon"><x-icon type="calendar" /></span>
-       </div>
-       {!! $errors->first('purchase_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-   </div>
-</div>