DevExpress の ASPxDateEdit でのカレンダー表示（JavaScript）

DevExpress の ASPxDateEdit でのカレンダー表示（JavaScript）のサンプルです。

実際の画面はこのような感じです。
※カレンダー表示ボタンを非表示にしています。

カレンダー表示ボタンをわざわざクリックしなくても、
自動でカレンダー表示を行います。

＜カレンダー表示（JavaScript）＞

「s.ShowDropDown()」でカレンダー表示を行います。

【注意】
「GotFocus（フォーカスが来たとき）」は「s.ShowDropDown()」のみではカレンダーが表示されません。
ですが、「window.setTimeout」を使用してカレンダー表示のタイミングを遅らせるとカレンダーが表示されます。
推測ですが、「HelpText」関連の「DisplayMode=”Popup”」で処理が競合しているからだと思います。

【生成PG】

<form id="form1" runat="server">
<div>
    <dx:ASPxDateEdit ID="ASPxDateEdit1" runat="server" Date="2016-02-01" 
        Theme="RedWine" Caption="日付入力／選択" Font-Bold="False" 
        HelpText="※自動カレンダー表示" DisplayFormatString="yyyy年MM月dd日" 
        EditFormat="Custom" EditFormatString="yyyy年MM月dd日" MaxDate="2017-01-10" 
        MinDate="2016-01-01">
        <CalendarProperties DayNameFormat="Full" HighlightToday="False">
            <ControlStyle Wrap="False" />
            <Style Wrap="False">
            </Style>
        </CalendarProperties>
        <ClientSideEvents GotFocus="function(s, e) {
            window.setTimeout(function(){
                s.ShowDropDown();
            }, 10);
        }" />
        <DropDownButton Visible="False">
        </DropDownButton>
        <ClearButton DisplayMode="Always">
        </ClearButton>
        <HelpTextSettings DisplayMode="Popup">
        </HelpTextSettings>
        <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" />
        <CaptionStyle Font-Bold="True" Font-Size="Medium">
        </CaptionStyle>
    </dx:ASPxDateEdit>
</div>
</form>

<div>

<dx:ASPxDateEdit ID="ASPxDateEdit1" runat="server" Date="2016-02-01"

Theme="RedWine" Caption="日付入力／選択" Font-Bold="False"

HelpText="※自動カレンダー表示" DisplayFormatString="yyyy年MM月dd日"

EditFormat="Custom" EditFormatString="yyyy年MM月dd日" MaxDate="2017-01-10"

MinDate="2016-01-01">

</Style>

</CalendarProperties>

<ClientSideEvents GotFocus="function(s, e) {

window.setTimeout(function(){

s.ShowDropDown();

}, 10);

}" />

</DropDownButton>

</ClearButton>

</HelpTextSettings>

</CaptionStyle>

</dx:ASPxDateEdit>

</div>

</form>

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

↓

無事に日付エディット（ASPxDateEdit）のフォーカスのタイミングでカレンダーが表示されました。

ちなみに、カレンダー非表示は「s.HideDropDown()」を使用します。

MENU

最近の投稿

人気記事

MENU

DevExpress の ASPxDateEdit でのカレンダー表示（JavaScript）

関連記事はこちら:

最近の投稿

人気記事