DatePicker
TsgcHTMLComponent_DatePicker — Delphi、C++ Builder、.NET で、任意の最小値と最大値の範囲を指定して、ネイティブの HTML5 日付、時刻、または日時の入力欄をレンダリングします。
TsgcHTMLComponent_DatePicker — Delphi、C++ Builder、.NET で、任意の最小値と最大値の範囲を指定して、ネイティブの HTML5 日付、時刻、または日時の入力欄をレンダリングします。
HTML5 の date、time、または datetime-local 型の Bootstrap form-control を出力する入力コンポーネントです。Mode を選択し、範囲を設定してから、HTML プロパティを読み取ります。
TsgcHTMLComponent_DatePicker
ネイティブの HTML5 日付/時刻 <input>
Delphi, C++ Builder, .NET
Mode を選択し、Name、Label_、そして MinDate/MaxDate の範囲を設定してから、HTML を読み取ります — または、静的な Build ヘルパーを呼び出して一行で記述します。
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");
最もよく使うメンバーです。
Mode(TsgcHTMLDatePickerMode)は dmDate、dmTime、または dmDateTime を選択し、HTML5 の date、time、または datetime-local 入力欄を出力します。
Name は入力欄の name を設定し、Label_ は form-label をレンダリングし、Value はフィールドに初期値を設定し、Placeholder はヒントテキストを表示します。
MinDate と MaxDate は、ネイティブの min および max 属性を介して選択可能な範囲を制限します。Required はフィールドを必須としてマークします。
Build(name, mode, label, value) は、インスタンスを管理せずに一行でマークアップを返します。
HTML は、ラベルと型指定された form-control を含む mb-3 ラッパーを返します。DatePickerID は要素の id を設定します。
継承された Section、ColumnWidth、RowGroup によって、TsgcHTMLPageBuilder のグリッド上にフィールドを配置します。