AngularJS와 및 jqueryui 날짜 선택기 입력 상자의 값은

나는 jqueryUI의 datapicker이 다음 날짜 선택기는 잘 작동하지만, 내가 추가 기능을 실행할 다음 버튼을 클릭하면, 내가 얻을 수AngularJS와 및 jqueryui 날짜 선택기 입력 상자의 값은

<div class="span4"> 
<label>Start Date; </label> 
<input type="text" name="sDate" id="datepicker1" ng-model="item.date.sDate" class="ng-pristine ng-valid hasDatepicker"> 
<label>End Date; </label> 
<input type="text" name="eDate" id="datepicker2" ng-model="item.date.eDate" class="ng-pristine ng-valid hasDatepicker"> 
<br> <br> 
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>

item.date.eDate 값 ...

출처

2013-02-05 elephant

AngularJS와 jQuery가 너무 잘 작동하지 않습니다. 지침을 사용해야합니다. 여기 당신을 위해 만든 빠른 샘플 응용 프로그램 버전입니다 : A A보다 철저한 설명은 밖으로 http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> 
    <script> 
    function putObject(path, object, value) { 
    var modelPath = path.split("."); 

    function fill(object, elements, depth, value) { 
     var hasNext = ((depth + 1) < elements.length); 
     if(depth < elements.length && hasNext) { 
      if(!object.hasOwnProperty(modelPath[depth])) { 
       object[modelPath[depth]] = {}; 
      } 
      fill(object[modelPath[depth]], elements, ++depth, value); 
     } else { 
      object[modelPath[depth]] = value; 
     } 
    } 
    fill(object, modelPath, 0, value); 
    } 
    var directives = angular.module('myApp', []); 

    directives.directive('datepicker', function() { 
     return function(scope, element, attrs) { 
      element.datepicker({ 
       inline: true, 
       dateFormat: 'dd.mm.yy', 
       onSelect: function(dateText) { 
        var modelPath = $(this).attr('ng-model'); 
        putObject(modelPath, scope, dateText); 
        scope.$apply(); 
       } 
      }); 
     } 
    }); 

    function myCtrl($scope) { 
     $scope.item = "" 
     $scope.add = function() { 
      $scope.$apply() 
      alert($scope.item) 
     } 
    } 
    </script> 
</head> 
<body ng-app="myApp"> 
<div ng-controller="myCtrl"> 
{{item}} 
<p>Date: <input type="text" datepicker id="datepicker" ng-model="item" /></p> 
<button ng-click="add()" type="submit" class="btn btn-success">Next</button> 
<br /> 

</div> 
</body> 
</html>

확인합니다.

출처

2013-02-05 05:07:42

@AndreDyster 날짜 형식에 관한 질문이 있습니다. 기본값으로 * mm.dd.yy **가 업데이트되지 않으며 ** ** dd.mm.yy ** –

과 같은 일반 형식이 필요합니다. 이 대답은 좀 오래된 것입니다. 빠른 Google 검색을 사용하면 jQuery UI 지시문을 사용할 수 있습니다. https://github.com/angular-ui/ui-date를 확인하십시오. 설정할 수있는 ui-date-format 매개 변수가있는 것 같습니다. –

난 그냥 같은 일을 시도, 나는 실제로 지침, 그냥이 코드를 사용하지 않았다는 것을 발견했습니다 ...

$.datepicker.setDefaults({ 
    // When a date is selected from the picker 
    onSelect: function(newValue) { 
     if (window.angular && angular.element) 
      // Update the angular model 
      angular.element(this).controller("ngModel").$setViewValue(newValue); 
    } 
});

은 그냥 .datepicker()에 그것을 이전를 배치 초기화 코드.

출처

2013-06-20 05:53:58

감사합니다. 나는 .factory 안에 함수 묶음을 가지고 있는데, 이것에 그것을 더했습니다 :'factory.syncScope = function (el) {var $ e = $ (el), e = $ e [0]; angular.element (e) .controller ("ngModel"). $ setViewValue ($ e.val()); }}'if (window.angular && angular.element)'를 추가 할 수는 있지만 (그러나 공장에있어 우리는 그걸 알고 있습니다;) 그리고 나서'syncScope'을 onChange에 첨부하고 onChange 해고 당했고 밥은 당신의 삼촌입니다! – Campbeln

는이 사실 밝혀 element.datepicker({

directives.directive('datepicker', function() { 
     return function(scope, element, attrs) { 
      $(element).datepicker({ 
       inline: true, 
       dateFormat: 'dd.mm.yy', 
       onSelect: function(dateText) { 
        var modelPath = $(this).attr('ng-model'); 
        putObject(modelPath, scope, dateText); 
        scope.$apply(); 
       } 
      }); 
     } 
});

출처

2014-09-12 21:46:01 Ahmer

$(element).datepicker({에 당신이 어떤 인라인 지침을 또는 $ .datepicker 함께 놀러 필요가 없습니다 교체해야합니다. ng-model 지시어가 아닌 datepicker 요소의 값을 얻는 것이 도움이 될뿐입니다. 3 개의 입력, 이름, 성 및 생년월일이 있다고 가정 해보십시오. 생년월일 입력은 jquery ui datepicker를 포함합니다. ng-model 지시문 <에 의해 입력 된 이름과 성의 값을 가져 오지만 생년월일 값을 얻으려면 jquery .val() 함수를 사용하십시오.

출처

2015-08-11 07:51:05

AngularJS와 및 jqueryui 날짜 선택기 입력 상자의 값은

답변

관련 문제