AngularJS Bootstrap Datepicker 3验证问题：仅支持YYYY-MM-DD格式

针对你遇到的两个问题，我给出以下具体解决方案：

问题1：jQuery赋值后$valid状态不触发 #

当通过Bootstrap Datepicker（基于jQuery）选择日期时，jQuery直接修改了输入框的DOM值，但Angular的ngModel并没有感知到这个变化，导致表单状态（比如$valid）没有更新。解决方法是在日期变化的回调中，手动通过Angular的ngModelController来更新值并触发脏检查：

修改你的Datepicker初始化代码如下：

$('#hiring_date').datetimepicker({
  viewMode: 'months',
  format: 'YYYY-MM-DD',
  pickTime: false
}).on('dp.change', function (ev) {
  // 获取输入框元素及其对应的ngModel控制器
  const inputElem = $(this).find('input');
  const ngModelCtrl = inputElem.controller('ngModel');
  
  if (ngModelCtrl) {
    // 将选中的日期格式化为指定字符串，更新ngModel的视图值
    const formattedDate = ev.date.format('YYYY-MM-DD');
    ngModelCtrl.$setViewValue(formattedDate);
    // 触发视图渲染（同步ngModel到输入框）
    ngModelCtrl.$render();
    // 手动触发Angular的脏检查，更新表单状态
    inputElem.scope().$apply();
  }
});

这样操作后，Angular就能感知到值的变化，$valid、$dirty等状态会正确更新。

问题2：仅允许YYYY-MM-DD格式的输入验证 #

Angular提供了两种方式来实现这个需求：

方式1：使用内置的ng-pattern指令 #

通过正则表达式匹配YYYY-MM-DD格式，直接添加到输入框上：

<input 
  name="hiring_date" 
  ng-model="hiring_date" 
  type='text' 
  data-format="YYYY-MM-DD" 
  class="form-control" 
  placeholder="YYYY-MM-DD" 
  ng-required="true"
  ng-pattern="/^\d{4}-\d{2}-\d{2}$/"
/>

然后添加对应的错误提示：

<small ng-show="postJobForm.hiring_date.$error.pattern && postJobForm.hiring_date.$touched" class="errorMsg">
  Please enter a date in YYYY-MM-DD format.
</small>

方式2：自定义验证器（更严格的日期有效性检查） #

ng-pattern只能验证格式，无法检查日期是否真实有效（比如2023-02-30格式正确但不是有效日期）。可以自定义一个Angular指令来做严格验证：

首先定义验证器指令：

angular.module('yourAppModule').directive('validDate', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$validators.validDate = function(modelValue, viewValue) {
        const value = modelValue || viewValue;
        if (!value) return true; // 空值由ng-required处理
        
        // 检查是否为有效日期，且格式严格匹配YYYY-MM-DD
        const date = new Date(value);
        return date instanceof Date && !isNaN(date) && value === date.toISOString().split('T')[0];
      };
    }
  };
});

然后在输入框上添加这个指令：

<input 
  name="hiring_date" 
  ng-model="hiring_date" 
  type='text' 
  data-format="YYYY-MM-DD" 
  class="form-control" 
  placeholder="YYYY-MM-DD" 
  ng-required="true"
  ng-pattern="/^\d{4}-\d{2}-\d{2}$/"
  valid-date
/>

对应的错误提示：

<small ng-show="postJobForm.hiring_date.$error.validDate && postJobForm.hiring_date.$touched" class="errorMsg">
  Please enter a valid calendar date.
</small>

修改后的完整HTML示例 #

<form name="postJobForm">
  <div class="form-group">
    <label class="control-label">
      Target Hiring Date 
      <br> touched---------{{postJobForm.hiring_date.$touched}} 
      <br> dirty---------{{postJobForm.hiring_date.$dirty}} 
      <br> valid----------{{postJobForm.hiring_date.$valid }} -- 
      <small class="requiredFeild">*</small>
    </label>
    <div class='input-group date' id='hiring_date'>
      <input 
        name="hiring_date" 
        ng-model="hiring_date" 
        type='text' 
        data-format="YYYY-MM-DD" 
        class="form-control" 
        placeholder="YYYY-MM-DD" 
        ng-required="true"
        ng-pattern="/^\d{4}-\d{2}-\d{2}$/"
        valid-date
      />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
    <small ng-show="postJobForm.hiring_date.$error.required && postJobForm.hiring_date.$touched" class="errorMsg">Please complete this required field.</small>
    <small ng-show="postJobForm.hiring_date.$error.pattern && postJobForm.hiring_date.$touched" class="errorMsg">Please enter a date in YYYY-MM-DD format.</small>
    <small ng-show="postJobForm.hiring_date.$error.validDate && postJobForm.hiring_date.$touched" class="errorMsg">Please enter a valid calendar date.</small>
  </div>
</form>

内容的提问来源于stack exchange，提问作者Mr world wide