[enh] Ajoute et personnalise Datepicker pour sélectionner une date
Parent
b8528d3632
révision
fb09abf32c
|
@ -16,7 +16,14 @@
|
|||
<label for="elements-filtre-date">À partir du :</label>
|
||||
</div>
|
||||
<div class="medium-shrink cell">
|
||||
<input type="date" id="elements-filtre-date" name="date_debut" class="medium-compact" placeholder="JJ/MM/AAAA">
|
||||
<div class="medium-compact input-group">
|
||||
<input type="date" id="elements-filtre-date" name="date_debut" class="input-group-field" placeholder="JJ/MM/AAAA" data-datepicker>
|
||||
<div class="input-group-button">
|
||||
<button type="button" class="secondary button" data-trigger="elements-filtre-date">
|
||||
<span class="icon icon-calendar" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,6 +4,14 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@fengyuanchen/datepicker": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@fengyuanchen/datepicker/-/datepicker-0.5.5.tgz",
|
||||
"integrity": "sha512-E5g3eoHSgyn2vs1qL/LBOni9ZnoNsdJkC5ntRyZwba4Oyp+aBfbtKv58KVa7ujGryUv/Q4cqo5vTAAKtyPJLOQ==",
|
||||
"requires": {
|
||||
"jquery": "3.2.1"
|
||||
}
|
||||
},
|
||||
"@gulp-sourcemaps/map-sources": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz",
|
||||
|
@ -7106,15 +7114,6 @@
|
|||
"readable-stream": "2.3.3"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
|
||||
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"string-template": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
|
||||
|
@ -7132,6 +7131,15 @@
|
|||
"strip-ansi": "3.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
|
||||
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
"watch": "gulp watch:dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fengyuanchen/datepicker": "~0.5.4",
|
||||
"foundation-sites": "~6.4.2",
|
||||
"jquery": ">=3.0.0",
|
||||
"motion-ui": "~1.2.2",
|
||||
|
|
|
@ -7,6 +7,11 @@ import { Foundation } from './lib/foundation';
|
|||
// Configure les composants de Foundation
|
||||
Foundation.Accordion.defaults.allowAllClosed = true;
|
||||
|
||||
// Charge les autres librairies
|
||||
import './lib/datepicker';
|
||||
|
||||
/// Application ---------------------------------------------------------------
|
||||
|
||||
// Charge Foundation sur tout le document
|
||||
$(document).foundation();
|
||||
|
||||
|
@ -52,3 +57,19 @@ $('input[type="password"]').on('toggle.zf.trigger', function() {
|
|||
|
||||
$(this).focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* Affiche un selecteur de date.
|
||||
*
|
||||
* Initialise pour tous les éléments avec l'attribut ``data-datepicker``
|
||||
* un selecteur de date avec Datepicker. Les éléments ayant un attribut
|
||||
* ``data-trigger`` avec comme valeur l'id du champ déclencheront
|
||||
* l'affichage du selecteur.
|
||||
*/
|
||||
$('[data-datepicker]').each(function() {
|
||||
let id = this.id || Foundation.GetYoDigits(),
|
||||
triggers = $(`[data-trigger="${id}"]`);
|
||||
$(this).datepicker({
|
||||
trigger: (triggers.length) ? triggers : null
|
||||
});
|
||||
});
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
/**
|
||||
* Datepicker : https://github.com/fengyuanchen/datepicker
|
||||
* Licence MIT - 2014-2017 Fengyuan Chen
|
||||
*/
|
||||
import '@fengyuanchen/datepicker/src/datepicker.js';
|
||||
|
||||
// Remplace les fléches suivante / précédente par une icône, en ajoutant
|
||||
// les classes correspondantes à l'élément directement.
|
||||
let template = $.fn.datepicker.Constructor.DEFAULTS.template.replace(
|
||||
/>‹/g, ' class="icon icon-chevron-left">'
|
||||
).replace(
|
||||
/>›/g, ' class="icon icon-chevron-right">'
|
||||
);
|
||||
|
||||
$.fn.datepicker.setDefaults({
|
||||
autoHide: true,
|
||||
template: template,
|
||||
// adapte l'affichage en français
|
||||
format: 'dd/mm/yyyy',
|
||||
days: [
|
||||
'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'
|
||||
],
|
||||
daysShort: [
|
||||
'dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'
|
||||
],
|
||||
daysMin: [
|
||||
'di', 'lu', 'ma', 'me', 'je', 've', 'sa'
|
||||
],
|
||||
months: [
|
||||
'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet',
|
||||
'août', 'septembre', 'octobre', 'novembre', 'décembre'
|
||||
],
|
||||
monthsShort: [
|
||||
'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin',
|
||||
'juill.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'
|
||||
],
|
||||
weekStart: 1
|
||||
});
|
|
@ -64,6 +64,7 @@
|
|||
/// Composants personnalisés -------------------------------------------------
|
||||
|
||||
@import 'accordion';
|
||||
@import 'datepicker';
|
||||
@import 'forms';
|
||||
@import 'navigation';
|
||||
@import 'panel';
|
||||
|
|
|
@ -0,0 +1,207 @@
|
|||
// Styles pour le plugin Datepicker
|
||||
// --------------------------------
|
||||
// basé sur https://github.com/fengyuanchen/datepicker/blob/master/src/datepicker.css
|
||||
|
||||
$datepicker-width: rem-calc(210) !default;
|
||||
$datepicker-padding: 0.25rem !default;
|
||||
$datepicker-background: $white !default;
|
||||
$datepicker-border: 0 !default;
|
||||
$datepicker-border-radius: $global-radius !default;
|
||||
$datepicker-shadow: z-depth-1() !default;
|
||||
$datepicker-font-size: rem-calc(12) !default;
|
||||
$datepicker-arrow-offset: 10px !default;
|
||||
$datepicker-arrow-size: 5px !default;
|
||||
$datepicker-arrow-color: $secondary-color !default;
|
||||
$datepicker-border-active: 1px solid $datepicker-arrow-color !default;
|
||||
$datepicker-item-padding: rem-calc(4) rem-calc(5) !default;
|
||||
$datepicker-item-line-height: 1.5 !default;
|
||||
$datepicker-item-background-hover: lighten($secondary-color, 10%) !default;
|
||||
$datepicker-item-color-hover: $white !default;
|
||||
$datepicker-item-picked-color: $secondary-color !default;
|
||||
$datepicker-item-picked-color-hover: $datepicker-item-color-hover !default;
|
||||
|
||||
/// Conteneur
|
||||
|
||||
.datepicker-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $datepicker-width;
|
||||
padding: $datepicker-padding;
|
||||
background-color: $datepicker-background;
|
||||
font-size: $datepicker-font-size;
|
||||
direction: ltr;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
z-index: -1;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
content: '';
|
||||
border: inset $datepicker-arrow-size;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
position: absolute;
|
||||
border: $datepicker-border;
|
||||
border-radius: $datepicker-border-radius;
|
||||
box-shadow: $datepicker-shadow;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.datepicker-inline {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.datepicker-top-left,
|
||||
.datepicker-top-right {
|
||||
border-top: $datepicker-border-active;
|
||||
|
||||
&::before {
|
||||
top: -$datepicker-arrow-size;
|
||||
left: $datepicker-arrow-offset;
|
||||
border-top-width: 0;
|
||||
border-bottom-style: solid;
|
||||
border-color: transparent transparent $datepicker-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-bottom-left,
|
||||
.datepicker-bottom-right {
|
||||
border-bottom: $datepicker-border-active;
|
||||
|
||||
&::before {
|
||||
bottom: -$datepicker-arrow-size;
|
||||
left: $datepicker-arrow-offset;
|
||||
border-bottom-width: 0;
|
||||
border-top-style: solid;
|
||||
border-color: $datepicker-arrow-color transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-top-right,
|
||||
.datepicker-bottom-right {
|
||||
&::before {
|
||||
left: auto;
|
||||
right: $datepicker-arrow-offset;
|
||||
}
|
||||
}
|
||||
|
||||
/// Panels
|
||||
|
||||
.datepicker-panel {
|
||||
& > ul {
|
||||
@include xy-grid($wrap: true);
|
||||
@include flex-align(justify, middle);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
padding-bottom: get-side($datepicker-padding, top);
|
||||
border-bottom: 1px solid $medium-gray;
|
||||
|
||||
& + :not([data-view="week"]) {
|
||||
margin-top: get-side($datepicker-padding, top);
|
||||
}
|
||||
}
|
||||
|
||||
& > li {
|
||||
@include xy-cell-base(shrink);
|
||||
padding: $datepicker-item-padding;
|
||||
background-color: $datepicker-background;
|
||||
border-radius: $datepicker-border-radius;
|
||||
line-height: $datepicker-item-line-height;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&[data-view]:hover {
|
||||
background-color: $datepicker-item-background-hover;
|
||||
color: $datepicker-item-color-hover;
|
||||
}
|
||||
|
||||
&.muted {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background-color: $datepicker-item-background-hover;
|
||||
color: $datepicker-item-color-hover;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($datepicker-item-background-hover, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.picked {
|
||||
color: $datepicker-item-picked-color;
|
||||
font-weight: $global-weight-bold;
|
||||
|
||||
&:hover,
|
||||
&.highlighted {
|
||||
color: $datepicker-item-picked-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
background-color: $datepicker-background;
|
||||
color: $medium-gray;
|
||||
cursor: default;
|
||||
|
||||
&.highlighted {
|
||||
background-color: $datepicker-item-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-view="years"],
|
||||
ul[data-view="months"] {
|
||||
& > li {
|
||||
width: xy-cell-size(1/3);
|
||||
line-height: $datepicker-item-line-height * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-view="week"],
|
||||
ul[data-view="days"] {
|
||||
& > li {
|
||||
width: xy-cell-size(1/7);
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-view="week"] {
|
||||
background-color: $light-gray;
|
||||
border-bottom: 1px solid $medium-gray;
|
||||
|
||||
& > li,
|
||||
& > li:hover {
|
||||
background: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
li[data-view~="prev"],
|
||||
li[data-view~="next"] {
|
||||
width: 30px;
|
||||
|
||||
&::before {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
li[data-view~="current"] {
|
||||
@include xy-cell-base(auto);
|
||||
font-weight: $global-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-hide {
|
||||
display: none;
|
||||
}
|
Chargement…
Référencer dans un nouveau ticket