Question

我正在使用bootstrap 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个日期：

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

有谁看到我在这里做错了什么？

修改

使用Razor语法时“它不起作用”，datetimepicker只是没有显示，没有任何反应。现在我已经进行了一些测试，我在datetimepicker.min.js文件中收到指向此行的运行时错误：

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

这是它在对话框中弹出的错误信息：

第26行第5290行未处理的异常   http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js

0x800a138f - JavaScript运行时错误：无法获取属性“top”   undefined或null引用

这是表单的呈现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>

Answer 1

您的第一种方法有问题，您省略了输入字段的名称属性。 name属性定义表单发布的变量。只需写下：

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

第二次尝试：

但是第二个使用剃刀语法的却没有。

无效是什么意思？你能展示呈现的HTML吗？

Answer 2

第二次尝试：

如果您查看bootstrap datetime-picker的文档，则会显示id属性#datetimepicker1应该应用于输入的容器。相反，您将它应用于输入本身。

似乎需要将data-time-icon="icon-time" data-date-icon="icon-calendar"属性应用于<i>标记，而TwitterBootstrapMVC不会开箱即用。

向TwitterBootstrapMVC提交一个问题，为.IconAppend方法添加一个重载，也可以选择您想要自定义的Icon课程...或者更好的是，fork它进行必要的更改并提交拉取请求。

Answer 3

我将模型更改为接受string而不是DateTime对象，然后修复了它。

如何将日期和时间发布到服务器？

3 个答案: