Clemzd/datepicker materialize

## datepicker materialize
<!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">
      <form id="formulaireDate">
      <div class="row">
        <div class="col s6">
          <input type="date" class="datepicker" data-rule-dateWithMoment="true" />
        </div>
        <div class="col s2">
          <a class="btn-floating btn-large waves-effect waves-light trigger-datepicker"><i class="material-icons">event</i></a>
        </div>
      </div>
    </form>
    </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.min.js"></script>
  <script type="text/javascript" src="js/moment.js"></script>
  <script type="text/javascript" src="js/moment-with-locales.js"></script>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
  <script>
    $(function() {
      //moment.locale('fr');

      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').pickadate({
        editable: true,
        selectMonths: true,
        selectYears: 15,
        format: 'dd/mm/yyyy',
        // pour fermer le datepicker quand on sélectionne une date
        onSet: function(ele) {
          if (ele.select) {
            //this.close();
          }
        }
      }).dblclick(function(){
        $(this).pickadate('picker').set(moment.now());
      });

      $('.trigger-datepicker').click(function(event) {
        event.stopPropagation();
        var $datepicker = $(this).parent().parent().find('.datepicker');
        var picker = $datepicker.pickadate('picker');
        picker.open();
      });

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

</html>
	<!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">
	<form id="formulaireDate">
	<div class="row">
	<div class="col s6">
	<input type="date" class="datepicker" data-rule-dateWithMoment="true" />
	</div>
	<div class="col s2">
	<a class="btn-floating btn-large waves-effect waves-light trigger-datepicker"><i class="material-icons">event</i></a>
	</div>
	</div>
	</form>
	</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.min.js"></script>
	<script type="text/javascript" src="js/moment.js"></script>
	<script type="text/javascript" src="js/moment-with-locales.js"></script>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script>
	$(function() {
	//moment.locale('fr');

	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').pickadate({
	editable: true,
	selectMonths: true,
	selectYears: 15,
	format: 'dd/mm/yyyy',
	// pour fermer le datepicker quand on sélectionne une date
	onSet: function(ele) {
	if (ele.select) {
	//this.close();
	}
	}
	}).dblclick(function(){
	$(this).pickadate('picker').set(moment.now());
	});

	$('.trigger-datepicker').click(function(event) {
	event.stopPropagation();
	var $datepicker = $(this).parent().parent().find('.datepicker');
	var picker = $datepicker.pickadate('picker');
	picker.open();
	});

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

	</html>