// fix datepicker

This commit is contained in:
Kevin Granger committed 2013-10-11 17:21:45 +02:00
1 parent 0f28393c8f
commit 41f5d9f1f1
5 files changed
+847 -453

No files matched your search

File diff suppressed because it is too large. Load diff
@@ -4,6 +4,9 @@
@import "admin-theme/_bootstrap-init" @import "admin-theme/_bootstrap-init"
@import "admin-theme/_font-awesome" @import "admin-theme/_font-awesome"
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:200,400,700)
html, body html, body
min-height: 100% min-height: 100%
height: 100% height: 100%
@@ -100,6 +103,10 @@ fieldset > .row
@import "admin-theme/admin-toolbar" @import "admin-theme/admin-toolbar"
@import "admin-theme/admin-date-range-picker" @import "admin-theme/admin-date-range-picker"
@import "admin-theme/ladda"
@import "admin-theme/ladda-theme"
//page specific //page specific
@import "admin-theme/admin-carrier-wizard" @import "admin-theme/admin-carrier-wizard"
@import "admin-theme/admin-modules" @import "admin-theme/admin-modules"
@@ -1,232 +1,229 @@
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:200,400,700) $color-bright: white
@import compass
$color-bright: #F0E9DC
$font-family: 'Josefin Sans', sans-serif $font-family: 'Josefin Sans', sans-serif
$color-calendar: #4FA2D4 $color-calendar: $brand-primary
$color-calendar-compare: #E18E70 $color-calendar-compare: #E18E70
$color-calendar-day: $color-bright $color-calendar-day: $color-bright
$color-calendar-outrange: darken($color-calendar,15%) $color-calendar-outrange: darken($color-calendar,15%)
$color-calendar-day-selected: darken($color-calendar,25%) $color-calendar-day-selected: darken($color-calendar,25%)
$color-calendar-range: darken($color-calendar,15%) $color-calendar-range: darken($color-calendar,15%)
#datepicker #datepicker
input[type="text"] input[type="text"]
padding: 6px padding: 6px
background-color: darken($color-calendar,20%) background-color: darken($color-calendar,10%)
.input-selected .input-selected
margin: 0 margin: 0
#date-start.input-selected #date-start.input-selected
border: solid 3px $color-calendar-day-selected border: solid 3px $color-calendar-day-selected
#date-end.input-selected #date-end.input-selected
border: solid 3px $color-calendar-day-selected border: solid 3px $color-calendar-day-selected
.datepickers-container .datepickers-container
width: 60% width: 60%
float: left float: left
margin: 0 margin: 0
font-size: 16px font-size: 16px
height: 16.8em height: 16.8em
form#datepicker-form form#datepicker-form
width: 40% width: 40%
float: left float: left
+border-radius(0) +border-radius(0)
border: none border: none
#date-range .form-date-heading #date-range .form-date-heading
background-color: darken($color-calendar-compare,5%) background-color: darken($color-calendar-compare,5%)
#date-compare .form-date-heading #date-compare .form-date-heading
background-color: darken($color-calendar-compare,5%) background-color: darken($color-calendar-compare,5%)
.form-date-heading .form-date-heading
font-family: $font-family font-family: $font-family
font-size: 1.15em font-size: 1.15em
padding: 6px padding: 6px
color: $color-bright color: $color-bright
font-weight: 200 font-weight: 200
text-transform: uppercase text-transform: uppercase
.btn-default .btn-default
background-color: rgba($color-bright,0.3) background-color: rgba($color-bright,0.3)
font-weight: 700 font-weight: 700
color: $color-bright color: $color-bright
border: none border: none
.form-date-body .form-date-body
padding: 10px padding: 10px
.form-date-group .form-date-group
+box-shadow(darken($color-calendar,30%) 0 0 4px) +box-shadow(darken($color-calendar,30%) 0 0 4px)
background-color: $color-bright background-color: $color-bright
width: 100% width: 100%
margin: 0 auto 6px auto margin: 0 auto 6px auto
label, input label, input
float: left float: left
margin-right: 6px margin-right: 6px
label label
line-height: 3.2em line-height: 3.2em
font-weight: 700 font-weight: 700
font-size: 0.8em font-size: 0.8em
margin-bottom: 0 margin-bottom: 0
input[type='text'] input[type='text']
width: 35% width: 35%
.actions .actions
+box-shadow(darken($color-calendar,30%) 0 0 4px) +box-shadow(darken($color-calendar,30%) 0 0 4px)
padding: 0 padding: 0
background-color: $color-calendar background-color: $color-calendar
.btn-primary .btn-primary
padding: 12px padding: 12px
text-transform: uppercase text-transform: uppercase
background-color: $color-bright background-color: $color-bright
color: $color-calendar-day-selected color: $color-calendar-day-selected
border: none border: none
.btn-default .btn-default
padding: 12px padding: 12px
text-transform: uppercase text-transform: uppercase
color: $color-calendar-day-selected color: $color-calendar-day-selected
background: transparent background: transparent
border: none border: none
label label
font-family: $font-family font-family: $font-family
font-weight: 700 font-weight: 700
text-transform: uppercase text-transform: uppercase
color: #666 color: #666
.datepicker .datepicker
+box-shadow(darken($color-calendar,30%) 0 0 4px) //+box-shadow(darken($color-calendar,30%) 0 0 4px)
position: relative position: relative
float: left float: left
margin-right: 1% margin-right: 1%
width: 49% width: 49%
height: 100% height: 100%
background-color: $color-calendar background-color: $color-calendar
font-family: $font-family font-family: $font-family
table table
width: 100% width: 100%
margin: 0 margin: 0
thead thead
tr th:after tr th:after
content: "" content: ""
border-top: 1px solid darken($color-calendar,10%) border-top: 1px solid darken($color-calendar,10%)
width: 100% width: 100%
display: block display: block
tr th tr th
background-color: darken($color-calendar,5%) background-color: darken($color-calendar,5%)
color: lighten($color-calendar,25%) color: lighten($color-calendar,25%)
font-size: 0.7em font-size: 0.7em
font-weight: 700 font-weight: 700
border-bottom: solid 1px lighten($color-calendar,7%) border-bottom: solid 1px lighten($color-calendar,7%)
text-transform: uppercase text-transform: uppercase
tr:first-child th tr:first-child th
background-color: $color-bright background-color: $color-bright
font-weight: 200 font-weight: 200
font-size: 1.4em font-size: 1.4em
color: $color-calendar-day-selected color: $color-calendar-day-selected
td, th td, th
text-align: center text-align: center
height: 2em height: 2em
line-height: 2em line-height: 2em
padding: 0 padding: 0
color: $color-calendar-day color: $color-calendar-day
position: relative position: relative
td td
font-weight: 400 font-weight: 400
padding: 0 10px padding: 0 10px
border-bottom: solid 1px $color-calendar border-bottom: solid 1px $color-calendar
&.day:after &.day:after
content: "" content: ""
position: absolute position: absolute
display: block display: block
top: 0 top: 0
left: 0 left: 0
width: 100% width: 100%
height: 100% height: 100%
z-index: 0 z-index: 0
background-color: transparent background-color: transparent
&.day:hover &.day:hover
cursor: pointer cursor: pointer
&.day.disabled &.day.disabled
color: $color-calendar-outrange color: $color-calendar-outrange
&.old, &.new &.old, &.new
color: $color-calendar-outrange color: $color-calendar-outrange
&.start-selected:not(.old):not(.new):not(.end-selected) &.start-selected:not(.old):not(.new):not(.end-selected)
font-weight: 700 font-weight: 700
background-color: $color-calendar-day-selected background-color: $color-calendar-day-selected
+border-left-radius(15px) +border-left-radius(15px)
@extend .chevron-left @extend .chevron-left
&.end-selected:not(.old):not(.new):not(.start-selected) &.end-selected:not(.old):not(.new):not(.start-selected)
font-weight: 700 font-weight: 700
background-color: $color-calendar-day-selected background-color: $color-calendar-day-selected
@extend .chevron-right @extend .chevron-right
+border-right-radius(15px) +border-right-radius(15px)
&.end-selected.start-selected &.end-selected.start-selected
+border-radius(15px) +border-radius(15px)
font-weight: 700 font-weight: 700
background-color: $color-calendar-day-selected background-color: $color-calendar-day-selected
&.range &.range
color: lighten($color-calendar-range,35%) color: lighten($color-calendar-range,35%)
background-color: $color-calendar-range background-color: $color-calendar-range
&.today &.today
background-color: $color-bright background-color: $color-bright
span span
padding: 0 padding: 0
display: block display: block
width: 33.333% width: 33.333%
height: 3em height: 3em
line-height: 3em line-height: 3em
font-weight: 400 font-weight: 400
float: left float: left
text-transform: uppercase text-transform: uppercase
cursor: pointer cursor: pointer
&:hover &:hover
background-color: $color-calendar-day-selected background-color: $color-calendar-day-selected
&.active &.active
background-color: $color-calendar-day-selected background-color: $color-calendar-day-selected
color: #fff color: #fff
&.old &.old
color: $color-calendar-outrange color: $color-calendar-outrange
th th
&.switch &.switch
width: 145px width: 145px
&.next, &.prev &.next, &.prev
font-size: 1.3em font-size: 1.3em
thead tr:first-child th thead tr:first-child th
cursor: pointer cursor: pointer
.chevron-left, .chevron-right .chevron-left, .chevron-right
position: relative position: relative
.chevron-left:before, .chevron-right:before .chevron-left:before, .chevron-right:before
display: block display: block
content: "" content: ""
width: 0 width: 0
height: 0 height: 0
border-style: solid border-style: solid
position: absolute position: absolute
.chevron-left:before .chevron-left:before
right: 0px right: 0px
top: 0 top: 0
border-width: 1em 0 1em 0.5em border-width: 1em 0 1em 0.5em
border-color: transparent transparent transparent $color-calendar-day-selected border-color: transparent transparent transparent $color-calendar-day-selected
background-color: $color-calendar-range background-color: $color-calendar-range
.chevron-right:before .chevron-right:before
left: 0px left: 0px
top: 0 top: 0
border-width: 1em 0 1em 0.5em border-width: 1em 0 1em 0.5em
border-color: transparent transparent transparent $color-calendar-range border-color: transparent transparent transparent $color-calendar-range
background-color: $color-calendar-day-selected background-color: $color-calendar-day-selected
.input-complete .input-complete
-webkit-animation: one 0.2s ease-in-out -webkit-animation: one 0.2s ease-in-out
-moz-animation: one 0.2s ease-in-out -moz-animation: one 0.2s ease-in-out
-ms-animation: one 0.2s ease-in-out -ms-animation: one 0.2s ease-in-out
-o-animation: one 0.2s ease-in-out -o-animation: one 0.2s ease-in-out
animation: one 0.2s ease-in-out animation: one 0.2s ease-in-out
@-webkit-keyframes one @-webkit-keyframes one
0% 0%
background-color: $color-calendar background-color: $color-calendar
100% 100%
background-color: $color-bright background-color: $color-bright
@-webkit-keyframes two @-webkit-keyframes two
0% 0%
+box-shadow($color-calendar 0 0 0 20px inset) +box-shadow($color-calendar 0 0 0 20px inset)
100% 100%
+box-shadow($color-calendar 0 0 0 inset) +box-shadow($color-calendar 0 0 0 inset)
@@ -228,7 +228,7 @@
switch(target[0].nodeName.toLowerCase()) { switch(target[0].nodeName.toLowerCase()) {
case 'th': case 'th':
switch(target[0].className) { switch(target[0].className) {
case 'switch': case 'month-switch':
this.showMode(1); this.showMode(1);
break; break;
case 'prev': case 'prev':
@@ -284,7 +284,7 @@
target.addClass("start-selected"); target.addClass("start-selected");
start = target.data("val"); start = target.data("val");
$("#date-start").val(start); $("#date-start").val(start);
!switched ? click = 1 : click = 2; if(!switched) {click = 1;} else {click = 2;}
if(!switched){ if(!switched){
$("#date-end").val(null).focus().addClass("input-selected"); $("#date-end").val(null).focus().addClass("input-selected");
target.addClass("start-selected").addClass("end-selected"); target.addClass("start-selected").addClass("end-selected");
@@ -412,7 +412,7 @@
if (!data) { if (!data) {
$this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults,options)))); $this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults,options))));
} }
if (typeof option === 'string') { data[option](val) } if (typeof option === 'string') { data[option](val);}
}); });
}; };
@@ -516,7 +516,7 @@
headTemplate: '<thead>'+ headTemplate: '<thead>'+
'<tr>'+ '<tr>'+
'<th class="prev"><i class="icon-angle-left"></i></th>'+ '<th class="prev"><i class="icon-angle-left"></i></th>'+
'<th colspan="5" class="switch"></th>'+ '<th colspan="5" class="month-switch"></th>'+
'<th class="next"><i class="icon-angle-right"</th>'+ '<th class="next"><i class="icon-angle-right"</th>'+
'</tr>'+ '</tr>'+
'</thead>', '</thead>',
@@ -1,46 +1,55 @@
<div id="datepicker" class="datepicker-days"> <div id="datepicker" class="datepicker-days">
<div class="datepickers-container"> <div class="row">
<div class="datepicker1" data-date="{$from_date}" data-date-format="{$date_format}"></div> <div class="col-lg-8">
<div class="datepicker2" data-date="{$to_date}" data-date-format="{$date_format}"></div> <div class="datepickers-container">
</div> <div class="datepicker1" data-date="{$from_date}" data-date-format="{$date_format}"></div>
<form class='form-inline' id='datepicker-form'> <div class="datepicker2" data-date="{$to_date}" data-date-format="{$date_format}"></div>
<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>
<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> </div>
</form> <div class="col-lg-4">
<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>
<hr/>
<div class='form-group'>
<button class='btn btn-default' type='button'>
<i class='icon-remove text-danger'></i>
{l s='Cancel'}
</button>
<button class='btn btn-default' type='submit'>
<i class='icon-ok text-success'></i>
{l s='Apply'}
</button>
</div>
</fieldset>
</form>
</div>
</div>
<hr/>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {