Bagaimana Cara membuat Date Picker atau Input Memilih Tanggal ? Sedikit Penjelasan. Cara Kerjanya Sederhana, DatePicker berfokus ketika input (klik input, atau tombol) dengan Muncul Sebuah Kalender untuk dipilih Tanggalnya. Apabila sudah dipilih maka Tanggal tersebut akan muncul dikolum Input (sebagai nilai Input).
Mungkin Kalian Sudah banyak paham, Kita langsung saja cara membuatnya.
1. HEAD
Masukan Kode ini diatas Head
Code
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
2. KODE INPUT
Masukan Kode ditempat yang di inginkan
Code
<div id="wrapper" ng-app="myApp">
<p>{{datePicker || "00/00/0000"}}</p>
<input type="text" ng-model="datePicker" datepicker />
</div>
3. JavaScript
Masukan Kode tempat dibawah kode INPUT tadi
Code
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js'></script>
<script>var myApp = angular.module('myApp', []);
myApp.directive("datepicker", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, elem, attrs, ngModelCtrl) {
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
var options = {
dateFormat: "mm/dd/yy",
onSelect: function (dateText) {
updateModel(dateText);
}
};
elem.datepicker(options);
}
}
});
//# sourceURL=pen.js
</script>
KET.
Apabila Sudah mempunyai Salah satu Script atau terpasang di website/blog anda, maka tidak perlu ditambahkan
Code
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js'></script>
KEKURANGAN :
SOLUSINYA :
Silahkan di Minify kode CSS, atau ambil yang seperlunya saja.
