安利一個簡約好看的日期和時間選擇器

本仙女過不少日期的插件，都以爲比較醜，誰叫人家是個顏控QAQ。。。javascript

意外發現了前端框架sui裏面帶的日期選擇器，比較符合本仙女的審美，\(^o^)/css

今兒在這留下，下次用也好找~ 啊哈哈(,,• ₃ •,,)~~html

由於我經常使用的是一段日期的選擇因此我就寫了這一段。。前端

切記！必定要引入sui-append.css，否則會錯亂。。java

<!DOCTYPE html>
<html>
	<head>
		<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
		<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui-append.css" rel="stylesheet">
        <title>日期選擇器</title>
        <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>
        <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery.min.js"></script>
    </head>
    <body>

        <div id="demo4" class="control-group input-daterange fl search_z">
	        <label class="control-label">時間選擇：</label>
	        <div class="controls">
		        <input type="text" class="input-medium input-date"><span> 至</span>
		        <input type="text" class="input-medium input-date">
	        </div>
        </div>
    <script type="text/javascript">
		//日期
		$('#demo4.input-daterange').datepicker({
           beforeShowDay: function (date){
           if (date.getMonth() == (new Date()).getMonth())
             switch (date.getDate()){
               case 4:
                 return {
                   tooltip: 'Example tooltip',
                   classes: 'active'
                 };
               case 8:
                 return false;
               case 12:
                 return "green";
             }
           }
        });
	</script>
    </body>
</html>