æ¹æ³/æ¥éª¤
1
é¦å
ï¼æ们å°è¿æ¬¾æ¥ææ§ä»¶ä¸è½½ä¸æ¥ãç¾åº¦bootstrapæ¥ææ§ä»¶å³å¯ã
2
å°ä¸è½½å¥½çæ¥ææ§ä»¶çcssãjså¼å
¥èªå·±çæ件ä¸ã
å¨è¿ééè¦å¼å
¥çæ件æï¼
bootstrap.min.cssï¼å«æbootstrap ææcssï¼
bootstrap-datetimepicker.min.cssï¼éè¦ï¼è¿å°±æ¯æ¥ææ§ä»¶æéçæ ·å¼è¡¨ï¼
jquery-1.8.3.min.jsï¼å
¶ä»çæ¬çjqueryä¹å¯ä»¥ï¼
bootstrap.min.jsï¼å«æbootstrap ææjsï¼
bootstrap-datetimepicker.jsï¼éè¦ï¼è¿å°±æ¯æ¥ææ§ä»¶æéçjsï¼
locales/bootstrap-datetimepicker.fr.jsï¼éè¦ï¼è¿éæ¯æ¥ææ§ä»¶åå§å¼ï¼
3
å°æææ件å¼å
¥å®æåï¼å°±å¼å§è®¾ç½®æ¥ææ§ä»¶å§ã
è¿æ¯ç¬¬ä¸ç§æ ·å¼ãå½ç¶ï¼ä½ å¯ä»¥åªè¦inputå°±å¯ä»¥äºã
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
第äºç§æ ·å¼ï¼å¸¦æéç½®æé®ï¼ç¨äºæ¸
空è¾å
¥æ¡ï¼çç»ä»¶æ¨¡çï¼
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
içä½ç¨å°±æ¯ä¸¤ä¸ªå°å¾æ ï¼è¥ä¸è¦å¯ä»¥å å»ã
æç®æ´çæ ·å¼ï¼åªæinput,ç¹å»å¼¹åºéæ©å¨ï¼
<input class="span2" size="16" type="text" value="12-02-2012">
å½ç¶ï¼åªæè¿äºæ¯æ æ³å¼¹åºæ¥æéæ©å¨çï¼è¿éè¦jsæ¥æ¿æ´»ã
4
è¿éæ¯æéè¦çä¸æ¥ï¼jsæ¿æ´»æ¥æéæ©å¨ï¼
<script type="text/javascript">
$('ä½ çinputçclassæid').datetimepicker({
//ä¸å åæ°
});
</script>
å°è¿ä¸ªåå¨ä½ ç页é¢å
ï¼è³äºåæ°ï¼ä¸ä¼åä»ç»ãè¿æ ·å°±å¯ä»¥æ¿æ´»ä½ çæ¥æéæ©å¨äºï¼ç¹å»input便å¯ä»¥å¼¹åºéæ©å¨ã
5
æ¥æéæ©å¨çåæ°è®¾ç½®ï¼
format
weekStart
startDate
endDate
daysOfWeekDisabled
autoclose
startView
minView
maxView
todayBtn
todayHighlight
keyboardNavigation
language
forceParse
minuteStep
pickerPosition
viewSelect
showMeridian
initialDate
è¿äºå±æ§ä¸ç¨å
¨é¨è®¾ç½®ï¼ä½æäºæ¯å¿
é¡»çï¼æ¯å¦formatã
è¿éæ¯å°ç¼æ使ç¨çä¸æ¬¾æ¥æéæ©å¨çåå§å设置ï¼
$('.date').datetimepicker({
format:yyyy-mm-dd,
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
bootstrapæ¥æéæ©å¨çå±æ§é常å¤ï¼è¿ä¹ç»äºç¨æ·è¾å¤§çéæ©æ§ï¼å¿«å»è®¾ç½®ä½ èªå·±çDIYæ¥æéæ©å¨å§ï¼
温馨提示:答案为网友推荐,仅供参考