Datepicker Tidak Berfungsi Pada Inputan Yang Ditambahkan Dengan Perintah Append jQuery

Pada kesempatan kali ini saya akan membagikan sedikit pengalaman mengenai penggunaan datepicker jquery. Penggunaan jquery datepicker ini cukup sederhana kita cukup menambahkan satu class atau id yang mana class atau id tersebut memiliki fungsi datepicker, seperti contoh berikut :

<html lang="en">
<head> 
 <meta charset="utf-8">  
 <title>DatePicker</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 <script> 
 $( function() { 
    $("#datepicker").datepicker(); 
  } );
  </script> 
</head> 
<body> 
<p>Tanggal: <input type="text" id="datepicker"></p> 
</body> 
</html>

Hasilnya seperti berikut,

Contoh diatas itu adalah kasus normal ketika kita membuat datepicker secara langsung, tetapi ketika kita membuat suatu inputan tanggal tetapi kondisinya adalah ketika kita melakukan penambahan inputan tau menggunakan perintah append dengan perintah jQuery misalnya ke dalam sebuah tag <div>, fungsi dari datepicker tersebut tidak berjalan kita bisa dilihat pada kode berikut :



<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>DatePicker</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 <script> 
 $( function() { 
    $( ".datepicker" ).datepicker();
    $("#btnTambah").click(function () {
        $("#tanggalNew").append("<p>Tanggal 2 : <input type='text' class='datepicker' id='tgl2'></p>");
    }); 
 }); 
 </script> 
</head> 
<body> 
<p>Tanggal: <input type="text" class="datepicker" id="tgl1"></p> 
<div id="tanggalNew">
</div>
<input type="button" id="btnTambah" value="Tambah Tanggal" /> 
</body> 
</html>

Ketika kode tersebut dijalankan dan kemudian kita tekan tombol Tambah Tanggal maka akan muncul satu inputan tanggal baru tetapi ketika kita klik inputan tersebut, datepicker tidak berjalan,

Bagaimana cara supaya tanggal yang kita tambahkan baru itu bisa menjalankan fungsi datepicker? caranya cukup mundah, ikuti seperti berikut :
Pertama tama di bagian bawah kode ini

$("#tanggalNew").append("<p>Tanggal 2 : <input type='text' class='datepicker' id='tgl2'></p>");

cukup tambahkan kode dibawah ini,

$("#tgl2").removeClass("datepicker").datepicker();

Jadi kode secara keseluruhan seperti berikut :



<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>DatePicker</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 <script> 
 $( function() { 
    $( ".datepicker" ).datepicker();
    $("#btnTambah").click(function () {
        $("#tanggalNew").append("<p>Tanggal 2 : <input type='text' class='datepicker' id='tgl2'></p>"); 
        $("#tgl2").removeClass("datepicker").datepicker(); 
    }); 
 });  
 </script> 
</head> 
<body> 
<p>Tanggal: <input type="text" class="datepicker" id="tgl1"></p>
<div id="tanggalNew">
</div>
<input type="button" id="btnTambah" value="Tambah Tanggal" /> 
</body> 
</html>

Sekarang jalankan kembali kode tersebut, dan fungsi datepicker berjalan tanpa masalah. Untuk lebih jelasnya kita bisa lihat contoh pada link Berikut

Semoga bermanfaat...

Wednesday, December 28, 2016

Datepicker Tidak Berfungsi Pada Inputan Yang Ditambahkan Dengan Perintah Append jQuery

0 komentar:

Post a Comment