Skip to content

Commit

Permalink
优化calendar组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@2betop
2betop committed Apr 23, 2013
1 parent de9bd5b commit 268e1c3
Show file tree
Hide file tree
Showing 14 changed files with 796 additions and 551 deletions.
19 changes: 9 additions & 10 deletions .../widget/datepicker/datepicker_inline.html → _examples/widget/calendar/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>日历控件 - inline</title>
<title>日历控件</title>
<!--demo展示所用css，不用关心 begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.default.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.default.css" />
<!--组件依赖css end-->

<!--demo展示所用css，不用关心 begin-->
Expand All @@ -23,25 +23,24 @@

<!--组件依赖js begin-->
<script type="text/javascript" src="../../../_src/core/zepto.js"></script>
<script type="text/javascript" src="../../../_src/core/touch.js"></script> <!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="../../../_src/core/touch.js"></script><!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="../../../_src/core/zepto.extend.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.highlight.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.ui.js"></script>
<script type="text/javascript" src="../../../_src/widget/datepicker.js"></script>
<script type="text/javascript" src="../../../_src/widget/calendar.js"></script>
<!--组件依赖js end-->
</head>
<body>

<div class="section">
<div id="datepicker"></div>
<div id="calendar"></div>
</div>

<script type="text/javascript">
(function($, undefined){
(function($){

$(function(){
$('#datepicker').datepicker({
inline: true
});
$('#calendar').calendar();
});
})(Zepto);
</script>
Expand Down
6 changes: 3 additions & 3 deletions ...atepicker/datepicker_changeyearmonth.html → ...alendar/calendar_monthyearchangeable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
<link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.default.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.default.css" />
<!--组件依赖css end-->

<!--demo展示所用css，不用关心 begin-->
Expand All @@ -27,7 +27,7 @@
<script type="text/javascript" src="../../../_src/core/zepto.extend.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.highlight.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.ui.js"></script>
<script type="text/javascript" src="../../../_src/widget/datepicker.js"></script>
<script type="text/javascript" src="../../../_src/widget/calendar.js"></script>
<!--组件依赖js end-->
</head>
<body>
Expand Down
35 changes: 14 additions & 21 deletions _examples/widget/datepicker/datepicker.html → ...ples/widget/calendar/calendar_picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>日历控件</title>
<title>日历控件 - picker</title>
<!--demo展示所用css，不用关心 begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.default.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.default.css" />
<!--组件依赖css end-->

<!--demo展示所用css，不用关心 begin-->
Expand All @@ -23,35 +23,28 @@

<!--组件依赖js begin-->
<script type="text/javascript" src="../../../_src/core/zepto.js"></script>
<script type="text/javascript" src="../../../_src/core/touch.js"></script> <!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="../../../_src/core/touch.js"></script> <!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="../../../_src/core/zepto.extend.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.highlight.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.ui.js"></script>
<script type="text/javascript" src="../../../_src/widget/datepicker.js"></script>
<script type="text/javascript" src="../../../_src/widget/calendar.js"></script>
<script type="text/javascript" src="../../../_src/widget/calendar.picker.js"></script>
<!--组件依赖js end-->
</head>
<body>

<div class="section">
<input id="datestart" readonly="readonly" type="text" value="" />
<input type="text" readonly="readonly" id="input" />
</div>

<script type="text/javascript">
(function($, undefined){
$(function(){
var input = $('#datestart'),
today = new Date(),
dp = $.ui.datepicker({
swipe: true,
valuecommit: function(e, date, datestr){
input.val(datestr);
}
});
input.on('click', function(){
dp.toggle();
}).val($.datepicker.formatDate(today));
});
})(Zepto);
(function($){
$(function(){
$('#input').on('focus', function(){
$(this).calendar('show');
});
});
})(Zepto);
</script>
<!--demo公用头部展示所用js，可以不用加载 begin-->
<script id="bootstrap" src="../../example.js" type="text/javascript" data-page="日历控件|datepicker.html,日历控件-Range|datepicker_range.html,日历控件-inline|datepicker_inline.html,日历控件-select|datepicker_select.html,可修改年月|datepicker_changeyearmonth.html"></script>
Expand Down
26 changes: 10 additions & 16 deletions ...s/widget/datepicker/datepicker_range.html → ...mples/widget/calendar/calendar_range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
<link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.default.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.default.css" />
<!--组件依赖css end-->

<!--demo展示所用css，不用关心 begin-->
Expand All @@ -27,31 +27,25 @@
<script type="text/javascript" src="../../../_src/core/zepto.extend.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.highlight.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.ui.js"></script>
<script type="text/javascript" src="../../../_src/widget/datepicker.js"></script>
<script type="text/javascript" src="../../../_src/widget/calendar.js"></script>
<!--组件依赖js end-->
</head>
<body>

<div class="section">
<h1>只允许选择过去10到将来10天之间</h1>
<input id="datestart" type="text" readonly="readonly" value="" />
<div id="calendar"></div>
</div>

<script type="text/javascript">
(function($, undefined){
$(function(){
var input = $('#datestart'),
date = new Date(),
dp = $.ui.datepicker({
valuecommit: function(e, date, datestr){
input.val(datestr);
},
minDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()-10),
maxDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()+10)
});
input.on('click', function(){
dp.toggle();
}).val($.datepicker.formatDate(date));
var date = new Date();

$('#calendar').calendar({
minDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()-10),
maxDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()+10)
});
});
})(Zepto);
</script>
Expand Down
30 changes: 17 additions & 13 deletions .../widget/datepicker/datepicker_select.html → ...ples/widget/calendar/calendar_select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
<link rel="stylesheet" type="text/css" href="../../../assets/reset.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/datepicker/datepicker.default.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../../assets/widget/calendar/calendar.default.css" />
<!--组件依赖css end-->

