# Coreui giao diện admin sử dụng bootstrap 5 (ok)

### [Source code](https://drive.google.com/file/d/1WXn1PUg9zdF2gjxJviRkPkAYaOSDaOr4/view?usp=sharing) Laravel Admin CoreUi Laravel 5

### [Source Code Edited](https://drive.google.com/file/d/10W6cJAPO9ruDrheiseflTaawYpY4usB1/view?usp=sharing) Laravel Admin CoreUi Laravel 5 👌

### Làm theo mẫu admin coreui này: [Source code](https://drive.google.com/file/d/19qMhhY1n5_BIEfpcd9p38CFTM0ZEBhTF/view?usp=sharing)

### Chú ý: Tùy chỉnh @coreui để không bị ảnh hưởng khi update&#x20;

Chỉnh lại file C:\xampp82\htdocs\testfront\config\filesystems.php như này để có thể hoạt động tốt.

```php
'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
            'throw' => false,
],
```

Chỉnh lại type của uuid

<figure><img src="/files/PZlUWkYFXAd1umSKeyI6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/L9lPggb3abFmopHtspiJ" alt=""><figcaption></figcaption></figure>

**Thêm biến pink vào $button-variants**\
C:\xampp8\htdocs\testauth\public\src\scss\@coreui\coreui\scss\_variables.scss

<figure><img src="/files/GZPi9FvgdeDAArqkLbdF" alt=""><figcaption></figcaption></figure>

### Khắc phục Chú ý: Tùy chỉnh @coreui để không bị ảnh hưởng khi update

<figure><img src="/files/s4LrthXwGyKYxtnujfWD" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ZtodyPZpT3syS6NU1uAS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/pi4GbD4tGsj7Y5nkxefU" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1S2UWZaWS2dWbFrIBHpu" alt=""><figcaption></figcaption></figure>

### 1. Sử dụng mặc định

<figure><img src="/files/q2i617D9OD1IzZTx4qbF" alt=""><figcaption></figcaption></figure>

{% file src="/files/8NFNgIJNWdoxFoOph3RC" %}

Chú ý: Chúng ta có thể tùy chỉnh giao diện trong&#x20;

<figure><img src="/files/tORdpvqgpfohSrqZktEE" alt=""><figcaption></figcaption></figure>

### 2. Sử dụng tùy biến tích hợp datetime

<figure><img src="/files/lucKsPXrZqp65NPUr9LV" alt=""><figcaption></figcaption></figure>

{% embed url="<https://raw.githubusercontent.com/xdan/datetimepicker/master/build/jquery.datetimepicker.full.js>" %}

{% file src="/files/skVB2qKRHmAxZRdHyqxf" %}

{% file src="/files/m2Emhj0XJnB1cG9ecB5e" %}

{% file src="/files/5bVKu7cgdzCkW2W1Zx6Y" %}

{% file src="/files/Xy5z4srNVBomVzgZ20Fv" %}

{% file src="/files/ZdL0RAAIFDFsOG6Kxx2Z" %}

