jQuery 날짜 및 시간 선택 도구

Question

프로젝트에서 datetime을 많이 사용하고 있기 때문에 대부분이 feched 또는 db로 삽입되었으므로이 상황을 처리하는 데 도움이되는 jQuery 위젯이 필요합니다.

yyyy-mm-dd hh:mm:ss

내가 몇 가지 큰 플러그인을 방지하고 내 자신에 뭔가를 만들려고 :

나는 다음과 같은 방식으로 서식이 그것을 위해 MySQL의 날짜 필드를 사용하고 있습니다. 그것을 쓰는 동안 나는 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/

그래서 첫 번째 문제에 관해서 시간 처리 :

• 선택한 시간, 분 또는 초의 자릿수가 0보다 앞에 오는 경우 .length을 확인하는 if 문을 제공하려고했지만 선택한 시간이 12 일 때 1 자릿수의 길이가 반환되었지만, 그래서

다른 문제가 전체 날짜를 표시 안부를 수행하는 방법에 손실 메신저 때의 준비 : 내가 모든 것을 선택 완료 한 경우는 전체 날짜를 준비 할 done 같은 몇 가지 버튼이 좋을 것이다

• 이 형식은와 같습니다. ?이 PHP에 의해 처리 및 DB

에 업데이트 할 수 있도록 73,210 그와 함께 도움을 줄 수있는 사람이 하나 개의 입력 필드에 넣어)

Answer 1

데이터 :

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

});