モーダル内のdatepickerが開かない

実現したいこと

表示させたモーダル内でinput要素のdatepickerを機能させたいです。
現在は、モーダルに日付のinput要素を表示させることは出来ていますが、マウスで選択してもカレンダーが表示されない状態です。
2度クリックしたら動作するなどの記事も見かけましたが、何度選択しても表示されません。
ご助力お願いいたします。

前提

Angular
Bootstrap 3

該当のソースコード

memberlist.controller.js

1(function () { 2 'use strict'; 3 4 angular 5 .module('app.controllers') 6 .controller('MemberListController', MemberListController); 7 8 MemberListController.$inject = ['$uibModal', 'toaster', '$translate', 'FileSaver', 'FileDownloadService', 'MemberService', 'AuthService']; 9 function MemberListController($uibModal, toaster, $translate, FileSaver, FileDownloadService, MemberService, AuthService) { 10 var vm = this; 11 12 activate(); 13 14 function activate() { 15 vm.conditionExport = {}; 16 17 vm.downloadMonthlyConditionList = function () { 18 var modal = $uibModal.open({ 19 templateUrl: 'templates/views/modal/export-modal.html', 20 controller: "ConditionExportModalController as modal", 21 resolve: { 22 params: function () { 23 return { 24 } 25 } 26 } 27 }); 28 modal.result.then( 29 function () { 30 FileDownloadService.conditionDataMonthlyList(vm.conditionExport) 31 .then(function (response) { 32 var file = new Blob([response.data], {type: 'application/octet-stream'}); 33 FileSaver.saveAs(file, 'condition-list_' + moment().subtract(1, 'months').format('YYYY-MM') + '.xlsx'); 34 }) 35 .catch(function (error) { 36 var title = $translate.instant('messages.title.error'); 37 var body = $translate.instant('messages.body.error').replace('|error|', 'ファイルが存在しません'); 38 toaster.pop("error", title, body, null); 39 }); 40 } 41 ); 42 }; 43 } 44 } 45})();

exportmodal.controller.js

1(function () { 2 'use strict'; 3 4 angular 5 .module('app.controllers') 6 .controller('ExportModalController', ExportModalController); 7 8 ExportModalController.$inject = ['$uibModalInstance']; 9 function ExportModalController($uibModalInstance) { 10 var vm = this; 11 12 activate(); 13 14 function activate() { 15 16 vm.dateOpen = false; 17 18 vm.target_date = moment().format('YYYY/MM/DD'); 19 20 vm.dateOpen = function() { 21 vm.dateOpen = !vm.dateOpen; 22 }; 23 24 vm.pressClose = function () { 25 $uibModalInstance.close(); 26 }; 27 28 vm.pressDismiss = function () { 29 $uibModalInstance.dismiss(); 30 }; 31 } 32 } 33})();

exportmodal.jade

1#modal 2 .md-content 3 .modal-header 4 button.md-close.close(ng-click="modal.pressDismiss()") × 5 h4.modal-title(translate="items.modal.exporttitle") 6 .modal-body 7 .form-group 8 .input-group 9 span.input-group-addon 10 i.fa.fa-calendar 11 input#target_date.form-control(name="target_date", ng-model="modal.target_date", type="text", placeholder="{{ 'items.date' | translate }}", is-open="modal.datePickerOpen" uib-datepicker-popup="yyyy/MM/dd") 12 .modal-footer 13 button.btn.btn-primary(ng-click="modal.pressClose()", type='button', translate="actions.submit") 14

route.config.js

1/**========================================================= 2 * Module: config.js 3 * App routes and resources configuration 4 =========================================================*/ 5 6 7(function () { 8 'use strict'; 9 10 angular 11 .module('app.routes') 12 .config(routesConfig); 13 14 routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider']; 15 function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper) { 16 17 // Set the following to true to enable the HTML5 Mode 18 // You may have to set <base> tag in index and a routing configuration in your server 19 $locationProvider.html5Mode(false); 20 21 // defaults to dashboard 22 $urlRouterProvider.otherwise('/auth'); 23 24 // 25 // Application Routes 26 // ----------------------------------- 27 $stateProvider 28 .state('app', { 29 url: '/', 30 abstract: true, 31 templateUrl: helper.basepath('views/app.html'), 32 resolve: helper.resolveFor('modernizr') 33 }) 34 .state('app.member', { 35 url: 'member', 36 templateUrl: helper.basepath('views/member-list.html'), 37 resolve: helper.resolveFor('ngFileSaver', 'ngFileUpload', 'bs-daterangepicker', 'daterangepicker', 'fullcalendar', 'bs-datepicker'), 38 auth: 'isMasterEditable' 39 }); 40 41 } // routesConfig 42 43})(); 44 45

試したこと

・uib-datepicker-popupからdatepicker-popupへの変更
・exportmodal.controllerのactivate()内外に初期化処理?の追記(それぞれ試しました)

$('#target_date').datepicker({ format: 'yyyy/mm/dd', language: 'ja' }); $('#target_date').datepicker('setStartDate', '1900-01-01');

・date-range-pickerへの変更

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント