programing

jQuery ui 날짜 선택기(Angularjs 포함)

lastmoon 2023. 3. 23. 23:03
반응형

jQuery ui 날짜 선택기(Angularjs 포함)

각도가 있는 jQuery UI 날짜 선택기를 사용하고 싶다JS.

샘플이 있는데 코드가 작동하지 않습니다.

샘플:

http://www.abequar.net/jquery-ui-datepicker-with-angularjs/

마이코드:

<input id="sDate" name="programStartDate" type="text" datepicker required/>



angular.module('elnApp')
 .directive('datepicker', function () {
  return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {
        $(function(){
            element.datepicker({
                dateFormat:'yy-mm-dd',
                onSelect:function (date) {
                    ngModelCtrl.$setViewValue(date);
                    scope.$apply();

                }
            });
        });
    }
} });

에러가 표시된다.TypeError: Object [object Object] has no method 'datepicker'.

난 너와 내 코드가 거의 똑같아.

페이지에 jQueryUI.js가 포함되어 있습니까?

여기 바이올린이 있어

<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}


var datePicker = angular.module('app', []);

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

HTML 어딘가에 ng-app="app"도 필요합니다.

angular.module('elnApp')
.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            $(element).datepicker({
                dateFormat: 'dd.mm.yy',
                onSelect: function(date) {
                    ctrl.$setViewValue(date);
                    ctrl.$render();
                    scope.$apply();
                }
            });
        }
    };
});

특히 여러 날짜 선택기가 있는 경우 요소의 범위 변수 이름을 하드 코딩하지 않는 것이 좋습니다.

대신 클릭된 입력 정보를 얻어야 합니다.ng-model대응하는 스코프 변수를 갱신하고,onSelect방법.

app.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                dateFormat: 'yy-mm-dd',

                onSelect: function(date) {
                    var ngModelName = this.attributes['ng-model'].value;

                    // if value for the specified ngModel is a property of 
                    // another object on the scope
                    if (ngModelName.indexOf(".") != -1) {
                        var objAttributes = ngModelName.split(".");
                        var lastAttribute = objAttributes.pop();
                        var partialObjString = objAttributes.join(".");
                        var partialObj = eval("scope." + partialObjString);

                        partialObj[lastAttribute] = date;
                    }
                    // if value for the specified ngModel is directly on the scope
                    else {
                        scope[ngModelName] = date;
                    }
                    scope.$apply();
                }

            });
        }
    };
});

편집

@Romain이 제기한 문제(내스트 요소)에 대처하기 위해 답변을 수정했습니다.

드디어 angular js에서 datepicker 디렉티브를 실행할 수 있었습니다.여기 포인터가 있습니다.

다음 JS를 순서대로 포함하다

  1. jquery.displaces
  2. jquery-ui.displaces
  3. 각도 최소값

다음과 같이 추가했습니다.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>

html 코드로

<body ng-app="myApp" ng-controller="myController">
// some other html code 
<input type="text" ng-model="date" mydatepicker />
<br/>
 {{ date }}
 //some other html code
 </body>

js에서 먼저 디렉티브를 코드화한 후 컨트롤러용 코드를 추가합니다.그렇지 않으면 문제가 발생합니다.

달력 선택 지시어:

var app = angular.module('myApp',[]);
app.directive('mydatepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
     link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: 'DD, d  MM, yy',
            onSelect: function (date) {
                scope.date = date;
                scope.$apply();
            }
        });
    }
  };
});

위의 답변에서 참조된 지시 코드.

이 지시어 뒤에 컨트롤러를 씁니다.

app.controller('myController',function($scope){
//controller code
};

대신 각도 js로 시도합니다.

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

jquery.juery.jui.juery.jui.juui.ju

angular js 날짜 선택기를 구현할 수 있습니다.

<input type="date" ng-model="date" name="DOB">

이를 통해 내장된 날짜 선택기가 제공되며 날짜는 ng-model로 설정되며 추가 처리 및 검증에 사용할 수 있습니다.

이전 접근법으로 여러 번 머리를 맞댄 끝에 이 사실을 발견했습니다.:)

코드를 수정하여 $apply() 안에 뷰 업데이트를 랩했습니다.

link: function (scope, elem, attrs, ngModelCtrl){   
var updateModel = function(dateText){
    // call $apply to update the model
    scope.$apply(function(){
        ngModelCtrl.$setViewValue(dateText);
    });
};
var options = {
    dateFormat: "dd/mm/yy",
     // handle jquery date change
    onSelect: function(dateText){
        updateModel(dateText);
    }
};
 // jqueryfy the element
elem.datepicker(options);

}

바이올린 작업 - http://jsfiddle.net/hsfid/SrDV2/1/embedded/result/

