2014-09-30 110 views
0

我有一個新手AngularJS問題 - 我使用datetimepicker庫,我很難得到選定的日期綁定到我的模型...我看到一些帖子說話關於不能直接訪問datetimepicker模型,但在我的情況下,我發現如果我只是在我的日期輸入框中手動輸入一個文本值,它會綁定!如果我選擇與選擇器的日期,我得到了可怕的 '未定義':(...幫助AngularJS綁定datatimepicker選擇值ng模型

HTML標記:

<div class="col-md-2"> 
    <div name="fromDateTime" class="input-group date" id="datetimepickerFrom"> 
    <input class="form-control" type="text" name="fromDateTime" ng-model="formEntries.fromDateTime"/> 
     <span class="input-group-addon" data-ng-click="pickFromDateTime()"><span class="glyphicon glyphicon-calendar" id="calIconFrom"></span></span> 
    </div> 
</div> 

<div class="col-md-2"> 
    <div name="toDateTime" class="input-group date" id="datetimepickerTo">   
    <input class="form-control" type="text" name="toDateTime" ng-model="formEntries.toDateTime"/> 
     <span class="input-group-addon" data-ng-click="pickToDateTime()"><span class="glyphicon glyphicon-calendar"></span></span> 
</div> 
</div> 

控制器:

$scope.pickFromDateTime = function() { 
    $("#datetimepickerFrom").datetimepicker(); 
    $("#datetimepickerFrom").datetimepicker().change(function() {  
     $(this).data("DateTimePicker").hide(); 
     console.log($(this).data("DateTimePicker").getDate()); 
    }); 
} 


$scope.pickToDateTime = function() { 
    $("#datetimepickerTo").datetimepicker(); 
    $("#datetimepickerTo").datetimepicker().change(function() { 
     $(this).data("DateTimePicker").hide(); 
     console.log($(this).data("DateTimePicker").getDate()); 
    }); 
} 

$scope.getData = function() { 
    console.log($scope.formEntries.fromDateTime); 
    console.log($scope.formEntries.toDateTime); 

}

+0

想要正確地學習AngularJS嗎?首先做一兩個沒有包含jQuery或其他DOM操作庫的項目。 – 2014-09-30 21:48:24

+0

我開始沒有jQuery這個,我只是不知道如何做一個沒有它的dattimepicker ...請讓我知道,如果你這樣做。 – dhalia 2014-09-30 21:54:00

回答

1

永遠不會在你的控制器中編寫DOM或jQuery代碼,它永遠不會正常工作,你必須創建一個指令來做到這一點,該指令將監聽你正在使用的任何庫中的事件並更新你的模式湖Here is an example of a directive that happens to work with the datepicker。這應該讓你走上正軌。

+0

太好了,謝謝...我會試試這個! – dhalia 2014-09-30 21:54:40