DatePicker

TsgcHTMLComponent_DatePicker — render a native HTML5 date, time or datetime input with optional min and max bounds, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_DatePicker

An input component that emits a Bootstrap form-control of HTML5 type date, time or datetime-local. Pick the Mode, set the bounds, then read the HTML property.

Component class

TsgcHTMLComponent_DatePicker

Renders

Native HTML5 date/time <input>

Languages

Delphi, C++ Builder, .NET

Create it, set the mode, render it

Choose Mode, set Name, Label_ and the MinDate/MaxDate bounds, then read HTML — or call the static Build helper for a one-liner.

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");

Key properties & methods

The members you reach for most often.

Mode

Mode (TsgcHTMLDatePickerMode) selects dmDate, dmTime or dmDateTime, emitting an HTML5 date, time or datetime-local input.

Field

Name sets the input's name; Label_ renders a form-label; Value pre-fills the field; Placeholder shows hint text.

Bounds

MinDate and MaxDate constrain the selectable range via the native min and max attributes; Required marks the field mandatory.

Static helper

Build(name, mode, label, value) returns the markup in one line without managing an instance.

Output

HTML returns the mb-3 wrapper with the label and the typed form-control; DatePickerID sets the element id.

Layout

Inherited Section, ColumnWidth and RowGroup place the field on a TsgcHTMLPageBuilder grid.

Keep exploring

All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and add date and time pickers to your Delphi, C++ Builder or .NET web app.