Pikaday 在日期选择器中不断恢复时间

Question

我需要设置一个日期选择器，它还允许用户设置时间。 2016 年 6 月 6 日 03:28 下午

$(".datepicker").each(function(index){
var picker = new Pikaday({
    field: $(this)[0],
    position: 'bottom left',
    format: "D/M/YY hh:mm A"
});
});

但是，当我的格式正常工作时，pikaday 一直恢复到 12:00 AM。

我做错了什么？这是我的问题的一个工作示例 https://jsfiddle.net/pturula/hcba6L33/

Answer 1

据我了解，Pikaday是一个日期选择器，而不是日期和时间选择器，即使它returns是一个标准javascript Date 对象，事实上，它使用完整的时间戳。

日期仅由 0:00h（或 12:00pm）的时间戳表示。

因为 pikaday 使用标准 javascript Date 对象，您可以指定任何有效的格式字符串，即使它包含时间day 部分，但你只能选择几天，所以你总是会得到它的 0:00h 时间戳。

如果你想要一个日期和时间选择器，那么你应该搜索另一个实现或自己实现它（例如使用 pikaday 和 jquery timepicker）。

希望对您有所帮助...

编辑： 正如我在评论中所说，您可以自己将其实现为两个独立的字段作为一个单独的字段工作。

这里是 jsfiddle 示例：https://jsfiddle.net/L82h4x1y/

$(".datepicker").each(function(index){

    var container = $("<span></span>");
    var dateFld = $("<input type=\"date\"></input>")
        .attr("placeholder", "dd/mm/yyyy")
        .appendTo(container)
    ;
    var timeFld = $("<input type=\"time\"></input>")
        .attr("placeholder", "h:mm [pm|am]")
        .appendTo(container)
    ;
    var target = $(this)        // Original input field.
        .replaceWith(container) // Replace it in DOM.
        .appendTo(container)    // Reinsert inside new container.
        .hide()                 // Hide it (HINT: comment out me to debug).
    ;

    var picker = new Pikaday({
        field: dateFld[0],
        //format: "D/M/YY hh:mm A"
        format: "D/M/YY"
    });

    function updateFld(){

        // Calculate date part:
        // --------------------
        try {
            var d = new Date(dateFld.val());
            if (isNaN(d)) throw "Wrong date";
        } catch (e) {
            var d = new Date(); // Use current day on invalid values.
        };
        d = d.getDate()
            +"/"+(d.getMonth()+1) // "+1" fixes .getMongh() counting from 0.
            +"/"+d.getFullYear()
        ;

        // Calculate time part:
        // --------------------
        try {
            var t = new Date(
                "2000/1/1 " // Prepend some valid date (notice the ending space).
                +timeFld.val()
            );
            if (isNaN(t)) throw "Wrong time";
        } catch (e) {
            var t = new Date("2000/1/1 0:0"); // Use 0:00 on invalid values
        };
        t = t.getHours() // 0-23
            +":"+t.getMinutes();

        // Update target field:
        // --------------------
        //
        target.val(d+" "+t);
        // NOTE: You will receive 24h date. If you really need "am/pm" you
        // should do a few more plumbing.

    };

    dateFld.on("change", updateFld);
    timeFld.on("change", updateFld);


});

相关注释：

请注意，额外的输入字段没有具有任何 "name" 属性，因此将在提交时发送的唯一字段将是原来的.
Time 字段接受 am/pm 或 24h（任何有效的 javascript Date 对象时间）但原始字段将始终被填充标准 date/time (24h)。如果这不是您想要的，那么您需要再做一些管道工作。
如前所述，您还可以在时间字段中添加一个时间选择器插件（我还没有）。
为了更好地在 jsfiddle 中进行测试，请注释掉原始字段的“.hide()”行。这样你就可以实时看到效果了。

Answer 2

他们在自述文件页面上说：

Pikaday is a pure datepicker. It will not support picking a time of day. However, there have been efforts to add time support to Pikaday. See #1 and #18. These reside in their own fork.

You can use the work @owenmead did most recently at owenmead/Pikaday A more simple time selection approach done by @xeeali at xeeali/Pikaday is based on version 1.2.0. Also @stas has a fork stas/Pikaday, but is now quite old

owenmead 的版本仍然有效，所以我建议您使用那个。这是更新后的 jsfiddle 示例。因为这是一个fork，没有cdn，所以没有cdn那么流行，所以我直接在jsfiddle中复制粘贴了缩小的js和css。

// just to bypass "links to jsfiddle.net must be accompanied by code". There is no code change.

Answer 3

https://jsfiddle.net/KingRider/hcba6L33/3/

$(".datepicker").each(function(index){
        var hour = new Date();
    console.log(hour.get)
    var picker = new Pikaday({
        field: $(this)[0],
        format: "D/M/YY "+hour.getHours()+":"+hour.getMinutes()
    });
});

是吗？你需要时间。

Pikaday 在日期选择器中不断恢复时间

Pikaday keeps reverting time in datepicker

jquery

datepicker

pikaday