DatePicker

TsgcHTMLComponent_DatePicker — Delphi、C++ Builder、.NET で、任意の最小値と最大値の範囲を指定して、ネイティブの HTML5 日付、時刻、または日時の入力欄をレンダリングします。

TsgcHTMLComponent_DatePicker

HTML5 の datetime、または datetime-local 型の Bootstrap form-control を出力する入力コンポーネントです。Mode を選択し、範囲を設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_DatePicker

レンダリング内容

ネイティブの HTML5 日付/時刻 <input>

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

作成し、モードを設定し、レンダリングする

Mode を選択し、NameLabel_、そして 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

ModeTsgcHTMLDatePickerMode)は dmDatedmTime、または dmDateTime を選択し、HTML5 の datetime、または datetime-local 入力欄を出力します。

Field

Name は入力欄の name を設定し、Label_form-label をレンダリングし、Value はフィールドに初期値を設定し、Placeholder はヒントテキストを表示します。

Bounds

MinDateMaxDate は、ネイティブの min および max 属性を介して選択可能な範囲を制限します。Required はフィールドを必須としてマークします。

Static helper

Build(name, mode, label, value) は、インスタンスを管理せずに一行でマークアップを返します。

Output

HTML は、ラベルと型指定された form-control を含む mb-3 ラッパーを返します。DatePickerID は要素の id を設定します。

Layout

継承された SectionColumnWidthRowGroup によって、TsgcHTMLPageBuilder のグリッド上にフィールドを配置します。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET の Web アプリに日付と時刻のピッカーを追加しましょう。