使用jQuery插件的DateTimePicker

我一直在試圖用在這裏找到了XD軟jQuery插件：使用jQuery插件的DateTimePicker

datetimepicker 我用的NuGet將其安裝到我的asp.net MVC項目。我想使用內嵌日期和時間選擇我的形式這裏內是HTML

<head> 
<title>Create</title> 

<link rel="stylesheet" href="~/Content/jquery.datetimepicker.css"/> 

</head> 

<h2>Create</h2> 


@using(Html.BeginForm()) 
{ 
@Html.AntiForgeryToken() 

<div class="form-horizontal"> 
    <h4>Event</h4> 

<hr /> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

<div class="form-group"> 
     @Html.LabelFor(model =>model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
     </div> 
    </div> 


    <div class="form-group"> 
     @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Date, new { @id = "datetimepicker3", @style ="width:150px" }) 
      @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" }) 
     </div> 
    </div> 


    <div class="form-group"> 
     @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 

      @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Description, "", new {  @class = "text-danger" }) 
     </div> 
    </div> 

<div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Create" class="btn btn-default" /> 

     </div> 
    </div> 
</div> 
} 

<div> 
@Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 

<script type="text/javascript" src="/scripts/jquery.min.js"></script> 
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jquery.datetimepicker.js">  </script> 
<script type="text/javascript"> 
jQuery('#datetimepicker3').datetimepicker({ 
    format: 'd.m.Y H:i', 
    inline: true, 
    lang: 'ru' 
}); 
</script> 

@Scripts.Render("~/bundles/jqueryval") 

}

但是目前僅顯示一個普通的日曆允許用戶選擇日期，月份和年份，但不這也是我需要的。我已經嘗試了幾個不同的插件和教程，但我無法獲得按預期工作的插件和教程。任何幫助將是偉大的，因爲我一直堅持這個多年，並沒有得到任何地方的感謝。

來源

2015-12-07 LucyJane

嘗試這個插件[日期時間選擇器（http://trentrichardson.com/examples/timepicker/） –

爲了幫助縮小問題，刪除所有頁面元素（表格）和簡單地使用'<輸入ID =「datetimepicker3」type =「text」/>'。得到這個工作來驗證你有正確加載的所有正確的腳本和樣式。然後添加助手，表單，...根據該插件的[github頁面]（https://github.com/xdan/datetimepicker），「lang」選項已過時。 – Jasen

@Jasen我刪除了所有的表單元素，並放在你建議的行中，同時保持我所有的腳本和樣式以及日曆的顯示方式。你對我的表單有什麼問題有什麼建議嗎？謝謝！ – LucyJane

我弄明白了什麼是我需要使用TextBoxFor而不是EditorFor在表單中。這是實施更改後的視圖。

<head> 
<title>Create</title> 

<link rel="stylesheet" href="~/Content/jquery.datetimepicker.css" /> 

</head> 

<h2>Create Event</h2> 


@using (Html.BeginForm()) 
{ 
@Html.AntiForgeryToken() 

<div class="form-horizontal"> 

    <hr /> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <div class="form-group"> 
     @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
      @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(model => model.Date, new { id = "datetimepicker3", @style = "width:150px" }) 
      @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 

      @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" value="Create" class="btn btn-default" /> 

     </div> 
    </div> 
</div> 
} 

<div> 
@Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 

<script type="text/javascript" src="~/Scripts/jquery.min.js"></script> 
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jquery.datetimepicker.js"></script> 
<script type="text/javascript"> 
    jQuery('#datetimepicker3').datetimepicker({ 
     format: 'd.m.Y H:i', 
     inline: true, 
     lang: 'en' 
    }); 
</script> 

@Scripts.Render("~/bundles/jqueryval") 

}

來源

2015-12-07 20:19:44 LucyJane

如果您能解釋標記差異，那對其他人會很有用。 – Jasen

使用jQuery插件的DateTimePicker

回答

相關問題