ng-repeat에서는 onSelect가 잘 동작하지 않기 때문에 이벤트 바인드를 사용하여 다른 버전을 만들었습니다.

html

<tr ng-repeat="product in products">
<td>
    <input type="text" ng-model="product.startDate" class="form-control date-picker" data-date-format="yyyy-mm-dd" datepicker/>
</td>
</tr>

대본

angular.module('app', []).directive('datepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker();
            element.bind('blur keyup change', function(){
                var model = attrs.ngModel;
                if (model.indexOf(".") > -1) scope[model.replace(/\.[^.]*/, "")][model.replace(/[^.]*\./, "")] = element.val();
                else scope[model] = element.val();
            });
        }
    };
});

안타깝게도 vicont의 답변이 통하지 않아서 ng-model에서도 마찬가지로 우아하고 중첩된 속성에 적합한 다른 솔루션을 찾았습니다.$parse를 사용하여 링크 함수의 속성을 통해 ng-model에 액세스합니다.

myApp.directive('myDatepicker', function ($parse) {
    return function (scope, element, attrs, controller) {
      var ngModel = $parse(attrs.ngModel);
      $(function(){
        element.datepicker({
            ...
            onSelect:function (dateText, inst) {
                scope.$apply(function(scope){
                    // Change binded variable
                    ngModel.assign(scope, dateText);
                });
            }
        });
     });
    } 
});

출처: ANGARLE.JS와 JQuery UI의 바인딩(DatePicker 예시)

Angular의 메인 Index.html 파일은 본문 태그를 ng 뷰로 사용할 수 있습니다.다음으로 Angular에 의해 Index.html로 풀되는 페이지 하단에 스크립트태그를 포함하기만 하면 됩니다.

<script type="text/javascript">
$( function() {
    $( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true, 
        yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>

왜 일을 너무 복잡하게 만들죠?

여기 내 코드가 있어

var datePicker = angular.module('appointmentApp', []);

datePicker.directive('datepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                dateFormat: 'dd-mm-yy',
                onSelect: function (date) {
                    scope.appoitmentScheduleDate = date;
                    scope.$apply();
                }
            });
        }
    };
});

myModule.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());
                //    scope.course.launchDate = date;
                    scope.$apply();
                }
            });

        }
    };
});

HTML 코드:

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

var selectDate = element.datepicker({
    dateFormat:'dd/mm/yy',
    onSelect:function (date) {
        ngModelCtrl.$setViewValue(date);
        scope.$apply();
    }
}).on('changeDate', function(ev) {
    selectDate.hide();
    ngModelCtrl.$setViewValue(element.val());
    scope.$apply();
});

저도 같은 문제가 있어서 참고문헌과 내용을 순서대로 정리하면 해결되었습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


var datePicker = angular.module('app', []);

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<body ng-app="app">
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}
</body>

나는 많은 어려움을 겪었고 2021년 11월 22일 현재 작동하는 솔루션을 발견했다.

js/css를 사용해야 하는 것

  1. <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

  2. <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

  3. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

  4. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

뷰의 html 코드

<p>Date <input type="text" name="dateRange" id="dateRange" value="01/01/2018 - 01/15/2018" /></p>

jquery 함수 핸들은 컨트롤러 본체 안에 있어야 합니다.다음은 예를 제시하겠습니다.

app.controller('homeController', ['$location','$scope','$rootScope','$http','$cookies','$interval', function($location,$scope,$rootScope,$http,$cookies,$interval){

// your $scope.fun=async function(){} etc all comes here

//then

//jquery function call
$('#dateRange').daterangepicker({
        startDate: moment().subtract(365,'days'),
        endDate:moment(),
        opens: 'left'
    }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
        $scope.fromDateData=start.format('YYYY-MM-DD');
        $scope.toDateData=end.format('YYYY-MM-DD');
    });
}]);

모듈 선언에 다음과 같이 Angular ui 부트스트랩 의존성이 결여되어 있는 것 같습니다.

angular.module('elnApp', ['ui.bootstrap'])

Angular-ui-bootstrap에 대해서는 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/18144142/jquery-ui-datepicker-with-angularjs

반응형

'programing' 카테고리의 다른 글

Spring Boot 프로젝트에서는 Login 페이지가 표시됩니다.  (0) 2023.03.23
ng-option을 사용하여 선택 요소의 기본값을 설정하는 방법  (0) 2023.03.23
VIM에서 저장 시 JSON을 자동 포맷하는 방법  (0) 2023.03.23
ng-timeout 디렉티브는 (키, 값)을 사용할 때 데이터를 정렬합니다.  (0) 2023.03.23
.py 파일의 MIME 유형은 무엇입니까?  (0) 2023.03.23

'programing'의 다른글

  • 현재글jQuery ui 날짜 선택기(Angularjs 포함)

관련글

댓글

티스토리툴바