Lineone - From Datepicker

Basic Datepricker

Code

The Datetimepicker is used to allow the user to select a date and time, and to display that date and time in the specified format. Flatpickr is a lightweight and powerful datetime picker.

                
  <label class="relative flex">
    <input
      x-init="$el._x_flatpickr = flatpickr($el)"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose date..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5 transition-colors duration-200"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </span>
  </label>

Custom Format

Code

The Datetimepicker is used to allow the user to select a date and time, and to display that date and time in the specified format. Flatpickr is a lightweight and powerful datetime picker.

                
  <label class="relative flex">
    <input
      x-init="$el._x_flatpickr = flatpickr($el,{altInput: true,altFormat: 'F j, Y',dateFormat: 'Y-m-d'})"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose date..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5 transition-colors duration-200"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </span>
  </label>

Disabled Date

Code

The Datetimepicker is used to allow the user to select a date and time, and to display that date and time in the specified format. Flatpickr is a lightweight and powerful datetime picker.

                
  <label class="relative flex">
    <input
      x-init="$el._x_flatpickr = flatpickr($el,{
              disable: [
                  function (date) {
                      return (date.getDay() === 0 || date.getDay() === 6);
                  }
              ],
              locale: {
                  firstDayOfWeek: 1 
              }
          })"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose date..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5 transition-colors duration-200"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </span>
  </label>

Multiple Date

Code

The Datetimepicker is used to allow the user to select a date and time, and to display that date and time in the specified format. Flatpickr is a lightweight and powerful datetime picker.

                
  <label class="relative flex">
    <input
      x-init="$el._x_flatpickr = flatpickr($el,{mode: 'multiple', dateFormat: 'Y-m-d',defaultDate: ['2022-10-10', '2022-10-12','2022-10-18'] })"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose date..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5 transition-colors duration-200"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </span>
  </label>

Date Range

Code

The Datetimepicker is used to allow the user to select a date and time, and to display that date and time in the specified format. Flatpickr is a lightweight and powerful datetime picker.

                
  <label class="relative flex">
    <input
      x-init="$el._x_flatpickr = flatpickr($el,{mode: 'range',dateFormat: 'Y-m-d',defaultDate: ['2016-10-10', '2016-10-20'] })"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose date..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5 transition-colors duration-200"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </span>
  </label>

External Elements

Code

The Datetimepicker is used to allow the user to select a date and time, and to display that date and time in the specified format. Flatpickr is a lightweight and powerful datetime picker.

                
  <div
    class="flex -space-x-px"
    x-init="$el._x_flatpickr = flatpickr($el,{wrap:true })"
  >
    <input
      data-input
      class="form-input w-full rounded-r-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose date"
      type="text"
    />
    <button
      data-toggle
      class="btn rounded-none bg-slate-150 px-3 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </button>
    <button
      data-clear
      class="btn rounded-r-none bg-error px-3 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </button>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Datepricker

Basic Datepricker

Custom Format

Disabled Date

Multiple Date

Date Range

External Elements