如何使用角度材料日曆

我正在構建一個角度材料移動應用程序，我需要將角度材料日曆集成在其中。但是，我似乎找不到適當的cdn或插件。我發現的教程非常混亂，我不想用bower或npm來安裝它，而是直接通過cdn來調用它。另外，在通過npm安裝時，沒有適當的文檔說明如何調用它們並在角度材料中使用它們。我對自己的角度js非常陌生。如果有人能指導我，我會非常感激。下面的鏈接似乎滿足了我想要的東西，但我不知道如何將它通過CDN融入我的應用程序，因爲它導致errorfull還是沒有結果如何使用角度材料日曆

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

來源

2016-05-13 Mahesh Mesta

角材質日曆示例：

如果你不想要任何cdn，只需使用瀏覽器下載所有的css/javascript，保存到本地並更改路徑即可。只需使用下面代碼中的網址即可。

/** 
 
* 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>

來源

2016-05-13 10:51:35

謝謝..That是真正有用的@Yin剛 –

如何使用角度材料日曆

回答

相關問題