angularjs mobiscroll日历控件
<!DOCTYPE html>
<html ng-app="datetimeMinmax" ng-controller="demoController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>mobiscroll</title>
<!-- 需要引用的js和css start -->
<script src="ionic.bundle.min.js"></script>
<script src="angular-resource.min.js"></script>
<script src="bindonce.js"></script>
<script src="mobiscroll.custom-3.0.0-beta4.min.js"></script>
<link href="mobiscroll.custom-3.0.0-beta4.min.css" rel="stylesheet">
<!-- 需要引用的js和css end -->
<script>
angular.module('datetimeMinmax', ['mobiscroll-datetime']).controller('demoController', ['$scope', function ($scope) {
// 定义日期显示的属性对象
$scope.settings = {
theme: "android-holo-light",// 设置主题风格
lang: 'zh',// 设置语言中文
endYear: (new Date()).getFullYear() + 10, // 设置结束年份 默认为明年 下设置了max 此endYear不起作用
min: new Date('2016','08','10'),// 设置开始日期
max: new Date('2016','10','10')// 设置结束日期
};
// 给指定对象(id='myDate')动态设置日期属性
mobiscroll.date('#myDate', $scope.settings);
// $("#myDate").mobiscroll().date($scope.filterStartDateSetting);// 此方法需要引用jquery
/*
$scope.myDate = "" 日期1 默认值为今天
$scope.myDate未定义 或者 $scope.myDate = null 或者 $scope.myDate = undefined 日期1 默认值为空白
*/
$scope.myDate = "";
}]);
</script>
</head>
<body>
<!--
通过 mobiscroll-date="settings" 设置日期属性
-->
日期1 : <input ng-model="myDate" mobiscroll-date="settings" ng-click="'datetimeMinmax'.show()"/><br/><br/>
<!--
通过 mobiscroll.date('#myDate', $scope.settings); 设置日期属性
-->
日期2 : <input id='myDate' ng-click="'datetimeMinmax'.show()"/>
</body>
</html>
官方参考文档 https://docs.mobiscroll.com
