DevExpress の ASPxCalendar での複数選択の日付取得（JavaScript）

DevExpress の ASPxCalendar での複数選択の日付取得（JavaScript）のサンプルです。

複数選択は事前に有効にする必要があります。
有効にする場合は、過去ブログの「DevExpress の ASPxCalendar での複数選択有効設定」を参照して下さい。

現状の画面デザインはこのようになっています。

「ASPxCalendar」オブジェクトのプロパティを変更していきます。
※プロパティ画像は「グループ表示」

＜複数選択の日付取得（JavaScript）＞

「>」をクリックします。

↓

「Designer…」を選択します。

↓

「SelectionChanged」を選択し、複数選択日付情報を取得してメッセージ表示の処理を記載します。

【生成PG】

<form id="form1" runat="server">
<div>
    <dx:ASPxCalendar ID="ASPxCalendar1" runat="server" Theme="RedWine" 
        DayNameFormat="Full" HighlightToday="False" SelectedDate="2016-01-01" 
        ShowWeekNumbers="False" ClearButtonText="選択解除" TodayButtonText="本日選択" 
        Caption="日付選択" Font-Bold="False" EnableMultiSelect="True">
        <ClientSideEvents SelectionChanged="function(s, e) {
        var myString = '';
        for(ii = 0; ii<s.GetSelectedDates().length; ii++){
            var mySelDate = s.GetSelectedDates()[ii];
            myString  = myString  + mySelDate .getFullYear() + '年';
            myString  = myString  + mySelDate .getMonth()+1 + '月';
            myString  = myString  + mySelDate .getDate() + '日';
            myString  = myString  + '¥n';
        }

        alert(myString);
        }" />
        <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" />
        <CaptionStyle Font-Bold="True" Font-Size="Medium">
        </CaptionStyle>
    </dx:ASPxCalendar>
</div>
</form>

<div>

<dx:ASPxCalendar ID="ASPxCalendar1" runat="server" Theme="RedWine"

DayNameFormat="Full" HighlightToday="False" SelectedDate="2016-01-01"

ShowWeekNumbers="False" ClearButtonText="選択解除" TodayButtonText="本日選択"

Caption="日付選択" Font-Bold="False" EnableMultiSelect="True">

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

var myString = '';

for(ii = 0; ii<s.GetSelectedDates().length; ii++){

var mySelDate = s.GetSelectedDates()[ii];

myString = myString + mySelDate .getFullYear() + '年';

myString = myString + mySelDate .getMonth()+1 + '月';

myString = myString + mySelDate .getDate() + '日';

myString = myString + '¥n';

}

alert(myString);

}" />

</CaptionStyle>

</dx:ASPxCalendar>

</div>

</form>

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

↓

無事にカレンダー（ASPxCalendar）の複数選択の日付取得が出来ました。

関連記事はこちら:

DevExpress の ASPxCalendar での単数選択の日付取得（JavaScript） DevExpress の ASPxCalendar での単数選択の日付取得（JavaScript）のサンプルです。現状の画面デザインはこのようになっています。「ASPxCalendar」オブジェクトのプロパティを変更 ......
DevExpress の ASPxCalendar のまとめ DevExpress の ASPxCalendar のまとめです。「ASPxCalendar」は、想像通り普通です。使う場面を考えると、企業等の年間勤務カレンダー画面とかでしょう。日付の入力ならば、「ASPxDat ......
DevExpress の ASPxDateEdit での特定の日を選択不可設定（カレンダー部分）（JavaScript） DevExpress の ASPxDateEdit での特定の日を選択不可設定（カレンダー部分）（JavaScript）のサンプルです。現状の画面デザインはこのようになっています。「ASPxDateEdit」オブジェ ......
DevExpress の ASPxCalendar での特定の日を選択不可設定（JavaScript） DevExpress の ASPxCalendar での特定の日を選択不可設定（JavaScript）のサンプルです。現状の画面デザインはこのようになっています。「ASPxCalendar」オブジェクトのプロパティを ......
DevExpress の ASPxGridLookup でのデータ取得（1カラム）（JavaScript） DevExpress の ASPxGridLookup でのデータ取得（1カラム）（JavaScript）のサンプルです。今回は、リスト閉じるイベントで選択行のデータ（1カラム）を取得します。現状の画面デザインはこの ......
DevExpress の ASPxButton から ASPxGridView の「更新キャンセル」実行設定 DevExpress のボタンからグリッドの「更新キャンセル」実行設定のサンプルです。事前の設定準備が必要ですので、先日の実施準備を行っておいて下さい。別画面でリンク表示設定する内容は3点です。 1点目：ボタンを配 ......
DevExpress の ASPxCalendar での本日ボタンのタイトル設定 DevExpress の ASPxCalendar での本日ボタンのタイトル設定のサンプルです。 DevExpress が自動で日本語に変換してくれますが、分かりやすい日本語に設定します。 ※今回の日本語自動変換は、単 ......
DevExpress の ASPxPopupControl での表示位置設定（縦）追加 DevExpress の ASPxPopupControl での表示位置設定（縦）追加のサンプルです。今回は、ボタンを中心にして表示位置を設定します。「ASPxPopupControl」の表示位置設定（縦）で画面中央 ......
DevExpress の ASPxPopupControl でのモーダル設定 DevExpress の ASPxPopupControl でのモーダル設定のサンプルです。デフォルトではモードレス設定ですので、元画面の操作が可能です。今回は、モーダル設定を行い、元画面の操作を不可能にします。現 ......
DevExpress の ASPxMemo での入力文字列取得（JavaScript） DevExpress の ASPxMemo での入力文字列取得（JavaScript）のサンプルです。現状の画面デザインはこのようになっています。＜入力文字列取得（JavaScript）＞「Validation」イ ......

投稿タグ: ASPxCalendar, JavaScript

MENU

最近の投稿

人気記事