Clemzd/gist:fc51f0a1f370708be1e2

## gistfile1.txt
<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <div class="row">
    <div class="container">
      <h1>Coucou</h1>
      <div class="row">
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>
      <form id="formulaireDate">
        <div class="row">
          <div class="col s6">
            <input type="text" class="datepicker" data-rule-dateWithMoment="true" pattern="[0-9\/]*"/>
          </div>
        </div>
      </form>
      <div class="row">
        <a class="waves-effect waves-light btn" id="boutonExporterPdf">Exporter la page en pdf</a>
      </div>
    </div>
  </div>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.js"></script>
  <script type="text/javascript" src="js/moment.js"></script>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
  <script type="text/javascript" src="js/extension.js"></script>

  <script>
    $(function() {
      jQuery.validator.addMethod("dateWithMoment", function(value, element) {
        // allow any non-whitespace characters as the host part
        return this.optional(element) || moment(value, "DD/MM/YYYY", true).isValid();
      }, 'Please enter a valid date with moment.');

      $('.datepicker').calendrier();
      $('#formulaireDate').validate();
    });
  </script>
</body>

</html>


(function($) {

  $.fn.calendrier = function(options) {
    // Options du datepicker
    var settings = $.extend({
      // These are the defaults.
      selectYears: 15,
    }, options);

    // création de l'icone permettant d'ouvrir le widget picker
    var $iconeDeclencheur = $('<div class="col s2"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker"><i class="material-icons">event</i></a></div>');
    $iconeDeclencheur.click(function(event) {
      event.stopPropagation();
      event.preventDefault();
      var $inputPicker = $(this).parent().parent().find('.datepicker');
      var picker = $inputPicker.pickadate('picker');
      // si la date est valide on a la renseigne pour le datepicker
      if (moment($inputPicker.val(), "DD/MM/YYYY", true).isValid()) {
        picker.set('select', $inputPicker.val());
      }
      picker.open();
    });

    this
      .pickadate({
        editable: true,
        selectMonths: true,
        selectYears: settings.selectYears,
        format: 'dd/mm/yyyy',
        // pour fermer le datepicker quand on sélectionne une date
        onSet: function(ele) {
          if (ele.select) {
            this.close();
          }
        }
      })
      .change(function() {
        // TODO formatter date 010110 => 01/10/2010
        // $(this).val());
      })
      // si on double clic sur le champ, la date du jour est automatiquement renseignée
      .dblclick(function() {
        $(this).pickadate('picker').set('select', moment.now());
      })
      // ajout de l'icone declencher
      .parent().after($iconeDeclencheur);

    // Désactiver l'ouverture automatique du picker qui fait un peu n'importe quoi
    this.next().unbind("focus.toOpen");

    return this;
  };
}(jQuery));
	<!DOCTYPE html>
	<html>

	<head>
	<!--Import Google Icon Font-->
	<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!--Import materialize.css-->
	<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />

	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body>
	<div class="row">
	<div class="container">
	<h1>Coucou</h1>
	<div class="row">
	<div class="col s12 m6">
	<div class="card blue-grey darken-1">
	<div class="card-content white-text">
	<span class="card-title">Card Title</span>
	<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
	</div>
	<div class="card-action">
	<a href="#">This is a link</a>
	<a href="#">This is a link</a>
	</div>
	</div>
	</div>
	</div>
	<form id="formulaireDate">
	<div class="row">
	<div class="col s6">
	<input type="text" class="datepicker" data-rule-dateWithMoment="true" pattern="[0-9\/]*"/>
	</div>
	</div>
	</form>
	<div class="row">
	<a class="waves-effect waves-light btn" id="boutonExporterPdf">Exporter la page en pdf</a>
	</div>
	</div>
	</div>

	<!--Import jQuery before materialize.js-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/materialize.js"></script>
	<script type="text/javascript" src="js/moment.js"></script>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/extension.js"></script>

	<script>
	$(function() {
	jQuery.validator.addMethod("dateWithMoment", function(value, element) {
	// allow any non-whitespace characters as the host part
	return this.optional(element) \|\| moment(value, "DD/MM/YYYY", true).isValid();
	}, 'Please enter a valid date with moment.');

	$('.datepicker').calendrier();
	$('#formulaireDate').validate();
	});
	</script>
	</body>

	</html>




	(function($) {

	$.fn.calendrier = function(options) {
	// Options du datepicker
	var settings = $.extend({
	// These are the defaults.
	selectYears: 15,
	}, options);

	// création de l'icone permettant d'ouvrir le widget picker
	var $iconeDeclencheur = $('<div class="col s2"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker"><i class="material-icons">event</i></a></div>');
	$iconeDeclencheur.click(function(event) {
	event.stopPropagation();
	event.preventDefault();
	var $inputPicker = $(this).parent().parent().find('.datepicker');
	var picker = $inputPicker.pickadate('picker');
	// si la date est valide on a la renseigne pour le datepicker
	if (moment($inputPicker.val(), "DD/MM/YYYY", true).isValid()) {
	picker.set('select', $inputPicker.val());
	}
	picker.open();
	});

	this
	.pickadate({
	editable: true,
	selectMonths: true,
	selectYears: settings.selectYears,
	format: 'dd/mm/yyyy',
	// pour fermer le datepicker quand on sélectionne une date
	onSet: function(ele) {
	if (ele.select) {
	this.close();
	}
	}
	})
	.change(function() {
	// TODO formatter date 010110 => 01/10/2010
	// $(this).val());
	})
	// si on double clic sur le champ, la date du jour est automatiquement renseignée
	.dblclick(function() {
	$(this).pickadate('picker').set('select', moment.now());
	})
	// ajout de l'icone declencher
	.parent().after($iconeDeclencheur);

	// Désactiver l'ouverture automatique du picker qui fait un peu n'importe quoi
	this.next().unbind("focus.toOpen");

	return this;
	};
	}(jQuery));