<!--demo展示所用css，不用关心 begin-->
Expand Down Expand Up @@ -95,7 +95,7 @@
<script type="text/javascript" src="../../../_src/core/zepto.extend.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.highlight.js"></script>
<script type="text/javascript" src="../../../_src/core/zepto.ui.js"></script>
<script type="text/javascript" src="../../../_src/widget/datepicker.js"></script>
<script type="text/javascript" src="../../../_src/widget/calendar.js"></script>
<!--组件依赖js end-->
</head>
<body>
Expand Down Expand Up @@ -125,15 +125,20 @@
(function($, undefined){
$(function(){//dom ready
var open = null, today = new Date();
$('#datestart').text($.datepicker.formatDate(today));
$('#dateend').text($.datepicker.formatDate(new Date(today.getFullYear(), today.getMonth(), today.getDate()+2)));
$('#datepicker_start').datepicker({//初始化开始时间的datepicker
inline: true,

//设置开始时间为今天
$('#datestart').html($.calendar.formatDate(today) + '<span class="ui-icon-down"></span>');

//设置结束事件为两天之后
$('#dateend').html($.calendar.formatDate(new Date(today.getFullYear(), today.getMonth(), today.getDate()+2)) +
'<span class="ui-icon-down"></span>');

$('#datepicker_start').calendar({//初始化开始时间的datepicker
date:$('#datestart').text(),//设置初始日期为文本内容
minDate: new Date(today.getFullYear(), today.getMonth(), 1),//设置最小日期为当月第一天，既上一月的不能选
maxDate: $('#dateend').text(),//设置最大日期为结束日期，结束日期以后的天不能选
valuecommit: function(e, date, dateStr){//当选中某个日期时。
$('#datepicker_end').datepicker('minDate', date).datepicker('refresh');//将结束时间的datepick的最小日期设成所选日期
select: function(e, date, dateStr){//当选中某个日期时。
$('#datepicker_end').calendar('minDate', date).calendar('refresh');//将结束时间的datepick的最小日期设成所选日期

//收起datepicker
open = null;
Expand All @@ -143,12 +148,11 @@
$('#datestart').html(dateStr+'<span class="ui-icon-down"></span>').removeClass('ui-state-active');
}
});
$('#datepicker_end').datepicker({//初始化结束时间的datepicker
inline: true,
$('#datepicker_end').calendar({//初始化结束时间的datepicker
date:$('#dateend').text(),//设置初始日期为文本内容
minDate: $('#datestart').text(),//设置最小日期为开始日期，开始日期以前的天不能选
valuecommit: function(e, date, dateStr){//当选中某个日期时。
$('#datepicker_start').datepicker('maxDate', date).datepicker('refresh');//将开始时间的datepicker的最达日期设成所选日期
select: function(e, date, dateStr){//当选中某个日期时。
$('#datepicker_start').calendar('maxDate', date).calendar('refresh');//将开始时间的datepicker的最达日期设成所选日期

//收起datepicker
open = null;
Expand Down
6 changes: 3 additions & 3 deletions _examples/widget/setting/setting.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@
"icon" => 'tabs.png',
"href" => 'tabs/tabs.html'
),
'datepicker' => array(
"name" => 'Datepicker',
'calendar' => array(
"name" => 'Calendar',
"description" => '日历控件',
"group" => 'Components',
"icon" => 'tabs.png',
"href" => 'datepicker/datepicker.html'
"href" => 'calendar/calendar.html'
),
'toolbar' => array(
"name" => 'Toolbar',
Expand Down
Loading

0 comments on commit 268e1c3

Please sign in to comment.