问题描述:

I have problem with materialize collapsible and date picker. Collapsible is not even opening on click and the date picker too. Date picker placed in Personal details - collapsible item. Someone please help me to fix collapsible and date picker.

Check: Placements App

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Placements MGIT</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

<!-- If CDN not available, loading JQuery from Server-->

<script>

if (!window.jQuery) {

document.write('<script src="/js/jquery.min.js"><\/script>');

}

</script>

<!-- Compiled and minified CSS -->

<link rel="stylesheet" href="/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->

<script src="/js/materialize.min.js"></script>

</head>

<body>

<nav>

<div class="nav-wrapper">

<a href="#" class="brand-logo right">MGIT Placements</a>

<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">M</i></a>

<ul class="left hide-on-med-and-down">

<li class="active"><a href="#">Login</a></li>

<li><a href="/student_reg">Register</a></li>

<li><a href="#">Upcoming</a></li>

<li><a href="#">Contact</a></li>

</ul>

<ul class="side-nav" id="mobile-demo">

<li class="active"><a href="/">Home</a></li>

<li><a href="/student_lgn">Login</a></li>

<li><a href="/student_reg">Register</a></li>

<li><a href="#">Upcoming</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</nav>

<div class="row">

<div class="student-profile">

<div class="col l8 offset-l2 m10 offset-m1">

<ul class="collapsible" popout" data-collapsible="accordion">

<li>

<div class="collapsible-header">Pefrsonal Info</div>

<div class="collapsible-body">

<div id="personal">

<div class="card black-text">

<div class="input-field col s12 m4 l4">

<input type="text" id="firstname" />

<label for="firstname">First Name:</label>

</div>

<div class="input-field col s12 l4 m4">

<input type="text" id="lastname" />

<label for="lastname">Last Name:</label>

</div>

<div class="input-field col s12 l4 m4">

<input type="text" id="surname" />

<label for="surname">Surname:</label>

</div>

<div class="input-field col s12 m6 l6">

<input type="text" id="father" />

<label for="father">Father Name:</label>

</div>

<div class="input-field col s12 l6 m6">

<input type="text" id="mother" />

<label for="mother">Mother Name:</label>

</div>

<div class="input-field col s12 m6 l6">

<input type="date" class="datepicker" />

</div>

</div>

</div>

</div>

</li>

<li>

<div class="collapsible-header">Academics Info</div>

<div class="collapsible-body"> Acaademics Should be here</div>

</li>

<li>

<div class="collapsible-header">Change Password</div>

<div class="collapsible-body">Password Change Shoule be here</div>

</li>

<li>

<div class="collapsible-header">View Data </div>

<div class="collapsible-body" id="dynamicdata">View Data</div>

</li>

</ul>

</div>

</div>

</div>

<style type="text/css">

<style type="text/css">

body {

background-color: #FCFCFC;

}

nav{

background-color: #33597C;

}

.updates{

position: absolute;

padding: 20px;

background: transparent;

}

marquee{

padding: 20px;

}

.vline{

width: 1px;

position: absolute;

background-color: orange;

}

.vline.medium{

top: initial;

height: 420px;

}

.small-login{

padding: 20px;

}

.login-fields{

padding: 20px;

}

h6{

color: #33597C;

}

h2 {

color: grey;

}

/* #4A6787 ; #33597C; */

.login-bg {

margin-top: 5%;

}

#message {

color: red;

margin: 20px;

}

#lgn_btn{

top: 20px;

background-color: #33597C;

width: 60%;

}

/* label focus color */

.input-field input[type=text]:focus + label {

color: #1A237E;

}

/* label underline focus color */

.input-field input[type=text]:focus {

border-bottom: 1px solid #1A237E;

box-shadow: 0 1px 0 0 #1A237E;

}

/* label focus color */

.input-field input[type=password]:focus + label {

color: #1A237E;

}

/* label underline focus color */

.input-field input[type=password]:focus {

border-bottom: 1px solid #1A237E;

box-shadow: 0 1px 0 0 #1A237E;

}

</style>

<script type="text/javascript">

jresp = '{% autoescape off%}{{jresp}}{% endautoescape%}';

resp = JSON.parse(jresp);

rollno = resp['rollno'];

details = resp['data'];

var update = document.getElementById('dynamicdata')

for (keys in details) {

update.innerHTML += "<b>"+keys[0].toUpperCase()+keys.slice(1).toLocaleLowerCase()+": </b>"+details[keys]+"<br />"

}

$('.datepicker').pickadate({

selectMonths: true,

selectYears: 15,

});

$(".button-collapse").sideNav();

$(document).ready(function () {

$('.collapsible').collapsible({

accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style

});

});

</script>

</body>

</html>

网友答案:

Well, after reading code, debugging and Googling I am able to fix the problem.

First thing - Materialize Collapsible.

Clicking on collapsible header, display property of collapsible body is not changing.

So, adding display property for the element collapsible body, will fix the problem.

collapsible-body{
   display: block;
}

` Second thing - Materialize DatePicker

On Chrome, it is not responding to mouse clicks. But, responding to space button.

So, to fix this issue, I just added a bit of JQuery code as shown below.

Date Picker HTML Code

<div class="input-field col s12 m6 l6">
    <label for="dob">Date of Birth:</label>
    <input id="dob" type="text" class="datepicker" />
</div>

and mouse click event that triggers...

 $('.datepicker').pickadate({
      selectMonths: true,
      selectYears: 40,
      min: new Date(1990,0,1),
      max: new Date(2000,11,31),
      closeOnSelect: true,
 });
 $("#dob").click(function (event) {
      event.stopPropagation();
      $(".datepicker").first().pickadate("picker").open();
 });

Here, you can see the working materialize date picker...

$('.datepicker').pickadate({
  selectMonths: true,
  selectYears: 40,
  min: new Date(1990, 0, 1),
  max: new Date(2000, 11, 31),
  closeOnSelect: true,
});
$("#dob").click(function(event) {
  event.stopPropagation();
  $(".datepicker").first().pickadate("picker").open();
});
<head>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>

<body>
  <div class="input-field">
    <label for="dob">Date of Birth:</label>
    <input id="dob" type="date" class="datepicker" />
  </div>
</body>
相关阅读:
Top