jquery - datepicker.js not working as expected

Question

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)

Answer 1

为什么不使用 Jquery UI 中的 Datepicker api，它的工作方式与您期望的一样

JS代码

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

JSFIDDLE 的现场演示

快乐编码:)

Answer 2

似乎该框架没有提供与默认情况下在演示页面上看到的相同的功能。我写了一个小小提琴来展示你如何使用它——它可以工作，但我确信它不打算那样工作：D

小提琴

  <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>

Answer 3

替换这个

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

有了这个

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

Answer 4

我发现了问题：日期选择器中的某些样式在main.css另一个 css 文件中被覆盖。我重命名了一些样式并更改了其他样式，现在它正在工作。

Answer 5

尝试这个

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