Pikaday keeps reverting time in datepicker

Question

I need to setup a datepicker that also allows the user to set a time. 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"
});
});

However, while i got the format working, pikaday keeps reverting back to 12:00 AM.

What am i doing wrong? Here's a working example of my issue https://jsfiddle.net/pturula/hcba6L33/

Answer 1

As long as I understand, Pikaday is a datepicker, not a date&time picker even it returns a standard javascript Date object which, in fact, works with complete timestamps.

Dates are simply represented by its timestamp at 0:00h (or 12:00pm).

Because pikaday uses standard javascript Date object, you can specify any valid formatting string even if it includes time of day parts, but you only can pick for days, so you will always get its 0:00h timestamp.

If you want a date and time picker, then you should search for another imlementation or implement it by yourself (for example by using pikaday and jquery timepicker).

Hope it helps...

EDIT: As I said om comments, you can implement it by yourself as two sepparated fields working as single one.

Here the jsfiddle example: 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);


});

Relevant notes:

• Notice that extra input fields does'nt have any "name" attributes, so the only field which will be send on submit will be the original one.

• Time field accepts am/pm or 24h (any valid javascript Date object time) but the original field will be always filled with standard date/time (24h). If it's not what you want, then you well need to do a few more plumbing.

• As said, you can also add a timepicker plugin to the time field (I didn't yet).

• For better testing in jsfiddle, comment out the ".hide()" row of the original field. This way you could see the effect in real time.