Bagaimana Mengolah Date Picker Pada Visual Form Builder

Bagaimana Mengolah Date Picker Pada Visual Form Builder

Form merupakan interaksi antara pengunjung dengan website, sehingga data diterima oleh pemilik website. Bagi anda yang memiliki website dengan menggunakan wordpress juga bisa menggunakan form. Salah satu plugin yang bagus untuk membuat form adalah dengan menggunakan plugin Visual Form Builder. Plugin ini sangat mudah digunakan walaupun anda tidak mengetahui coding sama sekali.

Saah satu fungsi yang sering digunakan pada form adalah Tanggal, dan untuk mempermudah pengunjung menggunakan fungsi  tanggal adalah menggunakan Jquery  Date Picker.

 

 

Namun beberapa anda telah menggunakan plugin  Visual Form Builder tetapi date picker tidak jalan. Memang beberapa theme wordpress tidak support untuk date picker, tetapi hal ini bisa kita olah dengan coding yg sederhana dengan tutorial sebagai berikut:

  1. Buat file javascript di theme folder anda, dengan nama my-js.js. Tempatkan my-js di folder js . Tambahkan coding dibawah ini:
jQuery(document).ready(function($) {
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });
});
  1. Ketika anda berada di form tersebut klik kanan > View Source. Temukan ID date picker seperti contoh dibawah

 

Setelah mendapatkan ID date picker diatas maka buka kembali my-js.js anda di cpanel dan tambahkan seperti coding dibawah:

jQuery(document).ready(function($) {
    $( '#item-vfb-8' ).datepicker({
        numberOfMonths: 1
    });
});

 

  1. Tambahan coding dibawah pada footer.php anda
function my_scripts_method() {
   wp_register_script( 'my-js-file',
       get_template_directory_uri() . '/js/my-js.js',
       array( 'jquery' ),
       '1.0',
       false );

   wp_enqueue_script( 'my-js-file' );
}

Done sekarang date picker anda sudah berjalan sesuai dengan jquery yang kita gunakan

Leave a comment