jQuery日期和時間選擇器

由於我在我的項目中工作了很多日期時間，並且它大部分都是插入或插入數據庫，我發現myselfe需要一些可以幫助處理這種情況的jQuery小部件。jQuery日期和時間選擇器

我使用的是下面的方式格式化它MySQL的時間字段：

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位長度，因此Im丟失怎麼辦呢

其他問題方面顯示整個日期時間，當其準備：

如果我已經選擇的一切，將是不錯的像done一些按鈕將編制整個日期時間格式化如下yyyy-mm-dd hh:mm:ss，並把它變成一個輸入字段，以便它可以通過PHP進行處理，並在DB

更新有沒有人誰可以提供幫助的;）

來源

2014-07-24 Mevia

爲什麼不能使用已經制作好的datetimepickers？你不應該做一些驗證 - http://www.malot.fr/bootstrap-datetimepicker/demo.php – Michael

我會建議你使用這個插件http://trentrichardson.com/examples/timepicker/，因爲你會有更好地控制日期和時間選擇和格式化！ –

數據：

Czas：

$（函數（）{

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

}）;

來源

2014-07-24 12:03:43

完美，thx隊友;） – Mevia

jQuery日期和時間選擇器

回答

相關問題