uib-datepicker-popup에 캘린더가 표시되지 않습니다.

Question

Express 및 AngularJS를 사용하고 있습니다. ui-bootstrap 모듈로 날짜 선택 도구를 추가하려고했습니다. uib-datepicker를 추가하면 올바르게 작동합니다. 나는 UIB-날짜 선택기 - 팝업을 추가하려고하지만 결과는 내가 달력 버튼을 클릭하면, 그것은 팝업을 표시하지만 분명 오늘, 그리고 닫기 버튼 만있다가

uib-datepicker-popup

같았다. 캘린더를 표시하지 않습니다. 사전에 https://angular-ui.github.io/bootstrap/

감사 :

여기에 여기에 내가 코드를 취하는 문서가 내 HTML

<div ng-controller="DatepickerPopupDemoCtrl"> 
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> 


    <div class="col-md-6"> 
    <p class="input-group"> 
     <input type="text" uib-datepicker-popup class="form-control" ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
     <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
    </p> 
    </div> 
</div> 

그리고 컨트롤러

app.controller('DatepickerPopupDemoCtrl', function ($scope) { 


$scope.today = function() { 
    $scope.dt = new Date(); 
    }; 
    $scope.today(); 

    $scope.clear = function() { 
    $scope.dt = null; 
    }; 

    $scope.toggleMin = function() { 
    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date(); 
    $scope.dateOptions.minDate = $scope.inlineOptions.minDate; 
    }; 


    $scope.inlineOptions = { 
    customClass: getDayClass, 
    minDate: new Date(), 
    showWeeks: true 
    }; 

    $scope.dateOptions = { 
    dateDisabled: disabled, 
    formatYear: 'yy', 
    maxDate: new Date(2020, 5, 22), 
    minDate: new Date(), 
    startingDay: 1 
    }; 

    // Disable weekend selection 
    function disabled(data) { 
    var date = data.date, 
     mode = data.mode; 
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 
    } 

    $scope.toggleMin(); 

    $scope.open2 = function() { 
    $scope.popup2.opened = !$scope.popup2.opened; 
    }; 

    $scope.setDate = function(year, month, day) { 
    $scope.dt = new Date(year, month, day); 
    }; 

    $scope.format = 'yyyy-MM-dd'; 
    $scope.altInputFormats = ['M!/d!/yyyy']; 

    $scope.popup2 = { 
    opened: false 
    }; 

    var tomorrow = new Date(); 
    tomorrow.setDate(tomorrow.getDate() + 1); 
    var afterTomorrow = new Date(); 
    afterTomorrow.setDate(tomorrow.getDate() + 1); 
    $scope.events = [ 
    { 
     date: tomorrow, 
     status: 'full' 
    }, 
    { 
     date: afterTomorrow, 
     status: 'partially' 
    } 
    ]; 

    function getDayClass(data) { 
    var date = data.date, 
     mode = data.mode; 
    if (mode === 'day') { 
     var dayToCheck = new Date(date).setHours(0,0,0,0); 

     for (var i = 0; i < $scope.events.length; i++) { 
     var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); 

     if (dayToCheck === currentDay) { 
      return $scope.events[i].status; 
     } 
     } 
    } 

    return ''; 
    } 
}); 

입니다.

Answer 1

각도가있는 jade를 사용해야합니다. 당신이 날짜 선택 팝업을 추가 할 경우 , 당신은 HTML

<input type="text" uib-datepicker-popup="" name="dob" placeholder="Please enter date in YYYY-mm-dd format" 
    ng-model="dob" is-open="popup2.opened" datepicker-options="dateOptions" 
    ng-required="true" close-text="Close" class="form-control"/> 
<span class="input-group-btn"> 
    <button type="button" ng-click="open2()" class="btn btn-default"> 
    <i class="glyphicon glyphicon-calendar"></i> 
    </button> 
</span> 

에 대한 아래의 코드를 사용하여 컨트롤러

$scope.dateOptions = { 
    formatYear: 'yy', 
    maxDate: new Date(2020, 5, 22), 
    minDate: new Date(1970, 1, 1), 
    startingDay: 1 
}; 
$scope.open = function() { 
    $scope.popup.opened = true; 
}; 
$scope.popup = { 
    opened: false 
}; 
function getDayClass(data) { 
    var date = data.date, 
    mode = data.mode; 
    if (mode === 'day') { 
    var dayToCheck = new Date(date).setHours(0,0,0,0); 
    for (var i = 0; i < $scope.events.length; i++) { 
     var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); 
     if (dayToCheck === currentDay) { 
     return $scope.events[i].status; 
     } 
    } 
    } 
    return ''; 
} 

이를 추가하고이 CSS 파일에

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

수 있습니다

Answer 2

제 경우에는 프로젝트에서 npm (또는 bower)을 사용하지 않았습니다. 따라서 수동으로 다음 파일 (here에서 다운로드)을 경로에 넣어야 uib-datepicker-popup을 사용하는 날짜가있는 달력 팝업이 만들어집니다.

WebPages 
L___uib 
    L___template 
     L____datepicker 
      L____datepicker.html 
      L____day.html 
      L____month.html 
      L____year.html 
     L____datepickerPopup 
      L____poup.html