• 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

  • 相关阅读:
    不怕路长,只怕心老——走在IT行业的路上
    python中 r'', b'', u'', f'' 的含义
    WSGI接口
    HTTP协议简介
    Flask中的Session
    一个 android 开机自动启动功能的例子
    遍历 JObject各属性(CSharp2)
    ASP.NET 伪随机数函数避免重复一例
    浏览器环境下 ES6 的 export, import 的用法举例
    在浏览器环境使用js库(不用require功能)
  • 原文地址:https://www.cnblogs.com/pumushan/p/5765861.html
Copyright © 2020-2023  润新知