0

我需要设置一个日期选择器，它还允许用户设置时间。2016 年 6 月 6 日下午 3: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。

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

4

3 回答 3

4

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

Pikaday 是一个纯粹的日期选择器。它不支持选择一天中的时间。但是，已经努力为 Pikaday 添加时间支持。参见#1和#18。这些驻留在自己的分叉中。

您可以使用@owenmead最近在owenmead/Pikaday所做的工作@xeeali在xeeali / Pikaday所做的更简单的时间选择方法基于版本 1.2.0。@stas也有一个 fork 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.
于 2016-06-20T13:31:54.073 回答
1

据我所知，Pikaday是一个日期选择器，而不是一个日期和时间选择器，即使它返回一个标准的 JavaScript Date对象，事实上，它可以使用完整的时间戳。

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

因为pikaday使用标准的 javascript日期对象，您可以指定任何有效的格式字符串，即使它包含时间部分，但您只能选择天数，因此您将始终获得其 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);


});

相关说明：

  • 请注意，额外的输入字段没有任何“名称”属性，因此提交时将发送的唯一字段将是原始字段。

  • 时间字段接受上午/下午或 24 小时（任何有效的 JavaScript日期对象时间），但原始字段将始终填充标准日期/时间（24 小时）。如果这不是你想要的，那么你需要做更多的管道。

  • 如前所述，您还可以将时间选择器插件添加到时间字段（我还没有）。

  • 为了在 jsfiddle 中进行更好的测试，请注释掉原始字段的“.hide()”行。这样你就可以实时看到效果。

于 2016-06-14T16:33:10.910 回答
0

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()
    });
});

它的？你需要时间。

于 2016-06-21T14:33:56.967 回答