bootstrap-datepicker 的日期格式对页面加载无效答案

【问题标题】：The date format of bootstrap-dateppicker is not effective on page loadbootstrap-datepicker 的日期格式对页面加载无效
【发布时间】：2015-04-24 13:28:04
【问题描述】：

我的日期选择器文本框是在 ASP.NET MVC 中生成的：

@Html.TextBoxFor(model => model.StartDate, new {@class = "form-control datepicker", placeholder = "Pick a date...", data_date_format="mm/dd/yyyy"})

'.datepicker()` 然后被调用：

$().ready(function() {
    $('.datepicker').datepicker();
});

似乎有适当的格式，只是一开始没有。

第一次加载页面时，文本框显示4/24/2015 12:00:00 AM。但是当挑选日期时，那种格式将适用并显示没有时间戳的日期。

有没有我错过的选项或设置？

【问题讨论】：

试试@Html.TextBoxFor(m => m.StartDate, "{0:MM/dd/yyyy}", new {@class ....})
我的！天才。我怎么能忘记我可以在服务器端进行操作？谢谢，斯蒂芬。

标签： asp.net-mvc twitter-bootstrap bootstrap-datepicker

【解决方案1】：

如果您希望使用为日期选择器选择的本机格式在客户端上轻松处理这一切，您可以通过在页面加载时将日期设置为自身来触发格式设置：

// update and date to trigger formatting
$('#myDate').datepicker('update',$('#myDate').datepicker("getDate"))

或者，您可以添加一个扩展方法，该方法将在调用时重新格式化控件中的日期：

$.fn.reformatDate = function(settings) {  
  return this.each(function() {  
    $this = $(this);
    if (!$this.data('datepicker')) return 
    $this.datepicker('setDate',$this.datepicker("getDate"))
  });
};

然后像这样使用它：

$('#myDate').reformatDate();

堆栈片段中的演示

$.fn.reformatDate = function(settings) {  
  return this.each(function() {  
    $this = $(this);
    if (!$this.data('datepicker')) return 
    $this.datepicker('setDate',$this.datepicker("getDate"))
  });
};

$(function() {
    // simulate pre-filled date from server
    $("#myDate").val(new Date());
  
    // initialize like normal
    $('#myDate').datepicker();
    
    // update date to trigger formatting
    $('#myDate').reformatDate();
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>

<input id="myDate" type="text" class="datepicker"  />

【讨论】：