angularjsプラグインdaterangepickerを使用してカレンダーを作成する
3621 ワード
1.jsルーティングファイルの下にページcssファイルパスを追加
2.ページcontrollerファイルの下にjsファイル参照を追加
3.ページにdiv設計を加える
参照先:https://blog.csdn.net/take_dream_as_horse/article/details/536995514参照エラーgetfullyer-is-not-a-function問題解決:
https://stackoverflow.com/questions/4929382/javascript-getfullyear-is-not-a-function 解決方法、修正
を選択します.
変更後のページコントロールファイルの下に追加:
var ApplylistState = {
name: "CMS.apply.IssueApplyInfo",
url: '/IssueApplyInfo',
views: {
'[email protected]': angularAMD.route({
templateUrl: 'IssueApplyInfo/IssueApplyInfo.html',
controller: 'CMS.IssueApplyInfo.IssueApplyInfoCtrl',
controllerUrl: 'IssueApplyInfo/IssueApplyInfoCtrl',
// css
css: './../../calendar/daterangepicker.css'
})
}
};
2.ページcontrollerファイルの下にjsファイル参照を追加
'./../../calendar/angular',
'./../../calendar/angular-locale_zh-cn',
'./../../calendar/ui-bootstrap-tpls-0.9.0',
3.ページにdiv設計を加える
参照先:https://blog.csdn.net/take_dream_as_horse/article/details/536995514参照エラーgetfullyer-is-not-a-function問題解決:
https://stackoverflow.com/questions/4929382/javascript-getfullyear-is-not-a-function 解決方法、修正
///
scope.listFilter= "2016-12-16";
を選択します.
///
scope.listFilter= new Date();
変更後のページコントロールファイルの下に追加:
///
scope.listFilter= new Date("2016-12-16");
scope.dateOptions = {
formatYear: 'yy',
startingDay: 1,
//
maxDate:new Date()
};
///
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened = true;
};
input
scope.formats = ['yyyy-MM-dd', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
scope.format = scope.formats[0];
///
scope.today = function() {
scope.dt = new Date();
};
scope.today();
///
scope.clear = function() {
scope.dt = null;
};
//
scope.print=function(){
//
var d=new Date(scope.listFilter);
// 10 , 0
var day=d.getDate()
if(day < 10){
day='0'+day;
}
var time=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + day;
console.log(time);
}