CODEWITHSUNDEEP
jquerydatepicker
Skytiger
Skytiger

Reputation: 1845

datepicker.js not working as expected

I'm trying to add a date picker to a form. I'm supposed to use datepicker.js to do this.

I've included the js files in my file, and I've followed the little bit of instructions on the site, but mine isn't acting like I expect it to. Instead of displaying a pop-up calendar to select a date from when you focus on the input field, the field is unclickable, and the calendar is always visible right under it.

Here's what I'm currently using:

<input class="datepicker" placeholder="Select a departure date&hellip;"></input>
    <script>
        $(".datepicker").pickadate()
    </script>

Does anyone have any advice for me, or can anyone point me at a decent tutorial(I haven't been able to find one)

Upvotes: 1

Views: 1616

Answers (5)

Skytiger
Skytiger

Reputation: 1845

I found the problem: Some of the styling in the datepicker's main.css was being overridden in another css file. I renamed some styles and changed others, and it's working now.

Upvotes: 1

Mx.
Mx.

Reputation: 3665

Seems like that framework doesnt provide the same funcitonality as seen on the demopage by default. I've written a little fiddle to show how you can use it- it works but I'm sure it wasnt intended to work that way :D

FIDDLE

  <input />
    <script>
$('input').click(function () {
    var oldInput = $(this); //save this for using in the onSet event
    var newInput = $(this).clone(true); //clone old input to prevent weird changes from datepicker.js
    $(this).pickadate({
        onSet: function (event) { //occurs when something is selected
            console.log('Just set stuff:', event)
            if(event.highlight == undefined){  //is false when changing months         
            $(oldInput).next().remove(); //hide picker
            $(newInput).val($(oldInput).val()); //save value from weird generated input
            $(oldInput).before(newInput); //place new normal input
            $(oldInput).remove(); // remove weirt input
            }
        }
    })
});
    </script>

Upvotes: 2

dreamweiver
dreamweiver

Reputation: 6002

why dont you use the Datepicker api from Jquery UI, it works just the way you are expecting it for

JS CODE

$(function () {
    $("#datepicker").datepicker();
});

LIVE DEMO at JSFIDDLE

Happy Coding :)

Upvotes: 2

Boss
Boss

Reputation: 475

Try this 

 $(".datepicker").datepicker({
        format: "dd/mm/yyyy"
    }).on('changeDate', function (ev) {
        $(this).blur();
        $(this).datepicker('hide');
   });

Upvotes: 0

Mahmoud
Mahmoud

Reputation: 1395

Replace this

<input class="datepicker" placeholder="Select a departure date&hellip;"></input>

With this one

<input class="datepicker" placeholder="Select a departure date&hellip;" />

Upvotes: 2

Related Questions