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