Question

提交表单后我将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();

                  };

重置所有输入字段，但在datepicker窗口中，先前选择的日期仍然存在。我想澄清一下。

Answer 1

正如评论者所说，你应该为datepicker创建一个指令。

    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。

Datepicker没有使用angular JS进行清理

1 个答案:

修改