ng-hijri-gregorian-datepicker
Version:
Lightweight Angular.js hijri and gregorian datepicker directive built with Moment.js.
115 lines (97 loc) • 4.76 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bottom navbar example for Bootstrap</title>
<!-- flat-datepicker core CSS -->
<link rel="stylesheet" href="../dist/ng-hijri-gregorian-datepicker.css">
<!-- Bootstrap core CSS -->
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="testApp" ng-strict-di>
<div class="container" ng-controller="mainController">
<div class="jumbotron mt-3 py-4">
<h2>Ng hijri gergorian datepicker demo</h2>
<p class="lead">AngularJs Lib for Hijri and Gergorian date, fork from <a href="https://github.com/RemiAWE/ng-flat-datepicker">RemiAWE</a></p>
</div>
<div class="row">
<div class="col-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Hijri</span>
</div>
<input type="text" name="date" class="form-control" autocomplete="off" ng-hijri-gregorian-datepicker datepicker-config="hijriDatepickerConfig" selected-date="val" ng-model="date">
</div>
</div>
<div class="col-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Gregorian</span>
</div>
<input type="text" name="date" class="form-control" autocomplete="off" ng-hijri-gregorian-datepicker datepicker-config="gregorianDatepickerConfig" selected-date="val" ng-model="date">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-primary" ng-hijri-gregorian-datepicker
datepicker-config="hijriDatepickerConfig" selected-date="val" ng-model="date">Pick a date</button>
</div>
</div>
<div>
<code>
ng-model: {{ date | json }}
</code>
<br>
<code>
selected-date: {{ val }}
</code>
</div>
<div class="row mt-5">
<div class="col-4 align-self-center">
</div>
</div>
<div class="row">
<div class="col-3">
<code>
moment.local() = {{locale}}
</code>
</div>
<div class="col-8">
<pre><code>//Switch language: <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary" ng-click="switchLocale('ar-sa')">Arabic</button>
<button type="button" class="btn btn-outline-primary" ng-click="switchLocale('en')">English</button>
</div></code></pre>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-sm">
<a class="navbar-brand" href="https://github.com/haboub/ng-hijri-gregorian-datepicker/">Github</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
©2018. Code licensed under an MIT-style License
</li>
</ul>
</div>
</nav>
<!-- JS -->
<script src="../node_modules/moment/moment.js"></script>
<script src="../node_modules/moment/locale/ar-sa.js"></script>
<script src="../node_modules/moment-hijri/moment-hijri.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../dist/ng-hijri-gregorian-datepicker.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>