jQuery date & time picker

Question

Since i am working a lot with datetime in my project and it mostly is either feched or inserted into db, i found myselfe in need of some jQuery widget that could help dealing with this situation.

I am using MySQL datetime field for it which is formatted in following way:

yyyy-mm-dd hh:mm:ss

I tried to avoid some big plugins and create something on my own. While writing it i have encountered 2 problems.

JS:

$(function() {

    $("#datepicker").datepicker();
    $("#datepicker").change(function() {
        $("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
    });

    $( "#hours" ).slider({value:0, min: 0, max: 23, step: 1,
        slide: function( event, ui ) {
            $( "#pickhour" ).val( ui.value );
        }
    });

    $( "#minutes" ).slider({value:0, min: 0, max: 59, step: 1,
        slide: function( event, ui ) {
            $( "#pickminute" ).val( ui.value );
        }
    });

    $( "#seconds" ).slider({value:0, min: 0, max: 59, step: 1,
        slide: function( event, ui ) {
            $( "#picksecond" ).val( ui.value );
        }
    });
    $( "#pickhour" ).val( $( "#hours" ).slider( "value" ) );
    $( "#pickminute" ).val( $( "#minutes" ).slider( "value" ) );
    $( "#picksecond" ).val( $( "#seconds" ).slider( "value" ) );

});

HTML:

    <p>Data: <input type="text" name="datepicker" id="datepicker" size="8"></p>
    <p>Czas: <input type="text" name="pickhour" id="pickhour" size="1" readonly>
             <input type="text" name="pickminute" id="pickminute" size="1" readonly>
             <input type="text" name="picksecond" id="picksecond" size="1" readonly>
    </p>
    <p><div id="hours" style="width:10%;"></div></p>
    <p><div id="minutes" style="width:10%;"></div></p>
    <p><div id="seconds" style="width:10%;"></div></p>

Fiddle Link:

http://jsfiddle.net/hQ4rZ/

So the first problem regards time processing:

• if number of digits of selected hour, minute or second is 1 than 0 should be appended in front, so i tried to provide some if statement that checks the .length but even though selected hour was 12 it still returned 1 digit length, so im lost on how to do it

Other problem regards displaying entire datetime when its ready:

• if i completed selecting everything it would be nice to have some button like done that would prepare entire datetime formatted like this yyyy-mm-dd hh:mm:ss and put it into one input field so it could be processed by php and updated in db

is there someone who could help with that ?;)

Answer 1

Data:

Czas:

$(function() {

$("#datepicker").datepicker();
$("#datepicker").change(function() {
    $("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
});

$( "#hours" ).slider({value:0, min: 0, max: 23, step: 1,
    slide: function( event, ui ) {
        console.log(ui.value.toString().length);
        $( "#pickhour" ).val( ui.value.toString().length==1? "0"+ui.value :ui.value);
    }
});

$( "#minutes" ).slider({value:0, min: 0, max: 59, step: 1,
    slide: function( event, ui ) {
        $( "#pickminute" ).val(  ui.value.toString().length==1? "0"+ui.value :ui.value);
    }
});

$( "#seconds" ).slider({value:0, min: 0, max: 59, step: 1,
    slide: function( event, ui ) {
        $( "#picksecond" ).val(  ui.value.toString().length==1? "0"+ui.value :ui.value );
    }
});
$( "#pickhour" ).val( $( "#hours" ).slider( "value" ) );
$( "#pickminute" ).val( $( "#minutes" ).slider( "value" ) );
$( "#picksecond" ).val( $( "#seconds" ).slider( "value" ) );
$("#Done").on("click",function(){
    var dateVal=  $("#datepicker").val() +" " +  $("#pickhour").val()+":" + $("#pickminute").val()+":" + $("#picksecond").val() ;
    alert(dateVal);
})

});