Question

我有一个视图，其中我有一个带有jquery ui日期选择器的输入字段如果字段为空，我想禁用按钮。

HTML（cshtml-ASP.Net）：

@Html.TextBoxFor(model => model.From, new { ng_model = "From", id = "dFrom", @class = "form-control datepick", placeholder = "Select From date", tabindex = "2" })

 <input ng-disabled="!From" type="button" value="Add" class="btn btn-success" />

JS：

 $(document).ready(function () {
        $(function () {
            $('.datepick').each(function () {
                $(this).datepicker({ dateFormat: 'd MM, y', maxDate: new Date() });
            });
        });
    })

但是，如果我选择了一个日期，则该字段不会更改任何内容（例如：ng-empty到ng-不为空）并且该按钮仍处于禁用状态。
我该如何解决这个问题？

Answer 1

我测试了你的网站。完全清空JoiningDate字段后，在字段内单击，使用弹出的日期选择日历选择日期，所选日期将填充到JoiningDate字段中（以视觉方式显示）在屏幕上，在为场地提供的空间中）。但是，它并没有被填充到角度模型中（其名称为JoiningDateAdd。它保持为undefined）。

您可以使用Firebug for Firefox结合Angular Scope for Firefox来调试此行为（右键单击JoiningDate，在Firebug中检查它，右键单击Firebug中的字段并在Angular Scope中检查它那里的字段（名为JoiningDateAdd仍为undefined）。

这种行为已经在SO中进行了广泛讨论，并且已经提出了许多修正（其中一些可能是相关的，一些不是，基于jquery，bootstrap，angular使用的版本）。只需在谷歌搜索 -

jquery datepicker not updating angular model
bootstrap datepicker not updating angular model

无论如何，我从您的网站（包括css / js文件）中提取了相关代码，并创建了一个小测试用例。它给了我＆＃34; datepicker（）不是函数＆＃34;。当我使用更高版本的jquery-ui.js文件时，它得到了OK。所以，实际上，我无法重现它。我想这需要更多的开关组合来解决问题。您可以使用下面的测试示例，看看是否可以重现该问题。

<!doctype html>
<html lang="en">
<head>
  <script src="Scripts/jquery-1.8.2.min.js"></script>

  <!-- This gives "datepicker()" not known error -->
  <!--<script src="Scripts/jquery-ui-1.8.24.min"></script>-->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    

  <link href="Scripts/jquery-ui.css"></style>

  <script src="Scripts/bootstrap.min.js"></script>
  <link href="Scripts/bootstrap.css"></style>   
  <link href="Scripts/bootstrap-theme.css"></style>     

  <script src="Scripts/angular.min.js"></script>    

  <script>      
        $(document).ready(function () {
        $(function () {
            $('.datepicker').each(function () {
                $(this).datepicker({ dateFormat: 'd MM, y', maxDate: new Date() });
            });
        });
    })
  </script>
</head>
<body> 
  <div ng-app="">
     NationalID: <input type="text" id="NationalID" ng-model='NationalIDAdd'>
     <span ng-show="!NationalIDAdd">Please Fill the field!</span><br>
     DOB: <input type="text" class="datepicker" id="dob" ng-model='DobAdd'>
     <span ng-show="!DobAdd">Please Fill the field!</span><br><br><br><br><br>       
     <button ng-disabled="!NationalIDAdd||!DobAdd">Apply</button>
  </div> 
</body>
</html>

Answer 2

我也有与datetimepicker相关的相同问题，我使用控制器将datetimepicker绑定到元素。该问题已修复如下。

$('#timepicker').datetimepicker({
       format: 'LT'
});   
$("#timepicker").on("dp.change", function (e) {
    $scope.time=e.date.format('h:mm');
});

如果我选择一个日期，jQuery datepicker会改变ng-empty

2 个答案: