Skip to content

Instantly share code, notes, and snippets.

@clementgpro

clementgpro/datepicker materialize

Created February 16, 2016 21:11
Show Gist options
  • Save clementgpro/42b517c9d5fdbb07f85c to your computer and use it in GitHub Desktop.
Save clementgpro/42b517c9d5fdbb07f85c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment