Componente DatePicker — sgcHTML

De un vistazo

TsgcHTMLComponent_DatePicker

Un componente de input que genera un form-control de Bootstrap de tipo HTML5 date, time o datetime-local. Elige el Mode, define los límites y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_DatePicker

Genera

<input> nativo de fecha/hora de HTML5

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, define el modo, genéralo

Elige Mode, define Name, Label_ y los límites MinDate/MaxDate, y luego lee HTML — o llama al método estático Build para hacerlo en una sola línea.

uses
  sgcHTML_Component_DatePicker;

var
  oDate: TsgcHTMLComponent_DatePicker;
begin
  oDate := TsgcHTMLComponent_DatePicker.Create(nil);
  try
    oDate.Mode := dmDate;
    oDate.Name := 'booking';
    oDate.Label_ := 'Booking date';
    oDate.MinDate := '2026-01-01';
    oDate.MaxDate := '2026-12-31';
    oDate.Required := True;

    WebModule.Response := oDate.HTML;   // <input type="date">
  finally
    oDate.Free;
  end;
end;

// Or the static one-liner (name, mode, label, value):
Result := TsgcHTMLComponent_DatePicker.Build('booking', dmDate, 'Booking date');

// includes: sgcHTML_Component_DatePicker.hpp

TsgcHTMLComponent_DatePicker *oDate = new TsgcHTMLComponent_DatePicker(NULL);
try
{
  oDate->Mode = dmDate;
  oDate->Name = "booking";
  oDate->Label_ = "Booking date";
  oDate->MinDate = "2026-01-01";
  oDate->MaxDate = "2026-12-31";
  oDate->Required = true;

  String html = oDate->HTML;   // <input type="date">
}
__finally
{
  delete oDate;
}

// Or the static one-liner:
String html = TsgcHTMLComponent_DatePicker::Build("booking", dmDate, "Booking date");

using esegece.sgcWebSockets;

var date = new TsgcHTMLComponent_DatePicker();
date.Mode = TsgcHTMLDatePickerMode.dmDate;
date.Name = "booking";
date.Label_ = "Booking date";
date.MinDate = "2026-01-01";
date.MaxDate = "2026-12-31";
date.Required = true;

string html = date.HTML;   // <input type="date">

// Or the static one-liner:
string html2 = TsgcHTMLComponent_DatePicker.Build("booking", TsgcHTMLDatePickerMode.dmDate, "Booking date");

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Modo

Mode (TsgcHTMLDatePickerMode) elige dmDate, dmTime o dmDateTime, generando un input date, time o datetime-local de HTML5.

Campo

Name define el name del input; Label_ genera un form-label; Value rellena el campo de antemano; Placeholder muestra texto de ayuda.

Límites

MinDate y MaxDate restringen el rango seleccionable mediante los atributos nativos min y max; Required marca el campo como obligatorio.

Método estático

Build(name, mode, label, value) devuelve el marcado en una línea sin gestionar una instancia.

Salida

HTML devuelve el contenedor mb-3 con la etiqueta y el form-control tipado; DatePickerID define el id del elemento.

Disposición

Las propiedades heredadas Section, ColumnWidth y RowGroup colocan el campo en una cuadrícula TsgcHTMLPageBuilder.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

DatePicker