Question

由于我在我的项目中使用datetime工作很多，并且它主要是feched或插入db，我发现myselfe需要一些jQuery小部件来帮助处理这种情况。

我正在使用MySQL datetime字段，格式如下：

yyyy-mm-dd hh:mm:ss

我试图避免一些大插件并自己创建一些东西。写作时，我遇到了2个问题。

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>

小提琴链接：

http://jsfiddle.net/hQ4rZ/

所以第一个问题涉及时间处理：

如果选中的小时，分钟或秒的位数是1，那么应该在前面添加0，所以我试图提供一些if语句来检查.length，但即使选择的小时是12它仍然返回1位数长度，所以我很失落如何做到这一点

其他问题涉及在准备好时显示整个日期时间：

如果我完成了所有选择，那么有一些像done这样的按钮可以准备像yyyy-mm-dd hh:mm:ss这样格式化的整个日期时间，并将其放入一个输入字段，这样就可以通过php处理它了。在db

有人可以提供帮助吗？;）

Answer 1

数据：

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

}）;

jQuery日期＆amp;时间选择器

1 个答案: