I am trying to make a Date field required and show a datepicker on click, I am using materialize date picker.
I can get a date picker to pop up, but the required html5 tag does not work. JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href=".97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src=".1.1.min.js"></script>
<script src=".97.6/js/materialize.min.js"></script>
<!-- Icons -->
<link href="+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="col s12">
<p></p>
</div>
<div class="col s12 m4 l2">
<p></p>
</div>
<div class="col s12 m4 l8">
<p></p>
<div class="row">
<form>
<input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required>
<label for="check_in_date">Check In Date</label>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="col s12 m4 l2">
<p></p>
</div>
</body>
<script>
$('.datepicker').pickadate({
format: 'dd/mm/yyyy',
selectMonths: true, // Creates a dropdown to control month
selectYears: 5, // Creates a dropdown of 15 years to control year
// editable: true
});
$(document).ready(function() {
$('select').material_select();
});
</script>
</html>I am trying to make a Date field required and show a datepicker on click, I am using materialize date picker.
I can get a date picker to pop up, but the required html5 tag does not work. JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<!-- Icons -->
<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="col s12">
<p></p>
</div>
<div class="col s12 m4 l2">
<p></p>
</div>
<div class="col s12 m4 l8">
<p></p>
<div class="row">
<form>
<input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required>
<label for="check_in_date">Check In Date</label>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="col s12 m4 l2">
<p></p>
</div>
</body>
<script>
$('.datepicker').pickadate({
format: 'dd/mm/yyyy',
selectMonths: true, // Creates a dropdown to control month
selectYears: 5, // Creates a dropdown of 15 years to control year
// editable: true
});
$(document).ready(function() {
$('select').material_select();
});
</script>
</html>If I set editable in the Date picker JS, the field bees required, but the date picker does not show up on click (you have to press tab for it to show up)... JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<!-- Icons -->
<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="col s12">
<p></p>
</div>
<div class="col s12 m4 l2">
<p></p>
</div>
<div class="col s12 m4 l8">
<p></p>
<div class="row">
<form>
<input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required>
<label for="check_in_date">Check In Date</label>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="col s12 m4 l2">
<p></p>
</div>
</body>
<script>
$('.datepicker').pickadate({
format: 'dd/mm/yyyy',
selectMonths: true, // Creates a dropdown to control month
selectYears: 5, // Creates a dropdown of 15 years to control year
editable: true
});
$(document).ready(function() {
$('select').material_select();
});
</script>
</html>How can I get these two things (date picker on click & required field) working together?
Share Improve this question asked May 17, 2016 at 18:29 Anon957Anon957 5682 gold badges7 silver badges27 bronze badges2 Answers
Reset to default 2try this :
$(".datetimepicker").prop('readonly', false);
with html :
<input required type="text" class="datetimepicker" name="mydate">
Set up a click handler on the .datepicker and utilize pickadate.js's open function and editable option.
$(document).ready(function() {
var pickr = $('.datepicker').pickadate({
format: 'dd/mm/yyyy',
selectMonths: true, // Creates a dropdown to control month
selectYears: 5, // Creates a dropdown of 15 years to control year
editable: true
});
$('select').material_select();
$('.datepicker').click(function() {
pickr.pickadate('open');
});
});
Updated Fiddle
Edited to handle multiple .datepickers:
$(document).ready(function() {
$('.datepicker').each(function(){
var pickr = $(this).pickadate({
format: 'dd/mm/yyyy',
selectMonths: true, // Creates a dropdown to control month
selectYears: 5, // Creates a dropdown of 15 years to control year
editable: true
});
$(this).click(function(){
pickr.pickadate('open');
});
});
$('select').material_select();
});
Another Fiddle