CODEWITHSUNDEEP
javascriptjquerydatepicker
Gusti Aldi
Gusti Aldi

Reputation: 201

3 datepick in 3 forms in 1 page

I have 1 page that have 3 form in it, then my problem is my datepicker is working 1 only, the other make null result, how can I use this 3 date picker in 3 different form ?

here's my JS

 $(document).ready(function(){
        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'dd/mm/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })

just in case, I possible how can I make 3 datepick with different name ? (like date, date1 & date3) in this 1 JS

Upvotes: 0

Views: 41

Answers (1)

MyTwoCents
MyTwoCents

Reputation: 7624

instead of using var date_input=$('input[name="date"]');

add unique id to each datepicker and use above line like this 

var date_input=$('#datepiker1, #datepickwer2, #datepicker3');

should work fine

try these

Try 1: if works that means your datepicker or datepiker1 has not yet been loaded 

setTimeout(function(){ 
    var date_input=$('#datepiker1, #datepickwer2, #datepicker3');

    date_input.datepicker({
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    });

 }, 500);

try 2:

 $("#datepiker1").datepicker({
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    })

    $("#datepiker2").datepicker({
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    })

    $("#datepiker3").datepicker({
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    })

Upvotes: 1

Related Questions