Cara Membuat Date Picker atau Input memilih tanggal - Forum


Page 1 of 11
Forum » Developers » Web Programming » Javascript » Cara Membuat Date Picker atau Input memilih tanggal (Cara Membuat Input Date Picker atau Memilih Tanggal , Cara K)
Cara Membuat Date Picker atau Input memilih tanggal
sicklonTanggal Post: Th, 2017-08-03, 20.15.37 | Message # 1
Master Jubeman
Group: Administrators
Messages: 19
Awards: 0
Reputation: 32767
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 :

  • Load Website Akan berat.


SOLUSINYA :
Silahkan di Minify kode CSS, atau ambil yang seperlunya saja.


BIO:
Hidup hanya 1x, dan tidak bisa mengulang kemasa lalu. Gunakan Waktumu untuk berbuat sesuatu yang bermanfaat dan berbuat sesuatu baik yang selalu diingat orang.
 
Forum » Developers » Web Programming » Javascript » Cara Membuat Date Picker atau Input memilih tanggal (Cara Membuat Input Date Picker atau Memilih Tanggal , Cara K)
Page 1 of 11
Search: