Ticker

6/recent/ticker-posts

Datepicker Tidak Berfungsi Pada Inputan Yang Ditambahkan Dengan Perintah Append jQuery

Desember 29, 2016
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...
Unknown

Diposting oleh Unknown

Posting Komentar

3 Komentar

  1. Unknown31 Mei 2017 pukul 06.15

    maaf mw tanya, kalw cara format datepickernya bagaimana ya? tanggalnya diubah menjadi 31-Mei-2017 misalkan
    terimakasih

    BalasHapus
    Balasan
    1. Unknown7 Juli 2017 pukul 13.49

      Bisa dilihat pada contoh disini https://jsfiddle.net/to7edv07/

      atau bisa baca pada artikel ini
      http://coding-azhari.blogspot.com/2017/07/membuat-format-tanggal-indonesia-dengan.html

      Hapus
  2. Dimitry-Ivancovic24 Agustus 2017 pukul 23.02

    Maaf neh mau tanya setelah di buat script sesuai di atas di db nya masih 0000-00-00 bantuan nya gan terima kasih...

    BalasHapus