时间戳

首页 > 解决方案 > Bootstrap Datepicker 仅年份不绑定

javascript - Bootstrap Datepicker 仅年份不绑定

问题描述

在我的 MVC 项目Datetime中，我的模型中有一个可以为空的属性，名为ReplacementDate.

在我看来，我有一个使用以下代码初始化的 Bootstrap 日期选择器（2.0 版）：

$('.input-group.decade').datepicker({
            format: "yyyy",
            viewMode: "years",
            minViewMode: "years",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            showOnFocus: false
});

日期选择器在屏幕上正确呈现，我只能从日历中选择一个年份值。但是当我发布表单数据时，该ReplacementDate属性没有值。我尝试将格式设置为“yyyy”和“yyyy”甚至“YYYY”，但似乎没有任何东西允许绑定发生。

奇怪的是，我在同一页面上有另一个日期选择器，它允许用户选择月份和年份，并且它在提交到不同的可空日期属性时正确绑定。代码如下：

$('.input-group.month').datepicker({
            format: "mm/yyyy",
            viewMode: "months",
            minViewMode: "months",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            showOnFocus: false
});

我做错了什么来阻止ReplacementDate值正确绑定？我是否必须制作ReplacementDate一个可为空的 int 或其他东西？

标签： javascriptjquerytwitter-bootstrapdatepicker

解决方案

我建议这样做：

$('#date1').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'yy',
  onClose: function(dateText, inst) {
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year));
    console.log($("#ui-datepicker-div .ui-datepicker-year :selected").val())
  }
});
#ui-datepicker-div {
  font-size: 12px;
}

.ui-datepicker-calendar {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/vader/jquery-ui.min.css" />
<input type="text" id="date1" name="date1" />

推荐阅读