Jquery Pikaday在datepicker中不断恢复时间

我需要设置一个日期选择器，它也允许用户设置时间。 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

我做错了什么？这是我的问题的一个有效例子

据我所知，Pikaday是一个日期选择器，而不是一个日期和时间选择器，即使它返回一个标准的javascript日期对象，事实上，它与完整的时间戳一起工作

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

因为pikaday使用标准的javascript日期对象，所以您可以指定任何有效的格式字符串，即使它包含时间部分，但您只能选择天数，因此您将始终获得其0:00h时间戳

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

希望对你有帮助

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

下面是JSFIDLE示例：

$（“.datepicker”）。每个（函数（索引）{
变量容器=$（“”）；
var dateFld=$（“”）
.attr（“占位符”、“日/月/年”）
.appendTo（容器）
;
var timeFld=$（“”）
.attr（“占位符”，“h:mm[pm | am]”）
.appendTo（容器）
;
var target=$（this）//原始输入字段。
.replaceWith（container）//在DOM中替换它。
.appendTo（container）//重新插入新容器中。
.hide（）//隐藏它（提示：注释我以进行调试）。
;
var选择器=新皮卡日({
字段：dateFld[0]，
//格式：“D/M/YY hh:mm A”
格式：“D/M/YY”
});
函数updateFld（）{
//计算日期部分：
// --------------------
试一试{
var d=新日期（dateFld.val（））；
如果（isNaN（d））抛出“错误日期”；
}捕获（e）{
var d=new Date（）；//对无效值使用当前日期。
};
d=d.getDate（）
+“/”+（d.getMonth（）+1）/“+1”修复了从0开始计数的.getMongh（）。
+“/”+d.getFullYear（）
;
//计算时间部分：
// --------------------
试一试{
var t=新日期(
“2000/1/1”//Prepend一些有效日期（注意结尾空格）。
+timeFld.val（）
);
如果（isNaN（t））抛出“错误时间”；
}捕获（e）{
var t=新日期（“2000/1/1 0:0”）；//对无效值使用0:00
};
t=t.getHours（）//0-23
+“：”+t.getMinutes（）；
//更新目标字段：
// --------------------
//
target.val（d+“”+t）；
//注意：您将收到24小时的日期。如果您真的需要“上午/下午”，请
//应该多做一些管道工程。
};
dateFld.on（“变更”，updateFld）；
时间段（“更改”，updateFld）；
});

相关注释：

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

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

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

• 为了更好地在JSFIDLE中进行测试，请注释掉原始字段的“.hide（）”行。这样，您可以实时看到效果

据我所知，Pikaday是一个日期选择器，而不是一个日期和时间选择器，即使它返回一个标准的javascript日期对象，事实上，它与完整的时间戳一起工作

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

因为pikaday使用标准的javascript日期对象，所以您可以指定任何有效的格式字符串，即使它包含时间部分，但您只能选择天数，因此您将始终获得其0:00h时间戳

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

希望对你有帮助

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

下面是JSFIDLE示例：

$（“.datepicker”）。每个（函数（索引）{
变量容器=$（“”）；
var dateFld=$（“”）
.attr（“占位符”、“日/月/年”）
.appendTo（容器）
;
var timeFld=$（“”）
.attr（“占位符”，“h:mm[pm | am]”）
.appendTo（容器）
;
var target=$（this）//原始输入字段。
.replaceWith（container）//在DOM中替换它。
.appendTo（container）//重新插入新容器中。
.hide（）//隐藏它（提示：注释我以进行调试）。
;
var选择器=新皮卡日({
字段：dateFld[0]，
//格式：“D/M/YY hh:mm A”
格式：“D/M/YY”
});
函数updateFld（）{
//计算日期部分：
// --------------------
试一试{
var d=新日期（dateFld.val（））；
如果（isNaN（d））抛出“错误日期”；
}捕获（e）{
var d=new Date（）；//对无效值使用当前日期。
};
d=d.getDate（）
+“/”+（d.getMonth（）+1）/“+1”修复了从0开始计数的.getMongh（）。
+“/”+d.getFullYear（）
;
//计算时间部分：
// --------------------
试一试{
var t=新日期(
“2000/1/1”//Prepend一些有效日期（注意结尾空格）。
+timeFld.val（）
);
如果（isNaN（t））抛出“错误时间”；
}捕获（e）{
$(".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);


});

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

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