Question

我需要设置一个也允许用户设置时间的日期选择器。 6/6/16 03:28 PM

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

然而，当我的格式正常工作时，pikaday一直恢复到凌晨12:00。

我做错了什么？这是我的问题的一个有效例子 https://jsfiddle.net/pturula/hcba6L33/

Answer 1

在他们的自述页面上，他们说：

Pikaday是一个纯粹的日期选择器。它不会支持选择一天中的时间。但是，已经努力为Pikaday增加时间支持。请参阅#1和#18。这些都存在于自己的分支中。

您最近可以使用@owenmead所做的工作owenmead/Pikaday @xeeali在xeeali/Pikaday完成的更简单的时间选择方法基于版本1.2.0。另外@stas有一个分叉stas/Pikaday，但现在已经很老了

owenmead的版本仍然有效，所以我建议你使用那个版本。这是更新的jsfiddle示例。因为这是一个fork并且不像原来那样流行，所以没有cdn，所以我在jsfiddle中直接粘贴了缩小的js和css。

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

Answer 2

只要我了解， Pikaday 是日期选择器，而不是日期和时间选择器，即使它返回标准的javascript Date 对象事实上，它与完整的时间戳一起使用。

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

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

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

希望它有所帮助...

编辑：正如我所说的那样，你可以自己实现它作为单个的两个sepparated字段。

这里是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);


});

相关说明：

请注意，额外的输入字段不会具有任何“名称”属性，因此将在提交时发送的唯一字段将是原始字段。
时间字段接受上午/下午或24小时（任何有效的javascript 日期对象时间），但原始字段将始终填充标准日期/时间（24小时）。如果它不是你想要的，那么你需要做更多的管道。
如上所述，您还可以在时间字段中添加timepicker插件（我还没有）。
为了在jsfiddle中进行更好的测试，请注释掉原始字段的“.hide（）”行。这样你就可以实时看到效果。

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在datepicker中不断恢复时间

3 个答案: