Modification inline pour l'identite utilisateur

application/modules/admin/controllers/UserController.php

@@ -34,6 +34,11 @@ class Admin_UserController extends Zend_Controller_Action
 
     public function detailAction()
     {
+        $this->view->headLink()
+            ->appendStylesheet('/libs/bootstrap3-editable/css/bootstrap-editable.css', 'all');
+        $this->view->headScript()
+            ->appendFile('/libs/bootstrap3-editable/js/bootstrap-editable.min.js', 'text/javascript');
+
         $request = $this->getRequest();
         $id = $request->getParam('id');
 

application/modules/admin/views/default/scripts/user/detail.phtml

@@ -16,11 +16,24 @@
 </tr>
 <tr>
 	<th scope="row">Nom / Prénom</th>
-	<td><?=$this->Item->Civilite . ' ' . $this->Item->Nom  . ' ' . $this->Item->Prenom?></td>
+	<td>
+	<span class="editable" data-type="select" data-name="civilite" data-value="<?=$this->Item->Civilite?>"
+		data-source="[{value: 'M', text: 'M'}, {value: 'Mme', text: 'Mme'}, {value: 'Mlle', text: 'Mlle'}]"
+		data-pk="<?=$this->Item->id?>" data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity',
+        'action'=>'gender'), 'default', true)?>"><?=$this->Item->Civilite?></span>.&nbsp;
+ 	<span class="editable" data-type="text" data-name="nom" data-pk="<?=$this->Item->id?>"
+		data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity', 'action'=>'lastname'),
+        'default', true)?>"><?=$this->Item->Nom?></span>&nbsp;
+    <span class="editable" data-type="text" data-name="prenom" data-pk="<?=$this->Item->id?>"
+		data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity', 'action'=>'firstname'),
+        'default', true)?>"><?=$this->Item->Prenom?></span>
+	</td>
 </tr>
 <tr>
 	<th scope="row">Courriel</th>
-	<td><?=$this->Item->Email?></td>
+	<td><span class="editable" data-type="text" data-name="email" data-pk="<?=$this->Item->id?>"
+		data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity', 'action'=>'email'),
+        'default', true)?>"><?=$this->Item->Email?></span></td>
 </tr>
 <tr>
 	<th scope="row">Actif</th>
@@ -35,9 +48,10 @@
 <tr>
 	<th scope="row">Action</th>
 	<td>
-	<button type="button" class="btn btn-primary">Emails et paramètrage</button>
+	<button type="button" class="btn btn-sm btn-primary">Modifier le mot de passe</button>
-	<button type="button" class="btn btn-primary">Suivi connexion</button>
+	<button type="button" class="btn btn-sm btn-primary">Paramétrage emails</button>
-	<button type="button" class="btn btn-primary">Suivi consultation</button>
+	<button type="button" class="btn btn-sm btn-primary">Suivi connexion</button>
+	<button type="button" class="btn btn-sm btn-primary">Suivi consultation</button>
 	</td>
 </tr>
 </tbody>
@@ -86,5 +100,9 @@
 
 <h2>Préférences</h2>
 
-
 </div>
+<script>
+$(function() {
+    $('.editable').editable();
+});
+</script>

application/modules/user/controllers/IdentityController.php

@@ -21,15 +21,15 @@ class User_IdentityController extends Zend_Controller_Action
      * 	$strength = 5:- A-Za-z0-9 and # $ % & = > ? @
      * @return string
      */
