Date Picker
Date selection components
Preview
Props Editor
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