Question

我正在尝试向表单添加日期选择器。我应该使用datepicker.js来做这件事。

我已将js文件包含在我的文件中，并且我已按照网站上的一些说明进行操作，但我的表现并不像我期望的那样。您不必显示弹出日历来选择从您关注输入字段时开始的日期，而是无法点击该字段，并且日历始终在其下方可见。

以下是我目前正在使用的内容：

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

有没有人对我有任何建议，或者有人能指点我一个体面的教程（我找不到一个）

Answer 1

替换此

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

有了这个

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

Answer 2

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

JS CODE

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

JSFIDDLE

LIVE DEMO

快乐编码：）

Answer 3

似乎框架并没有提供与默认情况下在demopage上看到的相同的功能。我写了一个小小的小提示，告诉你如何使用它 - 它有效，但我确信它并不打算以这种方式工作：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>

Answer 4

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

Answer 5

试试这个

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

datepicker.js没有按预期工作

5 个答案: