Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Liens

Un Date Range Slider pour vos projet MVC
Un Date Range Slider est le mariage entre un Range Slider (un composant graphique permettant de sélectionner une plage de valeurs, soit un minimum et un maximum) et un Date Picker.

Voici un petit aperçu du composant :



Au début je pensais que le composant MVC Telerik Slider prenait en charge ce type de comportement mais en fait non, le composant ne gère que des nombres.
L'astuce est donc de traduire à la volée le chiffre minimum et le chiffre maximum en date. Pour cela je prends une date pivot qui correspond à ma date minimum. Cette date pivot sera le minimum saisissable dans le Slider. Pour chaque nombre (le minimum saisissable, le minimum choisit, le maximum choisit, le maximum saisissable) je compte le nombre de jours par rapport à cette date pivot et donc j'en déduis les dates.

Voici le code razor pour définir le composant Slider :

<div id="timewrapper">
  @(Html.Telerik().RangeSlider<int>()
    .Name("DateRange")
    .Tooltip(tooltip => tooltip.Enabled(false))
    .ClientEvents(events => events
      .OnChange("CustomTelerikExtensions.dateRangeSlider().updateDates")
      .OnSlide("CustomTelerikExtensions.dateRangeSlider().updateDates"))
    .Min(1)
    .Max(22)
    .Values(1, 22)
    .SmallStep(1)
    .LargeStep(21)
    .Orientation(SliderOrientation.Horizontal)
    .TickPlacement(SliderTickPlacement.BottomRight)
  )
</div>

<p>
  Début : <span id="minValueDiv"></
span>
  <br />
  Fin : <span id="maxValueDiv">
</span>
</p>



Je dois cacher le tooltip car le composant Telerik ne permet pas de surcharger son rendu. Si quelqu'un a une technique je suis preneur :)

J'indique donc la fonction à exécuter sur le changement ou le slide : updateDates.

Voici le code JavaScript pour gérer l'affichage et le calcul des dates :

<script type="text/javascript">
  (function () {
    CustomTelerikExtensions = window.CustomTelerikExtensions || {};

    CustomTelerikExtensions.dateRangeSlider = function (tId, minValueId, maxValueId, pDate, step) {
      var self = this;
      self.id = tId ? tId : "timewrapper";
      self.minBlocId = minValueId ? minValueId : "minValueDiv";
      self.maxBlocId = maxValueId ? maxValueId : "maxValueDiv";
      self.pivotDate = pDate ? pDate : new Date();
      self.col = $("#" + self.id + " .t-tick-large .t-label");
      self.largeStep = step ? step : 21;

      self.formatDate = function (d) {
        var day = d.getDate();
        var month = d.getMonth() + 1;
        day = (day < 10) ? "0" + day : day;
        month = (month < 10) ? "0" + month : month;
        return day + "/" + month;
      };

      var my = {};
      my.init = function (min, max) {
        my.updateValues(min, max);
      };
      my.updateDates = function (e) {
        var rangeSlider = $(this).data('tRangeSlider');
        var start = e.values[0];
        var end = e.values[1];
        my.updateValues(start, end);
      };
      my.updateValues = function (valueMin, valueMax) {
        var fDate = new Date(self.pivotDate);
        for (var i = 0; i < self.col.length; i++) {
          var j = (i < 1) ? 0 : self.largeStep;
          fDate.setDate(fDate.getDate() + j);
          var d = fDate.getDate();
          var m = fDate.getMonth() + 1;
          d = (d < 10) ? "0" + d : d;
          m = (m < 10) ? "0" + m : m;
          var txt = d + "/" + m;

          $(self.col[ i ]).text(txt);
        }

        var min = new Date(self.pivotDate);
        min.setDate(min.getDate() + valueMin - 1);
        $("#" + self.minBlocId).html(self.formatDate(min));

        var max = new Date(self.pivotDate);
        max.setDate(max.getDate() + valueMax - 1);
        $("#" + self.maxBlocId).html(self.formatDate(max));
      };
      return my;
    };
  })();

</
script>


Il reste à initialiser une première fois les dates à l'affichage de la page :

<script type="text/javascript">
  $(function () {
    CustomTelerikExtensions.dateRangeSlider().init(1, 22);
  });

</script>

Pour que le code fonctionne, il faut que la propriété LargeStep du RangeSlider possède la même valeur que la variable largeStep de la classe JavaScript dateRangeSlider.

Par défaut le code utilisera le slider contenu dans un bloc HTML avec l'Id "timewrapper", et les éléments HTML "minValueDiv" et "maxValueDiv" pour l'affichage des dates sélectionnées. La date pivot par défaut et la date du jour et le largeStep par défaut est de 21 jours.
Ces éléments peuvent être bien sûr redéfinis dans la création de la classe dateRangeSlider.

Pour utiliser le code et le rendre dynamique, il reste donc à utiliser des propriétés du ViewModel mais pour cela je vous laisserez écrire le code qui n'a rien de compliqué.

Il doit sûrement rester beaucoup de points d'optimisation du code, si vous avez des questions ou suggestions n'hésitez pas.

Julien Lefebvre
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: lundi 16 avril 2012 17:45 par jlefebvre

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Retrouvez-moi aux Microsoft experiences18 ! par Blog de Jérémy Jeanson le 11-06-2018, 22:25

- Office 365: Script PowerShell pour extraire les Teams associés à un utilisateur spécifié par Blog Technique de Romelard Fabrice le 11-06-2018, 13:37

- SharePoint: Extraire les pages publiées dans un site de publishing en CSV par Blog Technique de Romelard Fabrice le 11-06-2018, 11:04

- Office 365: Comment créer un jeu de Pages Modernes dans un Modern Site SharePoint Online en utilisant PowerShell depuis un fichier CSV par Blog Technique de Romelard Fabrice le 10-17-2018, 12:50

- Office 365: Comment Utiliser les Modern Pages dans un Site Intranet SharePoint basé sur le Publishing site par Blog Technique de Romelard Fabrice le 10-16-2018, 15:34

- Office 365: Comment changer le nom “Auteur” dans les pages modernes d'un Modern Site SharePoint Online par Blog Technique de Romelard Fabrice le 10-16-2018, 15:07

- Reprise des articles Codes-Sources de 2011 à 2013 par Blog de Jérémy Jeanson le 08-21-2018, 16:08

- Office 365: Modifier les jeux de couleur dans les Thèmes des pages classiques de SharePoint Online par Blog Technique de Romelard Fabrice le 08-08-2018, 17:27

- Office 365: Modifier les jeux de couleur dans les Thèmes des pages modernes de SharePoint Online par Blog Technique de Romelard Fabrice le 07-04-2018, 13:26

- Office 365: Script PowerShell pour fixer le Quota Warning de toutes les collections d’un tenant par Blog Technique de Romelard Fabrice le 07-03-2018, 14:16