Question

我正在使用JQuery，Modernizr和Angular的组合来为通过ng-repeat生成的表实现自定义Datepicker解决方案。如果我将“datepicker”的Angular指令硬编码到HTML中，解决方案。

因此，例如，在我使用ng-repeat"revenue in runway.revenues"的表格中，这有效：

 <td> 
     <input type="date" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" datepicker required/> 
 </td>

但我希望只有在用户处于需要它的浏览器中时才能实现此目的。因此，考虑到这一点，我从上面的HTML中删除了datepicker，并将其写在JS中：

    $(function() {
        var nativeDateInputIsSupported = Modernizr.inputtypes.date;
        if (!nativeDateInputIsSupported) {
            $('input[type="date"]').prop("datepicker", true)
        }
    });

但是，当我登陆Firefox的页面时，它似乎无法正常工作。

此外，如果我尝试通过执行console.log($('input[type="date"]').prop("class"))之类的操作进行调试，则返回的值将为undefined（应为form-control）。

任何提示将不胜感激！

Answer 1

使用.attr()或.setAttribute()在HTML

设置属性

document.querySelector("input").setAttribute("datepicker", true);

console.log(document.querySelector("input").outerHTML);

<input type="text">

$("input").attr("datepicker", true);

console.log($("input")[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="text">

$("input").prop("datepicker", true);

console.log($("input")[0].outerHTML); // attribute not set at HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="text">

Answer 2

我可以通过从用户@ guest271314获取一个想法并稍微扩展它来实现这一点！

我没有将属性添加到基于Modernizr的HTML，而是将$ scope变量设置为等于布尔值。

  $(function() {
        var nativeDateInputIsSupported = Modernizr.inputtypes.date;
        if (!nativeDateInputIsSupported) {
            $scope.datePickerValue = "true"
        }
    });

在我的指示中，我补充说：

function link(scope, element, attrs, controller) {
        var requiredParam = attrs.datepicker === 'true'; //This was what was added
        if (requiredParam) { //Checking for boolean value
            element.datepicker({
                dateFormat: "yy-mm-dd",
                maxDate: '0'
            });
        }
    }

这意味着在我的HTML中我将datepicker="{{datePickerValue}}"添加到日期输入中，现在可以使用!!感谢您的帮助，如果没有您的意见，我将无法回复此问题=）

使用JQuery

2 个答案: