DevExpress の ASPxDateEdit でのボタン日付変更のサンプルです。
実際の画面はこのような感じです。
サンプル作成までの大きな手順は2点です。
・ASPxDateEdit 内にボタン生成
・ボタンイベントで日付変更
他は、ASPxDateEdit のサイズ、読み取り専用等の細かい変更
では、手順を説明していきます。
＜ボタン日付変更（JavaScript）＞
・ASPxDateEdit 内にボタン生成（6個）
前年（位置を左設定）
前月（位置を左設定）
前日（位置を左設定）
次日
次月
次年
・ボタンイベントで日付変更
【生成PG】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<form id="form1" runat="server"> <div> <dx:ASPxDateEdit ID="ASPxDateEdit1" runat="server" Date="2016-02-01" Theme="RedWine" Caption="日付ボタン選択" Font-Bold="False" ClientInstanceName="SelDateEdit" Width="300px" HorizontalAlign="Center" ReadOnly="True"> <ClientSideEvents ButtonClick="function(s, e) { var myDate = SelDateEdit.GetDate(); switch (e.buttonIndex) { case 0: myDate.setYear(myDate.getFullYear() - 1); break; case 1: myDate.setMonth(myDate.getMonth() - 1); break; case 2: myDate.setDate(myDate.getDate() - 1); break; case 3: myDate.setDate(myDate.getDate() + 1); break; case 4: myDate.setMonth(myDate.getMonth() + 1); break; case 5: myDate.setYear(myDate.getFullYear() + 1); break; }; SelDateEdit.SetDate(myDate); }" /> <DropDownButton Visible="False"> </DropDownButton> <Buttons> <dx:EditButton Text="前年" Position="Left"> </dx:EditButton> <dx:EditButton Text="前月" Position="Left"> </dx:EditButton> <dx:EditButton Text="前日" Position="Left"> </dx:EditButton> <dx:EditButton Text="次日"> </dx:EditButton> <dx:EditButton Text="次月"> </dx:EditButton> <dx:EditButton Text="次年"> </dx:EditButton> </Buttons> <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" /> <CaptionStyle Font-Bold="True" Font-Size="Medium"> </CaptionStyle> </dx:ASPxDateEdit> </div> </form> |
それでは、実行して動作確認を行います。
↓
「前年」ボタンをクリックします。
↓
「前月」ボタンをクリックします。
↓
「前日」ボタンをクリックします。
↓
「次日」ボタンをクリックします。
↓
「次月」ボタンをクリックします。
↓
「次年」ボタンをクリックします。
無事に日付エディット（ASPxDateEdit）のボタン日付変更が出来ました。
- 投稿タグ
- ASPxDateEdit, JavaScript
