未使用angular JS清理日期选择器

Datepicker not getting cleaned using angular JS

本文关键字：日期选择器 angular JS 未使用更新时间：2023-09-26

提交表单后，我有HTML，将所有输入字段重置为空。但是，只有约会对象一个人没有被清洗。

HTML代码

  <div>
                      <form name="profileform" role="form"> 
                          <div class="form-group">
                          <h4 class="mzero">Details</h4>
                          </div>
                          <div class="form-group">                             
                          <input type="text" placeholder="name"  name="name" ng-model="personal.name">                            
                          </div>
                          <div class="form-group input-daterange input-group col-xs-12" id="datepicker">                                  
                          <input value="" class="form-control input-sm" placeholder="dob" name="dob" ng-model="personal.dob">                             
                          </div>
                          <div class="form-group"> 
                          <textarea  rows="2" placeholder="Write about you..." name="description" ng-model="personal.description" ></textarea>
                          </div>
                      </form>
              </div>

 <button type="button" ng-click="createChallenge()">Create</button> 
   </div>
              <script type="text/javascript">
  $(function(){
    $('.input-daterange').datepicker({  
         startDate: "today" 
    }); 
  });

JS代码

$scope.createChallenge = function(){
// persist in db logic 
 resetForm();     
}
 var resetForm = function(){
           $scope.master={};
               $scope.profile= angular.copy($scope.master);     
            $scope.profileform.$setPristine();
                  };

所有输入字段都被重新设置，但在日期选择器窗口中，以前选择的日期仍然存在。我想澄清一下。

正如评论者所说，您应该为日期选择器创建一个指令。

    var datePicker = function(){
        return {
            restrict: 'AE',
            link: function(scope, element) {
                element.datepicker({
                    startDate: "today"
                });
            }
        }
    };
angular.module('your_module_name')
    .directive('datePicker', datePicker);

然后在你的html 中使用这个指令

<div class="form-group input-daterange input-group col-xs-12">                                  
  <input date-picker value="" class="form-control input-sm" placeholder="dob" name="dob" ng-model="personal.dob">                             
</div>

编辑

创建了工作示例plunker。