-    protected function randomPassword($length,$strength)
+    protected function randomPassword($length, $strength)
     {
-        $char_sets=array('48-57','65-90','97-122','35-38','61-64');
+        $char_sets = array('48-57','65-90','97-122','35-38','61-64');
-        $new_password='';
+        $new_password = '';
-        srand(microtime()*10000000);
+        srand(microtime() * 10000000);
-        for($i=0;$i<$length;$i++){
+        for($i = 0; $i < $length; $i++){
-            $random=rand(0,$strength-1);
+            $random = rand(0, $strength - 1);
-            list($start,$end)=explode('-',$char_sets[$random]);
+            list($start, $end) = explode('-', $char_sets[$random]);
-            $new_password.=chr(rand($start,$end));
+            $new_password.= chr(rand($start, $end));
         }
         return $new_password;
     }
@@ -39,6 +39,11 @@ class User_IdentityController extends Zend_Controller_Action
      */
     public function indexAction()
     {
+        $this->view->headLink()
+            ->appendStylesheet('/libs/bootstrap3-editable/css/bootstrap-editable.css', 'all');
+        $this->view->headScript()
+            ->appendFile('/libs/bootstrap3-editable/js/bootstrap-editable.min.js', 'text/javascript');
+
         $ws = new Scores_Ws_Client('account', '0.1');
         $responses = $ws->getUser();
         $this->view->Item = $responses;
@@ -61,12 +66,158 @@ class User_IdentityController extends Zend_Controller_Action
     /**
      * Modification du mot de passe
      */
-    public function passwordAction(){}
+    public function passwordAction()
+    {
+        $request = $this->getRequest();
+    }
 
     /**
      * Modification de l'email
      */
-    public function emailAction(){}
+    public function emailAction()
+    {
+        $request = $this->getRequest();
+        if ( $request->isXmlHttpRequest() ) {
+            $this->_helper->layout()->disableLayout();
+        }
+
+        $pk = $request->getParam('pk');
+        $name = $request->getParam('name');
+        $value = $request->getParam('value');
+
+        $data = array('email' => $value);
+
+        $params = new stdClass();
+        $params->id = $pk;
+        $params->data = json_encode($data);
+
+        try {
+            $ws = new Scores_Ws_Client('account', '0.1');
+            $response = $ws->setUser($params);
+            if (is_string($response) || $response === false) {
+                $viewResponse = $this->getResponse();
+                $viewResponse->setHttpResponseCode(400);
+                $this->view->content = ($response === false) ? 'Mise à jour impossible' : $response;
+            } else {
+                $this->view->content = $value;
+            }
+        } catch (Exception $e) {
+            $viewResponse = $this->getResponse();
+            $viewResponse->setHttpResponseCode(400);
+            $this->view->content = $e->getMessage();
+        }
+    }
+
+    /**
+     * Modification du genre
+     */
+    public function genderAction()
+    {
+        $request = $this->getRequest();
+        if ( $request->isXmlHttpRequest() ) {
+            $this->_helper->layout()->disableLayout();
+        }
+
+        $pk = $request->getParam('pk');
+        $name = $request->getParam('name');
+        $value = $request->getParam('value');
+
+        $data = array('civilite' => $value);
+
+        $params = new stdClass();
+        $params->id = $pk;
+        $params->data = json_encode($data);
+
+        try {
+            $ws = new Scores_Ws_Client('account', '0.1');
+            $response = $ws->setUser($params);
+            if (is_string($response) || $response === false) {
+                $viewResponse = $this->getResponse();
+                $viewResponse->setHttpResponseCode(400);
+                $this->view->content = ($response === false) ? 'Mise à jour impossible' : $response;
+            } else {
+                $this->view->content = $value;
+            }
+        } catch (Exception $e) {
+            $viewResponse = $this->getResponse();
+            $viewResponse->setHttpResponseCode(400);
+            $this->view->content = $e->getMessage();
+        }
+    }
+
+    /**
+     * Modification du nom
+     */
+    public function lastnameAction()
+    {
+        $request = $this->getRequest();
+        if ( $request->isXmlHttpRequest() ) {
+            $this->_helper->layout()->disableLayout();
+        }
+
+        $pk = $request->getParam('pk');
+        $name = $request->getParam('name');
+        $value = $request->getParam('value');
+
+        $data = array('nom' => $value);
+
+        $params = new stdClass();
+        $params->id = $pk;
+        $params->data = json_encode($data);
+
+        try {
+            $ws = new Scores_Ws_Client('account', '0.1');
+            $response = $ws->setUser($params);
+            if (is_string($response) || $response === false) {
+                $viewResponse = $this->getResponse();
+                $viewResponse->setHttpResponseCode(400);
+                $this->view->content = ($response === false) ? 'Mise à jour impossible' : $response;
+            } else {
+                $this->view->content = $value;
+            }
+        } catch (Exception $e) {
+            $viewResponse = $this->getResponse();
+            $viewResponse->setHttpResponseCode(400);
+            $this->view->content = $e->getMessage();
+        }
+    }
+
+    /**
+     * Modification du prenom
+     */
+    public function firstnameAction()
+    {
+        $request = $this->getRequest();
+        if ( $request->isXmlHttpRequest() ) {
+            $this->_helper->layout()->disableLayout();
+        }
+
+        $pk = $request->getParam('pk');
+        $name = $request->getParam('name');
+        $value = $request->getParam('value');
+
+        $data = array('prenom' => $value);
+
+        $params = new stdClass();
+        $params->id = $pk;
+        $params->data = json_encode($data);
+
+        try {
+            $ws = new Scores_Ws_Client('account', '0.1');
+            $response = $ws->setUser($params);
+            if (is_string($response) || $response === false) {
+                $viewResponse = $this->getResponse();
+                $viewResponse->setHttpResponseCode(400);
+                $this->view->content = ($response === false) ? 'Mise à jour impossible' : $response;
+            } else {
+                $this->view->content = $value;
+            }
+        } catch (Exception $e) {
+            $viewResponse = $this->getResponse();
+            $viewResponse->setHttpResponseCode(400);
+            $this->view->content = $e->getMessage();
+        }
+    }
 
     /**
      * Modification des préférences
@@ -78,11 +229,6 @@ class User_IdentityController extends Zend_Controller_Action
      */
     public function clientAction(){}
 
-    /**
-     * Affichage du service et des droits d'accès
-     */
-    public function serviceAction(){}
-
     /**
      * Mettre à jour le mode edition en session sans refresh de la page
      */

application/modules/user/views/default/scripts/identity/email.phtml

@@ -1 +1 @@
-<?php
+<?=$this->content?>

application/modules/user/views/default/scripts/identity/firstname.phtml

@@ -0,0 +1 @@
+<?=$this->content?>

application/modules/user/views/default/scripts/identity/gender.phtml

@@ -0,0 +1 @@
+<?=$this->content?>

application/modules/user/views/default/scripts/identity/index.phtml

@@ -13,11 +13,24 @@
 </tr>
 <tr>
 	<th scope="row">E-mail</th>
-	<td><?=$this->Item->Email?></td>
+	<td><span class="editable" data-type="text" data-name="email" data-pk="<?=$this->Item->id?>"
+		data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity', 'action'=>'email'),
+        'default', true)?>"><?=$this->Item->Email?></span></td>
 </tr>
 <tr>
 	<th scope="row">Nom / Prénom</th>
-	<td><?=$this->Item->Civilite . ". " . $this->Item->Nom . " ". $this->Item->Prenom?></td>
+	<td>
+	<span class="editable" data-type="select" data-name="civilite" data-value="<?=$this->Item->Civilite?>"
+		data-source="[{value: 'M', text: 'M'}, {value: 'Mme', text: 'Mme'}, {value: 'Mlle', text: 'Mlle'}]"
+		data-pk="<?=$this->Item->id?>" data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity',
+        'action'=>'gender'), 'default', true)?>"><?=$this->Item->Civilite?></span>.&nbsp;
+ 	<span class="editable" data-type="text" data-name="nom" data-pk="<?=$this->Item->id?>"
+		data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity', 'action'=>'lastname'),
+        'default', true)?>"><?=$this->Item->Nom?></span>&nbsp;
+    <span class="editable" data-type="text" data-name="prenom" data-pk="<?=$this->Item->id?>"
+		data-url="<?=$this->url(array('module'=>'user', 'controller'=>'identity', 'action'=>'firstname'),
+        'default', true)?>"><?=$this->Item->Prenom?></span>
+	</td>
 </tr>
 <tr>
 	<th scope="row">Service</th>
