Date Picker

Date selection components

Preview

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.DatePickerComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :value, fn -> "" end)
    assigns = assign_new(assigns, :placeholder, fn -> "Select date" end)

    ~H"""
    <div class="relative">
      <div class="relative">
        <input
          type="date"
          value={@value}
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
          placeholder={@placeholder}
        />
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
          </svg>
        </div>
      </div>
    </div>
    """
  end
end