zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    爬虫综合大作业
    爬取全部的校园新闻
    理解爬虫原理
    中文词频统计与词云生成
    复合数据类型,英文词频统计
    字符串操作、文件操作,英文词频统计预处理
    了解大数据的特点、来源与数据呈现方式
    大数据应用期末总评
    分布式文件系统HDFS 练习
    安装Hadoop
  • 原文地址:https://www.cnblogs.com/pumushan/p/5765861.html
Copyright © 2011-2022 走看看