C:\xampp8\htdocs\testauth\public\src\views\datetime.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css">
    <style type="text/css">
      .custom-date-style {
        background-color: red !important;
      }
      .input-wide {
        width: 500px;
      }
    </style>
  </head>
  <body>
    <p><a href="http://xdsoft.net/jqplugins/datetimepicker/">Homepage</a></p>
    <h3>DateTimePicker Test</h3>
    <input type="text" value="" id="datetimepicker"><br><br>
    <h3>DateTimePickers selected by class</h3>
    <input type="text" class="some_class" value="" id="some_class_1">
    <input type="text" class="some_class" value="" id="some_class_2">
    <h3>Mask DateTimePicker</h3>
    <input type="text" value="" id="datetimepicker_mask"><br><br>
    <h3>TimePicker</h3>
    <input type="text" id="datetimepicker1"><br><br>
    <h3>DatePicker</h3>
    <input type="text" id="datetimepicker2"><br><br>
    <h3>Inline DateTimePicker</h3>
    <!--<div id="console" style="background-color:#fff;color:red">sdfdsfsdf</div>-->
    <input type="text" id="datetimepicker3"><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"><br><br>
    <h3>Button Trigger</h3>
    <input type="text" value="2013/12/03 18:00" id="datetimepicker4"><input id="open" type="button" value="open"><input id="close" type="button" value="close"><input id="reset" type="button" value="reset">
    <h3>TimePicker allows time</h3>
    <input type="text" id="datetimepicker5"><br><br>
    <h3>Destroy DateTimePicker</h3>
    <input type="text" id="datetimepicker6"><input id="destroy" type="button" value="destroy">
    <h3>Set options runtime DateTimePicker</h3>
    <input type="text" id="datetimepicker7">
    <p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
    <h3>onGenerate</h3>
    <input type="text" id="datetimepicker8">
    <h3>disable all weekend</h3>
    <input type="text" id="datetimepicker9">
    <h3>Default date and time </h3>
    <input type="text" id="default_datetimepicker">
    <h3>Show inline</h3>
    <a href="javascript:void(0)" onclick="var si = document.getElementById('show_inline').style; si.display = (si.display=='none')?'block':'none';return false; ">Show/Hide</a>
    <div id="show_inline" style="display:none">
      <input type="text" id="datetimepicker10">
    </div>
    <h3>Disable Specific Dates</h3>
    <p>Disable the dates 2 days from now.</p>
    <input type="text" id="datetimepicker11">
    <h3>Custom Date Styling</h3>
    <p>Make the background of the date 2 days from now bright red.</p>
    <input type="text" id="datetimepicker12">
    <h3>Dark theme</h3>
    <p>thank for this <a href="https://github.com/lampslave">https://github.com/lampslave</a></p>
    <input type="text" id="datetimepicker_dark">
    <h3>Date time format and locale</h3>
    <p></p>
    <select id="datetimepicker_format_locale">
      <option value="en">English</option>
      <option value="de">German</option>
      <option value="ru">Russian</option>
      <option value="uk">Ukrainian</option>
      <option value="fr">French</option>
      <option value="es">Spanish</option>
    </select>
    <input type="text" value="D, l, M, F, Y-m-d H:i:s" id="datetimepicker_format_value">
    <input type="button" value="applay =>" id="datetimepicker_format_change">
    <input type="text" id="datetimepicker_format" class="input input-wide">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script src="js/jquery.datetimepicker.full.min.js"></script>
    <script type="text/javascript">
      $.datetimepicker.setLocale('en');
      $('#datetimepicker_format').datetimepicker({
        value: '2015/04/15 05:03',
        format: $("#datetimepicker_format_value").val()
      });
      console.log($('#datetimepicker_format').datetimepicker('getValue'));
      $("#datetimepicker_format_change").on("click", function(e) {
        $("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({
          format: $("#datetimepicker_format_value").val()
        });
      });
      $("#datetimepicker_format_locale").on("change", function(e) {
        $.datetimepicker.setLocale($(e.currentTarget).val());
      });
      $('#datetimepicker').datetimepicker({
        dayOfWeekStart: 1,
        lang: 'en',
        disabledDates: ['1986/01/08', '1986/01/09', '1986/01/10'],
        startDate: '1986/01/05'
      });
      $('#datetimepicker').datetimepicker({
        value: '2015-04-15 05:03:05',
        step: 10,
        format: 'd-m-Y H:i:s',
      });
      $('.some_class').datetimepicker();
      $('#default_datetimepicker').datetimepicker({
        formatTime: 'H:i',
        formatDate: 'd.m.Y',
        //defaultDate:'8.12.1986', // it's my birthday
        defaultDate: '+03.01.1970', // it's my birthday
        defaultTime: '10:00',
        timepickerScrollbar: false
      });
      $('#datetimepicker10').datetimepicker({
        step: 5,
        inline: true
      });
      $('#datetimepicker_mask').datetimepicker({
        mask: '9999/19/39 29:59'
      });
      $('#datetimepicker1').datetimepicker({
        datepicker: false,
        format: 'H:i',
        step: 5
      });
      $('#datetimepicker2').datetimepicker({
        yearOffset: 222,
        lang: 'ch',
        timepicker: false,
        format: 'd/m/Y',
        formatDate: 'Y/m/d',
        minDate: '-1970/01/02', // yesterday is minimum date
        maxDate: '+1970/01/02' // and tommorow is maximum date calendar
      });
      $('#datetimepicker3').datetimepicker({
        inline: true
      });
      $('#datetimepicker4').datetimepicker();
      $('#open').click(function() {
        $('#datetimepicker4').datetimepicker('show');
      });
      $('#close').click(function() {
        $('#datetimepicker4').datetimepicker('hide');
      });
      $('#reset').click(function() {
        $('#datetimepicker4').datetimepicker('reset');
      });
      $('#datetimepicker5').datetimepicker({
        datepicker: false,
        allowTimes: ['12:00', '13:00', '15:00', '17:00', '17:05', '17:20', '19:00', '20:00'],
        step: 5
      });
      $('#datetimepicker6').datetimepicker();
      $('#destroy').click(function() {
        if ($('#datetimepicker6').data('xdsoft_datetimepicker')) {
          $('#datetimepicker6').datetimepicker('destroy');
          this.value = 'create';
        } else {
          $('#datetimepicker6').datetimepicker();
          this.value = 'destroy';
        }
      });
      var logic = function(currentDateTime) {
        if (currentDateTime && currentDateTime.getDay() == 6) {
          this.setOptions({
            minTime: '11:00'
          });
        } else
          this.setOptions({
            minTime: '8:00'
          });
      };
      $('#datetimepicker7').datetimepicker({
        onChangeDateTime: logic,
        onShow: logic
      });
      $('#datetimepicker8').datetimepicker({
        onGenerate: function(ct) {
          $(this).find('.xdsoft_date')
            .toggleClass('xdsoft_disabled');
        },
        minDate: '-1970/01/2',
        maxDate: '+1970/01/2',
        timepicker: false
      });
      $('#datetimepicker9').datetimepicker({
        onGenerate: function(ct) {
          $(this).find('.xdsoft_date.xdsoft_weekend')
            .addClass('xdsoft_disabled');
        },
        weekends: ['01.01.2014', '02.01.2014', '03.01.2014', '04.01.2014', '05.01.2014', '06.01.2014'],
        timepicker: false
      });
      var dateToDisable = new Date();
      dateToDisable.setDate(dateToDisable.getDate() + 2);
      $('#datetimepicker11').datetimepicker({
        beforeShowDay: function(date) {
          if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
            return [false, ""]
          }
          return [true, ""];
        }
      });
      $('#datetimepicker12').datetimepicker({
        beforeShowDay: function(date) {
          if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
            return [true, "custom-date-style"];
          }
          return [true, ""];
        }
      });
      $('#datetimepicker_dark').datetimepicker({
        theme: 'dark'
      })
    </script>
  </body>
</html>
```

{% file src="/files/9kPTi9kQJlZVgge7bmqq" %}

{% file src="/files/0x1nj5a29floaiEGW2if" %}

{% file src="/files/NBLjvfkgVwnjfaMS8KBa" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnhtml.gitbook.io/project/coreui-giao-dien-admin-su-dung-bootstrap-5-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
