0

私はブートストラップdatetimepickerライブラリを次のように使用しています:

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{  
    <div id="searchContainer">

        <div class="well">
          <div id="datetimepicker1" class="input-append date">
            <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="StartDate" />
            <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar">
              </i>
            </span>
          </div>
        </div>
        <div class="well">
          <div id="datetimepicker2" class="input-append date">
            <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="EndDate" />
            <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar">
              </i>
            </span>
          </div>
        </div>

        @Html.Bootstrap().SubmitButton().HtmlAttributes(new { @class = "btn" })
    </div>
}

これは別の試みです：

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{  
    <div id="searchContainer">
        @Html.Bootstrap().TextBoxFor(model => model.StartDate).HtmlAttributes(new { id = "datetimepicker1", @class = "input-append date" }).AppendIcon("icon-calendar")
        @Html.Bootstrap().TextBoxFor(model => model.EndDate).HtmlAttributes(new { id = "datetimepicker2", @class = "input-append date" }).AppendIcon("icon-calendar")

        @Html.Bootstrap().SubmitButton().HtmlAttributes(new { @class = "btn" })
    </div>
}

JQuery:

<script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({
                language: 'en'
            });
        });
        $(function () {
            $('#datetimepicker2').datetimepicker({
                language: 'en'
            });
        });
</script>

div が使用されるコードの最初のチャンクは、日付と時刻を選択するときに正常に機能します。しかし、かみそりの構文を持つ 2 番目のものはそうではありません。

日付と時刻の選択に最初のチャンクを使用すると、ボタンが押されたときにサーバーにポストされません。

モデルには 2 つの日付のみが含まれます。

public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }

ここで私が間違っているかもしれないことを誰かが見ていますか?

編集

Razor 構文を使用すると「動作しません」と表示され、datetimepicker が表示されず、何も起こりませんでした。さらにテストを行っているところ、datetimepicker.min.js ファイルの次の行を指すランタイム エラーが発生します。

offset.top=offset.top+this.height;

そして、これはダイアログにポップアップするエラーメッセージです:

http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.jsの行 26、列 5290 で未処理の例外

0x800a138f - JavaScript ランタイム エラー: 未定義または null 参照のプロパティ 'top' を取得できません

これは、フォームのレンダリングされた html です。

<form action="/Home/Search" method="post">    <div id="searchContainer">
        <select class="chzn-select" data-placeholder="Select items" id="Ids" multiple="multiple" name="Ids"><option value="1">test0</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
<option value="5">test4</option>
<option value="6">test5</option>
</select>
        <div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="datetimepicker1" name="StartDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
        <div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="datetimepicker2" name="EndDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>



        <button class="btn   btn" type="submit">Submit</button>
    </div>
</form>

<script type="text/javascript">

        $(function () {
            $('#datetimepicker1').datetimepicker({
                language: 'en'
            });
        });
        $(function () {
            $('#datetimepicker2').datetimepicker({
                language: 'en'
            });
        });
</script>

<style type="text/css">
    #searchContainer {
        margin-top:10%;
}
</style>

</div> 

  <div id="push"></div>
</div>

  <div id="footer">
  <div class="container">
     <p>&copy; 2013 - My ASP.NET MVC Application</p>
    </div>
  </div>
    <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>

4

3 に答える 3

2

最初のアプローチには、入力フィールドの name 属性を省略したという問題があります。name 属性は、フォームによってポストされる変数を定義します。書くだけ ：

<input ... type="text" id="StartDate" name="StartDate />

2 回目の試行の場合:

しかし、かみそりの構文を持つ 2 番目のものはそうではありません。

うまくいかないとはどういう意味ですか? レンダリングされた HTML を表示できますか?

于 2013-07-24T09:20:41.287 に答える