入力補助機能 - ドロップダウン機能 -

日付時刻、日付、時刻、数値コントロールでは、カレンダーや電卓だけではなく、日付や時刻の領域をスクロールすることで入力できる日付時刻ピッカーや、数字入力に特化した数値パットをドロップダウンとして使用できます。
なお、日付時刻ピッカーでの値選択のスクロールは、マウスホイールまたはタッチによるスワイプ操作の両方が可能です。

日付時刻: 時刻:
日付: 数値:
日付時刻   
日付
時刻
数値

ソースコード

別ウィンドウで表示
using GrapeCity.Web.Input.IMDate;
using GrapeCity.Web.Input.IMNumber;
using System;

public partial class Input_DropDownObject : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        // ドロップダウン表示するオブジェクトを設定します。
        GcDateTime1.DropDown.DropDownType = (DateDropDownType)DropDownList1.SelectedIndex;
        GcDate1.DropDown.DropDownType = (DateDropDownType)DropDownList2.SelectedIndex;
        GcTime1.DropDown.DropDownType = (TimeDropDownType)DropDownList3.SelectedIndex;
        GcNumber1.DropDown.DropDownType = (NumberDropDownType)DropDownList4.SelectedIndex;

        // 日付時刻ピッカーに表示する内容を設定します。
        if (CheckBoxList1.Items[0].Selected && CheckBoxList1.Items[1].Selected)
        {
            GcDateTime1.DropDownPicker.ShowPickers = PickerDisplayOptions.Both;
        }
        else if (CheckBoxList1.Items[0].Selected && !CheckBoxList1.Items[1].Selected)
        {
            GcDateTime1.DropDownPicker.ShowPickers = PickerDisplayOptions.DatePicker;
        }
        else if (!CheckBoxList1.Items[0].Selected && CheckBoxList1.Items[1].Selected)
        {
            GcDateTime1.DropDownPicker.ShowPickers = PickerDisplayOptions.TimePicker;
        }
    }
}
Imports GrapeCity.Web.Input.IMDate

Partial Class Input_DropDownObject
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        ' ドロップダウン表示するオブジェクトを設定します。
        GcDateTime1.DropDown.DropDownType = DropDownList1.SelectedIndex
        GcDate1.DropDown.DropDownType = DropDownList2.SelectedIndex
        GcTime1.DropDown.DropDownType = DropDownList3.SelectedIndex
        GcNumber1.DropDown.DropDownType = DropDownList4.SelectedIndex

        ' 日付時刻ピッカーに表示する内容を設定します。
        If CheckBoxList1.Items(0).Selected And CheckBoxList1.Items(1).Selected Then
            GcDateTime1.DropDownPicker.ShowPickers = PickerDisplayOptions.Both
        ElseIf CheckBoxList1.Items(0).Selected And Not CheckBoxList1.Items(1).Selected Then
            GcDateTime1.DropDownPicker.ShowPickers = PickerDisplayOptions.DatePicker
        ElseIf Not CheckBoxList1.Items(0).Selected And CheckBoxList1.Items(1).Selected Then
            GcDateTime1.DropDownPicker.ShowPickers = PickerDisplayOptions.TimePicker
        End If
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Input_DropDownObject, App_Web_fud0ams1" theme="SkinFile" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMExtenders" tagprefix="im_extenders" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // 日付時刻コントロールのドロップダウンオブジェクトを設定します。
        function SetDateTime(type) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcDateTime1.ClientID%>").SetDropDownType(type);

            if (type == "picker") {
                document.getElementById("<% =CheckBoxList1.ClientID %>").disabled = "";
            }
            else {
                document.getElementById("<% =CheckBoxList1.ClientID %>").disabled = "disabled";
            }
        }

        // 日付時刻コントロールに日付時刻ピッカーを表示するときの表示内容を設定します。
        function ShowTab(obj) {
            if (!document.getElementById("isClient").checked) return;

            var picker = FindIMControl("<% =GcDateTime1.ClientID %>").GetDropDownPicker();
            var checkbox = obj.getElementsByTagName("input");

            if (!checkbox[0].checked && !checkbox[1].checked) {
                return;
            }
            else if (checkbox[0].checked && checkbox[1].checked) {
                picker.SetShowPickers("both");
            }
            else if (checkbox[0].checked && !checkbox[1].checked) {
                picker.SetShowPickers("datepicker");
            }
            else if (!checkbox[0].checked && checkbox[1].checked) {
                picker.SetShowPickers("timepicker");
            }
        }

        // 日付コントロールのドロップダウンオブジェクトを設定します。
        function SetDate(type) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcDate1.ClientID%>").SetDropDownType(type);
        }

        // 時刻コントロールのドロップダウンオブジェクトを設定します。
        function SetTime(type) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcTime1.ClientID%>").SetDropDownType(type);
        }

        // 数値コントロールのドロップダウンオブジェクトを設定します。
        function SetNumber(type) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcNumber1.ClientID%>").SetDropDownType(type);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
    <table>
        <tr>
            <td class="controlsTd">日付時刻:</td>
            <td class="controlsTd">
                <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" Width="200px">
                </im_date:GcDateTime>
            </td>
            <td class="controlsTd">時刻:</td>
            <td class="controlsTd">
                <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" Width="200px"></im_date:GcTime>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">日付:</td>
            <td class="controlsTd">
                <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px"></im_date:GcDate>
            </td>
            <td class="controlsTd">数値:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="200px">
                </im_number:GcNumber>
            </td>
        </tr>
    </table>
    </div>
    <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
    <table class="inputTable">
        <tr>
            <th class="inputTh">日付時刻</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList1" runat="server" Width="150px" onchange="SetDateTime(this.value);">
                    <asp:ListItem Selected="True" Value="calendar">カレンダー</asp:ListItem>
                    <asp:ListItem Value="numericpad">数値パッド</asp:ListItem>
                    <asp:ListItem Value="picker">日付時刻ピッカー</asp:ListItem>
                </asp:DropDownList>&nbsp;&nbsp;
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal" onclick="ShowTab(this);" Enabled="True" disabled="disabled">
                    <asp:ListItem Selected="True">日付領域を表示</asp:ListItem>
                    <asp:ListItem Selected="True">時刻領域を表示</asp:ListItem>
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">日付</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList2" runat="server" Width="150px" onchange="SetDate(this.value);">
                    <asp:ListItem Selected="True" Value="calendar">カレンダー</asp:ListItem>
                    <asp:ListItem Value="numericpad">数値パッド</asp:ListItem>
                    <asp:ListItem Value="picker">日付ピッカー</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">時刻</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList3" runat="server" Width="150px" onchange="SetTime(this.value);">
                    <asp:ListItem Value="numericpad">数値パッド</asp:ListItem>
                    <asp:ListItem Selected="True" Value="picker">時刻ピッカー</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">数値</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList4" runat="server" Width="150px" onchange="SetNumber(this.value);">
                    <asp:ListItem Selected="True" Value="calculator">電卓</asp:ListItem>
                    <asp:ListItem Value="numericpad">数値パッド</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" OnClick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る