文章/答案/技术大牛

发布

问如何使用角度材料日历
EN

Stack Overflow用户

提问于 2016-05-13 10:04:04

回答 1查看 3.2K关注 0票数 1

我正在构建一个角质材料移动应用程序，我需要在it.However中集成角材料日历--我似乎没有找到一个合适的cdn或插件，因为我发现it.The教程非常令人困惑，我不希望用bower或npm安装它，而是直接通过cdn调用它。此外，在通过npm安装它时，没有适当的文件说明如何调用它们并在角材料中使用它们。我自己对角质js非常陌生，如果有人能指点我，我将非常感激。下面的链接似乎满足了我的需要，但我不知道如何通过cdn将它集成到我的应用程序中，因为它会导致错误或没有结果。

 https://github.com/logbon72/angular-material-datetimepicker

javascript

angularjs

cordova

ionic-framework

angular-material

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-13 10:51:35

角质材料日历示例：

如果您不需要任何cdn，只需使用浏览器下载所有css/javascript，将其保存在本地并更改到它的路径。只需使用下面代码中的url。

/**
 * Created by intelWorx on 11/11/2015.
 */
(function() {
  'use strict';
  angular.module('mdDatetimePickerDemo', [
      'ngMaterialDatePicker'
    ])
    .controller('DemoCtrl', function($scope) {
      $scope.date = new Date();
      $scope.time = new Date();
      $scope.dateTime = new Date();
      $scope.minDate = moment().subtract(1, 'month');
      $scope.maxDate = moment().add(1, 'month');

    });
})();

<html ng-app="mdDatetimePickerDemo">

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.css" rel="stylesheet" />
  <link href="https://logbon72.github.io/angular-material-datetimepicker/css/material-datetimepicker.css" rel="stylesheet" />
</head>

<body>
  <md-content>

    <h3>Datepicker only</h3>
    <md-input-container class="md-input-has-placeholder">
      <label>Start Date/Time</label>
      <input time="false" date="true" mdc-datetime-picker="" type="text" id="date" placeholder="Date" ng-model="date" min-date="minDate" max-date="maxDate" class=" md-input">
    </md-input-container>
    
    <br />

    <h3>Timepicker only(12-hour)</h3>
    <md-input-container class="md-input-has-placeholder">
      <label>Start Date/Time</label>
      <input mdc-datetime-picker="" date="false" time="true" type="text" id="time" short-time="true" placeholder="Time" min-date="minDate" format="hh:mm a" ng-model="time" class=" md-input">
    </md-input-container>

    <br />
    
    <h3>Timepicker only(24-hour)</h3>
    <md-input-container class="md-input-has-placeholder">
      <label>Start Date/Time</label>
      <input mdc-datetime-picker="" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm" ng-model="time" class=" md-input">
    </md-input-container>
    
    <br />
    
    <h3>DatepTimePicker</h3>
    <md-input-container class="md-input-has-placeholder">
      <label>Start Date/Time</label>
      <input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime" placeholder="Date" min-date="date" ng-model="dateTime" class=" md-input">
    </md-input-container>
    
    <br />
    
    <h3>Date Range Example</h3>

    <div class="range layout-column flex-gt-md-30">
      <md-input-container class="md-input-has-placeholder">
        <label>Start Date/Time</label>
        <input mdc-datetime-picker="" date="true" time="true" type="text" placeholder="Date" max-date="dateTimeEnd" ng-model="dateTimeStart" class=" md-input" id="input_0">
      </md-input-container>
      <md-input-container class="md-input-has-placeholder">
        <label>End Date/Time</label>
        <input mdc-datetime-picker="" date="true" time="true" type="text" placeholder="Date" min-date="dateTimeStart"="dateTimeEnd" class=" md-input" id="input_1" ng-model="dateTimeEnd">
      </md-input-container>
    </div>

  </md-content>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.js"></script>
  <script type="text/javascript" src="https://logbon72.github.io/angular-material-datetimepicker/js/angular-material-datetimepicker.js"></script>



</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37207112

复制

相似问题

问如何使用角度材料日历
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用角度材料日历EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用角度材料日历
EN