如何安裝bootstrap-datepicker作爲MVC 5中的組件？

使用此link和這個here加上來自here的答案我能夠將組件安裝爲「文本輸入」類型。現在，我想將其更改爲「組件」類型，但我不知道如何使用Razor引擎在MVC5中正確實現它。如何安裝bootstrap-datepicker作爲MVC 5中的組件？

<div class="input-append date">

$('#sandbox-container .input-append.date').datepicker({ 
todayBtn: "linked", 
autoclose: true, 
todayHighlight: true

}）;

這是我試過的，但不起作用：字形顯示正確。日曆彈出如果文本框被點擊，但點擊字形不會做任何事情。如果我從下面的腳本中刪除了「＃sandbox-container」，那麼日曆會在點擊字形時彈出，但它與文本中的日曆無關，並且選擇日期不會將其移動到文本輸入控件中。

<div class="input-group"> 
     @Html.TextBoxFor(model => model.PickUpDate, new { @class = "form-control datepicker "}) 
     <span class="input-group-addon input-append date glyphicon glyphicon-th"></span> 
    </div>

$(function() {      // will trigger when the document is ready 
     $('#sandbox-container .input-append.date').datepicker({ 
      todayBtn: "linked", 
      autoclose: true, 
      todayHighlight: true 
     }); 
    }); 

</script>

來源

2014-01-14 Ben Junior

「不起作用」不是您的問題的可接受描述。你是否收到錯誤信息？如果是這樣，請將其添加到您的答案中。否則，描述發生了什麼/沒有發生。 –

我已經更新了這個問題 –

我有自舉的DateTimePicker（基於自舉日期選擇器）有類似的問題。該組件代碼似乎沒有更新與Bootstrap 3的兼容性。它是愚蠢地尋找特定格式的插件（Bootstrap 2樣式），而不是依賴「按鈕」上的特定類。我通過簡單地實現我自己的組件設置（基本繞過內置版本）來修復它。

HTML

<div class="input-group"> 
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue.ToString(), new { type = "date", @class = "form-control" }) 
    <span class="input-group-btn"> 
     <button type="button" class="btn btn-default datetimepicker-reset"> 
      <i class="fa fa-times"></i> 
     </button> 
     <button type="button" class="btn btn-default datetimepicker-show"> 
      <i class="fa fa-calendar"></i> 
     </button> 
    </span> 
</div>

這是從我的項目直接粘貼，所以讓我解釋一下。首先，我在EditorTemplate中有這個（這對你來說也不是個壞主意）。 Html.TextBox位是爲此目的而定製的。傳遞名稱參數的空字符串可讓Razor用正確的字段名稱填充此字段，並且ViewData.TemplateInfo.FormattedModelValue是您如何獲取當前值而不指定視圖的模型。另外，我使用的是font-awesome而不是Bootstrap中包含的默認圖標，因此您可以簡單地相應地調整字體類別。該代碼進入Views\Shared\EditorTemplates\Date.cshtml。然後，你只需要在你的財產指定數據類型，如果您尚未：

[DataType(DataType.Date)] 
public DateTime MyDateProperty { get; set; }

最後，你在你看來需要渲染所有的HTML是：

@Html.EditorFor(m => m.MyDateProperty)

然後，你只需要一點額外的JavaScript來連接所有的東西。我建議保留這個通用名稱，這樣您就不必爲日期字段的每個實例反覆編寫相同的代碼。我只是選擇類型「日期」的所有輸入：

$('input[type=date]').datetimepicker() 
    .each(function() { 
     var $input = $(this); 
     var $parent = $input.parent(); 
     $parent.find('.datetimepicker-reset').on('click', function() { 
      $input.val(''); 
      $input.datetimepicker('update'); 
     }); 
     $parent.find('.datetimepicker-show').on('click', function() { 
      $input.datetimepicker('show'); 
     }); 
    });

在這裏，我只是使用bootstrap-datetimepicker的手動顯示方法。對於重置/清除按鈕，只需將該值設置爲空，然後告訴bootstrap-datetimepicker進行更新，以便識別此新值，而不是仍然顯示在其控件中選擇的舊值。

來源

2014-01-16 15:25:27

JavaScript讓我頭疼！謝謝！你搖滾！ –

如何安裝bootstrap-datepicker作爲MVC 5中的組件？

回答

相關問題