// Starting development of data range picker

This commit is contained in:
Jerome Nadaud
2013-10-11 16:12:40 +02:00
parent 1849995291
commit bedcacf0b4
5 changed files with 213 additions and 56 deletions
@@ -17,14 +17,6 @@
* limitations under the License.
* ========================================================= */
$(function() {
var currentMonth = new Date(Date.now());
var previousMonth = new Date(new Date(currentMonth).setMonth(currentMonth.getMonth()-1));
$('.datepicker1').datepicker("setValue",previousMonth);
$('.datepicker2').datepicker("setValue",currentMonth);
$("#date-start").focus().addClass("input-selected");
});
//click action
!function( $ ) {
var click, switched, val, start, end, over;
@@ -35,6 +35,11 @@
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
{$calendar}
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
@@ -1,48 +1,51 @@
<form class='form-inline' id='datepicker-form'>
<fieldset class='form-date-group' id='date-range'>
<div class='form-date-heading'>
Date range
<div class='btn btn-default btn-xs pull-right dropdown-toggle' data-toggle='dropdown'>
Custom
<i class='icon-angle-down'></i>
<ul class='dropdown-menu'>
<li>
<a>test</a>
</li>
</ul>
</div>
</div>
<div class='form-date-body form-group'>
<label>From</label>
<input class='date-input form-control' id='date-start' placeholder='Start' type='text'>
<label>to</label>
<input class='date-input form-control' id='date-end' placeholder='End' type='text'>
</div>
</fieldset>
<fieldset class='form-date-group' disabled='' id='date-compare'>
<div class='form-date-heading'>
<input type='checkbox'>
Compare to
<div class='btn btn-default btn-xs pull-right dropdown-toggle' data-toggle='dropdown'>
Custom
<i class='icon-angle-down'></i>
</div>
</div>
<div class='form-date-body form-group'>
<label>From</label>
<input class='date-input form-control' id='date-start' placeholder='Start' type='text'>
<label>to</label>
<input class='date-input form-control' id='date-end' placeholder='End' type='text'>
</div>
</fieldset>
<div class='actions'>
<button class='btn-default' type='button'>
<i class='icon-remove'></i>
Cancel
</button>
<button class='btn-primary pull-right' type='submit'>
<i class='icon-ok'></i>
Apply
</button>
<div id="datepicker" class="datepicker-days">
<div class="datepickers-container">
<div class="datepicker1" data-date="{$from_date}" data-date-format="{$date_format}"></div>
<div class="datepicker2" data-date="{$to_date}" data-date-format="{$date_format}"></div>
</div>
</form>
<form class='form-inline' id='datepicker-form'>
<fieldset class='form-date-group' id='date-range'>
<div class='form-date-heading'>
{l s='Date range'}
{if isset($actions) || $actions|count > 0}
{if $actions|count > 1}
<div class='btn btn-default btn-xs pull-right dropdown-toggle' data-toggle='dropdown'>
{l s='Custom'}
<i class='icon-angle-down'></i>
<ul class='dropdown-menu'>
{foreach from=$actions item=action}
<li><a{if isset($action.href)} href="{$action.href}"{/if}{if isset($action.class)} class="{$action.class}"{/if}>{if isset($action.icon)}<i class="{$action.icon}"> {/if}{$action.label}</a></li>
{/foreach}
</ul>
</div>
{else}
<a{if isset($actions[0].href)} href="{$actions[0].href}"{/if} class="btn btn-default btn-xs pull-right{if isset($actions[0].class)} {$actions[0].class}{/if}">{if isset($actions[0].icon)}<i class="{$actions[0].icon}"></i> {/if}{$actions[0].label}</a>
{/if}
{/if}
</div>
<div class='form-date-body form-group'>
<label>{l s='From'}</label>
<input class='date-input form-control' id='date-start' placeholder='Start' type='text'>
<label>{l s='to'}</label>
<input class='date-input form-control' id='date-end' placeholder='End' type='text'>
</div>
</fieldset>
<div class='actions'>
<button class='btn-default' type='button'>
<i class='icon-remove'></i>
{l s='Cancel'}
</button>
<button class='btn-primary pull-right' type='submit'>
<i class='icon-ok'></i>
{l s='Apply'}
</button>
</div>
</form>
</div>
<script type="text/javascript">
$(function() {
$('.datepicker1').datepicker();
$('.datepicker2').datepicker();
$("#date-start").focus().addClass("input-selected");
});
</script>