<!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