安利一个简约好看的日期和时间选择器

最新推荐文章于 2024-05-31 16:51:50 发布

chesong3970

最新推荐文章于 2024-05-31 16:51:50 发布

阅读量375

点赞数

文章标签：前端框架 javascript ViewUI

原文链接：https://my.oschina.net/u/3420977/blog/877114

版权

本仙女过很多日期的插件，都觉得比较丑，谁叫人家是个颜控QAQ。。。

意外发现了前端框架sui里面带的日期选择器，比较符合本仙女的审美，\(^o^)/

今儿在这留下，下次用也好找~ 啊哈哈(,,• ₃ •,,)~~

因为我常用的是一段日期的选择所以我就写了这一段。。

切记！一定要引入sui-append.css，不然会错乱。。

<!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>

转载于:https://my.oschina.net/u/3420977/blog/877114