CODEWITHSUNDEEP
javascriptangularjscordovaionic-frameworkangular-material
Mahesh Mesta
Mahesh Mesta

Reputation: 783

How to use Angular Material Calendar

I am building an angular material mobile app and I need to integrate angular material calendar in it.However I do not seem to find a proper cdn or plugin for it.The tutorials I found were very confusing, I do not wish to install it with bower or npm , but rather directly call it through a cdn. Morever,while installing it through npm,there is no proper documentation as to how to call them and use them in angular material.I am very new to angular js myself.I would really appreciate if someone could guide me. The following link seem to satisfy what I want, but I do not know how to integrate it into my app through cdn as it leads errorfull or no results

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

Upvotes: 1

Views: 3278

Answers (1)

Yin Gang
Yin Gang

Reputation: 1443

Angular Material Calendar Example:

If you don't want any cdn , just use browser to download all the css/javascript, save it locally and change the path to it. Just use the url in code below.

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

Upvotes: 1

Related Questions