web-dev-qa-db-ja.com

ASP.NET DateTime Picker

aSP.NETカレンダーコントロールと相性の良いフリー/オープンソースのタイムピッカーコントロールはありますか？

asp.netdatetimepicker
30
SoftwareGeek

JQueryには最高の datepicker IMHOがあります。 .Netに固有のものではありませんが、それでもうまく機能します。

HTML：

<input type="text" value="9/23/2009" style="width: 100px;" readonly="readonly" name="Date" id="Date" class="hasDatepicker"/>

ヘッド要素内：

<script src="../../Scripts/jquery-1.3.2.min.js" language="javascript" type="text/javascript"/>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"/>

そのような単純な！

24
Chuck Conway

あなたの質問への答えははい、ASP.NETカレンダーコントロールに適したフリー/オープンソースのタイムピッカーコントロールがあります。

ASP.NET Calendarコントロールは、htmlテーブルを書き込むだけです。

HTML5およびDOT.NET Framework 4.5を使用している場合は、代わりにASP.NET TextBoxコントロールを使用し、TextModeプロパティを「Date」、「Month」、「Week」、または「Time」または「 DateTimeLocal」またはChromeまたはFirefoxまたはInternet Explorerを使用してnotである場合、このプロパティを設定することもできます「DateTime」に。

次に、Textプロパティを読み取り、日付、時間、月、または週をTextBoxから文字列として取得します。

DOT.NET Framework 4.0以前のバージョンを使用している場合、html5 input type = "date"またはinput type = "month"またはinput type = "week"またはinput type = "time"またはinput type =のいずれかを使用できます。 「datetime-local」またはChromeまたはFirefoxまたはInternet Explorerを使用してnotである場合、入力type = "datetime"を使用します。

サーバー側のコード（C＃またはVisual Basicで記述）でユーザーが日付フィールドに入力した情報が必要な場合は、入力タグrunat="server"

また、この要素にIDを指定して、サーバー側のコードでアクセスできるようにします。入力された日付、時刻、月、または週を文字列として取得するには、Valueプロパティを読み取ります。サーバーでこの要素を実行できない場合は、入力type = "date"または "time"または "month"または "week"に加えて、非表示フィールドが必要です。 （javascriptで記述された）送信関数で、非表示フィールドの値を入力type = "date"、または "time"、または "month"、または "week"の値に設定してから、サーバー側のコードで、その隠しフィールドのValueプロパティも文字列として読み取ります。

Htmlの非表示フィールド要素がサーバーで実行できることを確認してください。

お役に立てば幸いです。

35
user2133061

テキストボックスにこれを追加します：

textmode="Date"

次のような見栄えの良いDatepickerが得られます。

DatePicker

その他のバリエーションは次のとおりです。

textmode="DateTime"

次のような外観になります。

Date Time Picker

textmode="DateTimeLocal"
8
Ehsan

これは私が使用した唯一のものであるため、 http://www.ajaxcontroltoolkit.com/ からCalendarExtenderを提案します。

8
sshow

これはjqueryを使用しないソリューションです。

WebFormにカレンダーとテキストボックスを追加-> WebFormのソースには以下があります：

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChange">
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

WebFormのcsファイルにメソッドを作成します。

protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = DateTime.Today.ToShortDateString()+'.';
    }

    protected void DateChange(object sender, EventArgs e)
    {
        TextBox1.Text = Calendar1.SelectedDate.ToShortDateString() + '.';
    }

メソッドDateChangeは、カレンダーイベントSelectionChangedに関連付けられています。次のようになります。 DatePicker Image

4
Bojan Jovanovic

ブートストラップを使用している場合は、 bootstrap-datepicker を試してください。

3
rockXrock

基本日付ピッカーLite

これは同社の主力製品の無料バージョンですが、asp.netのネイティブの日付と時刻のピッカーが含まれています。

3
recursive

簡単ですぐに使える実装があります：HTML 5 input type="date"およびその他の日付関連の入力タイプ。

さて、コントロールをそれほどスタイル設定することはできず、 はすべてのブラウザで機能しません が、それでも非常に良いオプションですすべての最新のブラウザがそれをサポートし、モバイルデバイスで常に適切に動作しない重いライブラリを含めたくない場合は、長期的です。

2
Patrick Hofman
@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control", @type = "date" } })

これはうまくいく

0
Abdulhakim Zeinu

テキストボックスを使用する場合、Internet Explorer 11ではTextModeプロパティを「Date」に設定しても機能しないことに注意してください。現在、「Date」、「DateTime」、「Time」の値はサポートされていません。

この例は、日付の検証を含むテキストボックスを使用してそれを実装する方法を示しています（ユーザーが数字だけを入力できるため）。 Internet Explorer 11および他のWebブラウザーで動作します。

<asp:Content ID="Content"
         ContentPlaceHolderID="MainContent"
         runat="server">

<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
   $(function () {
   $("#
   <%= txtBoxDate.ClientID %>").datepicker();
   });
 </script>
 <asp:TextBox ID="txtBoxDate"
           runat="server"
           Width="135px"
           AutoPostBack="False"
           TabIndex="1"
           placeholder="mm/dd/yyyy"
           autocomplete="off"
           MaxLength="10"></asp:TextBox>
 <asp:CompareValidator ID="CompareValidator1"
                    runat="server"
                    ControlToValidate="txtBoxDate"
                    Operator="DataTypeCheck"
                    Type="Date">Date invalid, please check format. 
 </asp:CompareValidator>
 </asp:Content>
0
José Lugo