【问题标题】:Date picker not highlighting selected date日期选择器未突出显示所选日期
【发布时间】:2015-08-20 08:04:42
【问题描述】:

我在 MVC 5 Web 应用程序中使用 Angular.js。我的网页中有日期选择器。

指令

myApp.directive('datepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ProfileCtrl) {
        element.datepicker({
            autoclose: true,
            onSelect: function (date) {
                ProfileCtrl.$setViewValue(date);
                scope.$apply();
            }
        });
    }
};});

输入标签

<div class="form-group">
    <label for="dob" class="col-sm-4 control-label text-left">DOB</label>
    <div class="col-md-8">
       <input type="text" datepicker name="dob" class="form-control" ng-model="models.DOB" />
    </div>
 </div>

一切正常。

但是我遇到了一个问题,当我尝试将日期值从数据库加载到文本框时,日期选择器没有突出显示所选日期,并且日期选择器 dateformat 与文本框不同。请看下图。

【问题讨论】:

  • 您是否使用格式选项初始化了datepicker?如果是,则检查将被选中的6th Jan 2015。所以基本上你需要照顾format,当你将它设置为datepicker
  • 感谢您的宝贵回复。选择的日期是 2015 年 6 月 1 日。我已经在指令中设置了格式 dateFormat: 'MM/dd/yyyy'。但它不起作用。
  • 那么您可能需要尝试@PrajapatiVikas 建议的解决方案将其转换为指定格式,然后再将其设置为datepicker

标签: javascript jquery asp.net-mvc angularjs datepicker


【解决方案1】:

尝试使用此代码更正您的日期格式并检查,

    $scope.models.DOB=GetFormattedDate(models.DOB);
    function GetFormattedDate(dateString, replaceNullValue) {
         if (replaceNullValue == false && IsBlank(dateString)) {
           return "";
         }
        var dt = dateString != null ? new Date(dateString) : new Date();
        var d = dt.getDate();
        var dd = d < 10 ? "0" + d : d;
        var m = dt.getMonth() + 1;
        var mm = m < 10 ? "0" + m : m;
        var y = dt.getFullYear();
        return mm + "/" + dd + "/" + y;
    }

【讨论】:

  • 感谢您的宝贵回复。我正在使用您的方法,但日期选择器未突出显示日期选择器中的现有值。我的意思是我尝试在日期选择器中以蓝色突出显示数据库日期值。