[enh] Ajoute et personnalise Datepicker pour sélectionner une date

master
Jérôme Lebleu 2017-09-17 16:28:25 +02:00
Parent b8528d3632
révision fb09abf32c
7 fichiers modifiés avec 295 ajouts et 10 suppressions

Voir le fichier

@ -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>

26
package-lock.json générée
Voir le fichier

@ -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",

Voir le fichier

@ -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",

Voir le fichier

@ -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
});
});

40
src/js/lib/datepicker.js Normal file
Voir le fichier

@ -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(
/>&lsaquo;/g, ' class="icon icon-chevron-left">'
).replace(
/>&rsaquo;/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
});

Voir le fichier

@ -64,6 +64,7 @@
/// Composants personnalisés -------------------------------------------------
@import 'accordion';
@import 'datepicker';
@import 'forms';
@import 'navigation';
@import 'panel';

Voir le fichier

@ -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;
}