DevExpress の ASPxDateEdit でのボタン時間変更(JavaScript)のサンプルです。

実際の画面はこのような感じです。
正直時間だけなら「ASPxTimeEdit」を使えば簡単でいいのですが、
「ASPxDateEdit」でもカスタマイズすると可能な為に作成してみました。

20160513_01

サンプル作成までの大きな手順は2点です。
・ASPxDateEdit のドロップダウン無効
・ASPxDateEdit の表示フォーマット変更
・ASPxDateEdit 内にボタン生成
・ボタンイベントで時間変更

他は、ASPxDateEdit のサイズ、読み取り専用等の細かい変更

では、手順を説明していきます。

<ボタン時間変更(JavaScript)>

・ASPxDateEdit のドロップダウン無効

ドロップダウン無効は、過去ブログの「DevExpress の ASPxDateEdit での入力のみ設定(選択不可)」を参照して下さい。

20160513_02

・ASPxDateEdit の表示フォーマット変更

表示フォーマット変更は、過去ブログの「DevExpress の ASPxDateEdit での表示フォーマット設定(ユーザー定義)」を参照して下さい。

20160513_03

・ASPxDateEdit 内にボタン生成(6個)

<前時(位置を左設定)>

「Designer」を開きます。

20160513_04

「Add」ボタンでボタンを追加します。

20160513_05

ボタンの位置と表示名を設定します。

20160513_06

<前分(位置を左設定)>

20160513_07

<前秒(位置を左設定)>

20160513_08

<後時>

20160513_09

<後分>

20160513_10

<後秒>

20160513_11

・ボタンイベントで時間変更

各ボタンのインデックスに対して、処理を作成します。
今回は、時間、分、秒に対して+1、-1の設定です。

20160513_12

【生成PG】

それでは、実行して動作確認を行います。

20160513_01

「前時」ボタンをクリックします。

20160513_13

「前分」ボタンをクリックします。

20160513_14

「前秒」ボタンをクリックします。

20160513_15

「後秒」ボタンをクリックします。

20160513_14

「後分」ボタンをクリックします。

20160513_13

「後時」ボタンをクリックします。

20160513_01

無事に日付エディット(ASPxDateEdit)のボタン時間変更が出来ました。