@@ -25,7 +38,10 @@
 </tr>
 <tr>
 	<th scope="row">Action</th>
-	<td><button type="button" class="btn btn-sm btn-primary">Emails</button></td>
+	<td>
+	<button type="button" class="btn btn-sm btn-primary">Modifier le mot de passe</button>
+	<button type="button" class="btn btn-sm btn-primary">Paramétrage emails</button>
+	</td>
 </tr>
 </tbody>
 </table>
@@ -104,3 +120,8 @@ $('#editsession').click(function(e){
 <p class="bg-classes bg-warning">Aucune restriction.</p>
 <?php }?>
 </div>
+<script>
+$(function() {
+    $('.editable').editable();
+});
+</script>

application/modules/user/views/default/scripts/identity/lastname.phtml

@@ -0,0 +1 @@
+<?=$this->content?>

application/modules/user/views/default/scripts/identity/service.phtml

@@ -1 +0,0 @@
-<?php

public/libs/bootstrap3-editable/css/bootstrap-editable.css

@@ -0,0 +1,663 @@
+/*! X-editable - v1.5.1 
+* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
+* http://github.com/vitalets/x-editable
+* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
+.editableform {
+    margin-bottom: 0; /* overwrites bootstrap margin */
+}
+
+.editableform .control-group {
+    margin-bottom: 0; /* overwrites bootstrap margin */
+    white-space: nowrap; /* prevent wrapping buttons on new line */
+    line-height: 20px; /* overwriting bootstrap line-height. See #133 */
+}
+
+/* 
+  BS3 width:1005 for inputs breaks editable form in popup 
+  See: https://github.com/vitalets/x-editable/issues/393
+*/
+.editableform .form-control {
+    width: auto;
+}
+
+.editable-buttons {
+   display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
+   vertical-align: top;
+   margin-left: 7px;
+   /* inline-block emulation for IE7*/
+   zoom: 1; 
+   *display: inline;
+}
+
+.editable-buttons.editable-buttons-bottom {
+   display: block; 
+   margin-top: 7px;
+   margin-left: 0;
+}
+
+.editable-input {
+    vertical-align: top; 
+    display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
+    width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
+    white-space: normal; /* reset white-space decalred in parent*/
+   /* display-inline emulation for IE7*/
+   zoom: 1; 
+   *display: inline;   
+}
+
+.editable-buttons .editable-cancel {
+   margin-left: 7px; 
+}
+
+/*for jquery-ui buttons need set height to look more pretty*/
+.editable-buttons button.ui-button-icon-only {
+   height: 24px; 
+   width: 30px;
+}
+
+.editableform-loading {
+    background: url('../img/loading.gif') center center no-repeat;  
+    height: 25px;
+    width: auto; 
+    min-width: 25px; 
+}
+
+.editable-inline .editableform-loading {
+    background-position: left 5px;      
+}
+
+ .editable-error-block {
+    max-width: 300px;
+    margin: 5px 0 0 0;
+    width: auto;
+    white-space: normal;
+}
+
+/*add padding for jquery ui*/
+.editable-error-block.ui-state-error {
+    padding: 3px;  
+}  
+
+.editable-error {
+   color: red;  
+}
+
+/* ---- For specific types ---- */
+
+.editableform .editable-date {
+    padding: 0; 
+    margin: 0;
+    float: left;
+}
+
+/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
+.editable-inline .add-on .icon-th {
+   margin-top: 3px;
+   margin-left: 1px; 
+}
+
+
+/* checklist vertical alignment */
+.editable-checklist label input[type="checkbox"], 
+.editable-checklist label span {
+    vertical-align: middle;
+    margin: 0;
+}
+
+.editable-checklist label {
+    white-space: nowrap; 
+}
+
+/* set exact width of textarea to fit buttons toolbar */
+.editable-wysihtml5 {
+    width: 566px; 
+    height: 250px; 
+}
+
+/* clear button shown as link in date inputs */
+.editable-clear {
+   clear: both;
+   font-size: 0.9em;
+   text-decoration: none;
+   text-align: right;
+}
+
+/* IOS-style clear button for text inputs */
+.editable-clear-x {
+   background: url('../img/clear.png') center center no-repeat;
+   display: block;
+   width: 13px;    
+   height: 13px;
+   position: absolute;
+   opacity: 0.6;
+   z-index: 100;
+   
+   top: 50%;
+   right: 6px;
+   margin-top: -6px;
+   
+}
+
+.editable-clear-x:hover {
+   opacity: 1;
+}
+
+.editable-pre-wrapped {
+   white-space: pre-wrap;
+}
+.editable-container.editable-popup {
+    max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
+}  
+
+.editable-container.popover {
+    width: auto; /* without this rule popover does not stretch */
+}
+
+.editable-container.editable-inline {
+    display: inline-block; 
+    vertical-align: middle;
+    width: auto;
+    /* inline-block emulation for IE7*/
+    zoom: 1; 
+    *display: inline;    
+}
+
+.editable-container.ui-widget {
+   font-size: inherit;  /* jqueryui widget font 1.1em too big, overwrite it */
+   z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
+}
+.editable-click, 
+a.editable-click, 
+a.editable-click:hover {
+    text-decoration: none;
+    border-bottom: dashed 1px #0088cc;
+}
+
+.editable-click.editable-disabled, 
+a.editable-click.editable-disabled, 
+a.editable-click.editable-disabled:hover {
+   color: #585858;  
+   cursor: default;
+   border-bottom: none;
+}
+
+.editable-empty, .editable-empty:hover, .editable-empty:focus{
+  font-style: italic; 
+  color: #DD1144;  
+  /* border-bottom: none; */
+  text-decoration: none;
+}
+
+.editable-unsaved {
+  font-weight: bold; 
+}
+
+.editable-unsaved:after {
+/*    content: '*'*/
+}
+
+.editable-bg-transition {
+  -webkit-transition: background-color 1400ms ease-out;
+  -moz-transition: background-color 1400ms ease-out;
+  -o-transition: background-color 1400ms ease-out;
+  -ms-transition: background-color 1400ms ease-out;
+  transition: background-color 1400ms ease-out;  
+}
+
+/*see https://github.com/vitalets/x-editable/issues/139 */
+.form-horizontal .editable
+{ 
+    padding-top: 5px;
+    display:inline-block;
+}
+
+
+/*!
+ * Datepicker for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Improvements by Andrew Rowls
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+.datepicker {
+  padding: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  direction: ltr;
+  /*.dow {
+		border-top: 1px solid #ddd !important;
+	}*/
+
+}
+.datepicker-inline {
+  width: 220px;
+}
+.datepicker.datepicker-rtl {
+  direction: rtl;
+}
+.datepicker.datepicker-rtl table tr td span {
+  float: right;
+}
+.datepicker-dropdown {
+  top: 0;
+  left: 0;
+}
+.datepicker-dropdown:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 6px;
+}
+.datepicker-dropdown:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  position: absolute;
+  top: -6px;
+  left: 7px;
+}
+.datepicker > div {
+  display: none;
+}
+.datepicker.days div.datepicker-days {
+  display: block;
+}
+.datepicker.months div.datepicker-months {
+  display: block;
+}
+.datepicker.years div.datepicker-years {
+  display: block;
+}
+.datepicker table {
+  margin: 0;
+}
+.datepicker td,
+.datepicker th {
+  text-align: center;
+  width: 20px;
+  height: 20px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border: none;
+}
+.table-striped .datepicker table tr td,
+.table-striped .datepicker table tr th {
+  background-color: transparent;
+}
+.datepicker table tr td.day:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.datepicker table tr td.old,
+.datepicker table tr td.new {
+  color: #999999;
+}
+.datepicker table tr td.disabled,
+.datepicker table tr td.disabled:hover {
+  background: none;
+  color: #999999;
+  cursor: default;
+}
+.datepicker table tr td.today,
+.datepicker table tr td.today:hover,
+.datepicker table tr td.today.disabled,
+.datepicker table tr td.today.disabled:hover {
+  background-color: #fde19a;
+  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
+  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: linear-gradient(top, #fdd49a, #fdf59a);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
+  border-color: #fdf59a #fdf59a #fbed50;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #000;
+}
+.datepicker table tr td.today:hover,
+.datepicker table tr td.today:hover:hover,
+.datepicker table tr td.today.disabled:hover,
+.datepicker table tr td.today.disabled:hover:hover,
+.datepicker table tr td.today:active,
+.datepicker table tr td.today:hover:active,
+.datepicker table tr td.today.disabled:active,
+.datepicker table tr td.today.disabled:hover:active,
+.datepicker table tr td.today.active,
+.datepicker table tr td.today:hover.active,
+.datepicker table tr td.today.disabled.active,
+.datepicker table tr td.today.disabled:hover.active,
+.datepicker table tr td.today.disabled,
+.datepicker table tr td.today:hover.disabled,
+.datepicker table tr td.today.disabled.disabled,
+.datepicker table tr td.today.disabled:hover.disabled,
+.datepicker table tr td.today[disabled],
+.datepicker table tr td.today:hover[disabled],
+.datepicker table tr td.today.disabled[disabled],
+.datepicker table tr td.today.disabled:hover[disabled] {
+  background-color: #fdf59a;
+}
+.datepicker table tr td.today:active,
+.datepicker table tr td.today:hover:active,
+.datepicker table tr td.today.disabled:active,
+.datepicker table tr td.today.disabled:hover:active,
+.datepicker table tr td.today.active,
+.datepicker table tr td.today:hover.active,
+.datepicker table tr td.today.disabled.active,
+.datepicker table tr td.today.disabled:hover.active {
+  background-color: #fbf069 \9;
+}
+.datepicker table tr td.today:hover:hover {
+  color: #000;
+}
+.datepicker table tr td.today.active:hover {
+  color: #fff;
+}
+.datepicker table tr td.range,
+.datepicker table tr td.range:hover,
+.datepicker table tr td.range.disabled,
+.datepicker table tr td.range.disabled:hover {
+  background: #eeeeee;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.datepicker table tr td.range.today,
+.datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today.disabled:hover {
+  background-color: #f3d17a;
+  background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
+  background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
+  background-image: linear-gradient(top, #f3c17a, #f3e97a);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
+  border-color: #f3e97a #f3e97a #edde34;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today:hover:hover,
+.datepicker table tr td.range.today.disabled:hover,
+.datepicker table tr td.range.today.disabled:hover:hover,
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today:hover:active,
+.datepicker table tr td.range.today.disabled:active,
+.datepicker table tr td.range.today.disabled:hover:active,
+.datepicker table tr td.range.today.active,
+.datepicker table tr td.range.today:hover.active,
+.datepicker table tr td.range.today.disabled.active,
+.datepicker table tr td.range.today.disabled:hover.active,
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today:hover.disabled,
+.datepicker table tr td.range.today.disabled.disabled,
+.datepicker table tr td.range.today.disabled:hover.disabled,
+.datepicker table tr td.range.today[disabled],
+.datepicker table tr td.range.today:hover[disabled],
+.datepicker table tr td.range.today.disabled[disabled],
+.datepicker table tr td.range.today.disabled:hover[disabled] {
+  background-color: #f3e97a;
+}
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today:hover:active,
+.datepicker table tr td.range.today.disabled:active,
+.datepicker table tr td.range.today.disabled:hover:active,
+.datepicker table tr td.range.today.active,
+.datepicker table tr td.range.today:hover.active,
+.datepicker table tr td.range.today.disabled.active,
+.datepicker table tr td.range.today.disabled:hover.active {
+  background-color: #efe24b \9;
+}
+.datepicker table tr td.selected,
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected.disabled,
+.datepicker table tr td.selected.disabled:hover {
+  background-color: #9e9e9e;
+  background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
+  background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
+  background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
+  background-image: -o-linear-gradient(top, #b3b3b3, #808080);
+  background-image: linear-gradient(top, #b3b3b3, #808080);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
+  border-color: #808080 #808080 #595959;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected:hover:hover,
+.datepicker table tr td.selected.disabled:hover,
+.datepicker table tr td.selected.disabled:hover:hover,
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected:hover:active,
+.datepicker table tr td.selected.disabled:active,
+.datepicker table tr td.selected.disabled:hover:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected:hover.active,
+.datepicker table tr td.selected.disabled.active,
+.datepicker table tr td.selected.disabled:hover.active,
+.datepicker table tr td.selected.disabled,
+.datepicker table tr td.selected:hover.disabled,
+.datepicker table tr td.selected.disabled.disabled,
+.datepicker table tr td.selected.disabled:hover.disabled,
+.datepicker table tr td.selected[disabled],
+.datepicker table tr td.selected:hover[disabled],
+.datepicker table tr td.selected.disabled[disabled],
+.datepicker table tr td.selected.disabled:hover[disabled] {
+  background-color: #808080;
+}
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected:hover:active,
+.datepicker table tr td.selected.disabled:active,
+.datepicker table tr td.selected.disabled:hover:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected:hover.active,
+.datepicker table tr td.selected.disabled.active,
+.datepicker table tr td.selected.disabled:hover.active {
+  background-color: #666666 \9;
+}
+.datepicker table tr td.active,
+.datepicker table tr td.active:hover,
+.datepicker table tr td.active.disabled,
+.datepicker table tr td.active.disabled:hover {
+  background-color: #006dcc;
+  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
+  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+  border-color: #0044cc #0044cc #002a80;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.active:hover,
+.datepicker table tr td.active:hover:hover,
+.datepicker table tr td.active.disabled:hover,
+.datepicker table tr td.active.disabled:hover:hover,
+.datepicker table tr td.active:active,
+.datepicker table tr td.active:hover:active,
+.datepicker table tr td.active.disabled:active,
+.datepicker table tr td.active.disabled:hover:active,
+.datepicker table tr td.active.active,
+.datepicker table tr td.active:hover.active,
+.datepicker table tr td.active.disabled.active,
+.datepicker table tr td.active.disabled:hover.active,
+.datepicker table tr td.active.disabled,
+.datepicker table tr td.active:hover.disabled,
+.datepicker table tr td.active.disabled.disabled,
+.datepicker table tr td.active.disabled:hover.disabled,
+.datepicker table tr td.active[disabled],
+.datepicker table tr td.active:hover[disabled],
+.datepicker table tr td.active.disabled[disabled],
+.datepicker table tr td.active.disabled:hover[disabled] {
+  background-color: #0044cc;
+}
+.datepicker table tr td.active:active,
+.datepicker table tr td.active:hover:active,
+.datepicker table tr td.active.disabled:active,
+.datepicker table tr td.active.disabled:hover:active,
+.datepicker table tr td.active.active,
+.datepicker table tr td.active:hover.active,
+.datepicker table tr td.active.disabled.active,
+.datepicker table tr td.active.disabled:hover.active {
+  background-color: #003399 \9;
+}
+.datepicker table tr td span {
+  display: block;
+  width: 23%;
+  height: 54px;
+  line-height: 54px;
+  float: left;
+  margin: 1%;
+  cursor: pointer;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.datepicker table tr td span:hover {
+  background: #eeeeee;
+}
+.datepicker table tr td span.disabled,
+.datepicker table tr td span.disabled:hover {
+  background: none;
+  color: #999999;
+  cursor: default;
+}
+.datepicker table tr td span.active,
+.datepicker table tr td span.active:hover,
+.datepicker table tr td span.active.disabled,
+.datepicker table tr td span.active.disabled:hover {
+  background-color: #006dcc;
+  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
+  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
+  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+  border-color: #0044cc #0044cc #002a80;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td span.active:hover,
+.datepicker table tr td span.active:hover:hover,
+.datepicker table tr td span.active.disabled:hover,
+.datepicker table tr td span.active.disabled:hover:hover,
+.datepicker table tr td span.active:active,
+.datepicker table tr td span.active:hover:active,
+.datepicker table tr td span.active.disabled:active,
+.datepicker table tr td span.active.disabled:hover:active,
+.datepicker table tr td span.active.active,
+.datepicker table tr td span.active:hover.active,
+.datepicker table tr td span.active.disabled.active,
+.datepicker table tr td span.active.disabled:hover.active,
+.datepicker table tr td span.active.disabled,
+.datepicker table tr td span.active:hover.disabled,
+.datepicker table tr td span.active.disabled.disabled,
+.datepicker table tr td span.active.disabled:hover.disabled,
+.datepicker table tr td span.active[disabled],
+.datepicker table tr td span.active:hover[disabled],
+.datepicker table tr td span.active.disabled[disabled],
+.datepicker table tr td span.active.disabled:hover[disabled] {
+  background-color: #0044cc;
+}
+.datepicker table tr td span.active:active,
+.datepicker table tr td span.active:hover:active,
+.datepicker table tr td span.active.disabled:active,
+.datepicker table tr td span.active.disabled:hover:active,
+.datepicker table tr td span.active.active,
+.datepicker table tr td span.active:hover.active,
+.datepicker table tr td span.active.disabled.active,
+.datepicker table tr td span.active.disabled:hover.active {
+  background-color: #003399 \9;
+}
+.datepicker table tr td span.old,
+.datepicker table tr td span.new {
+  color: #999999;
+}
+.datepicker th.datepicker-switch {
+  width: 145px;
+}
+.datepicker thead tr:first-child th,
+.datepicker tfoot tr th {
+  cursor: pointer;
+}
+.datepicker thead tr:first-child th:hover,
+.datepicker tfoot tr th:hover {
+  background: #eeeeee;
+}
+.datepicker .cw {
+  font-size: 10px;
+  width: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+.datepicker thead tr:first-child th.cw {
+  cursor: default;
+  background-color: transparent;
+}
+.input-append.date .add-on i,
+.input-prepend.date .add-on i {
+  display: block;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
+.input-daterange input {
+  text-align: center;
+}
+.input-daterange input:first-child {
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+.input-daterange input:last-child {
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.input-daterange .add-on {
+  display: inline-block;
+  width: auto;
+  min-width: 16px;
+  height: 18px;
+  padding: 4px 5px;
+  font-weight: normal;
+  line-height: 18px;
+  text-align: center;
+  text-shadow: 0 1px 0 #ffffff;
+  vertical-align: middle;
+  background-color: #eeeeee;
+  border: 1px solid #ccc;
+  margin-left: -5px;
+  margin-right: -5px;
+}