Problem with multiple datepicker input field

Topic: Problem with multiple datepicker input field

develo-per pro asked 6 years ago

When I use two or more input fields in one document, the buttons "today", "clear" and "close" are working only with the last input in html. Any ideas?

Jakub Strebeyko staff commented 6 years ago

Hi there, Could you please provide the code and/or a working jsfiddle / codepen example? Thanks. With Best Regards, Kuba

Add comment

develo-per pro answered 6 years ago

0 0 Best answer

<pre><!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Example</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/mdb.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript">
$(function(){
  $('.datepicker').pickadate();
});
</script>

</body>
</html>
</pre>

Please insert min. 20 characters.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Example</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/mdb.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <input placeholder="Selected date 1" type="text" id="datepicker-1" class="form-control datepicker">
  <input placeholder="Selected date 2" type="text" id="datepicker-2" class="form-control datepicker">

<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript">
$(function(){
  $('.datepicker').pickadate();
});
</script>

</body>
</html>

develo-per pro commented 6 years ago

... a not working example

Jakub Strebeyko staff commented 6 years ago

Hi there develo-per, I inserted the code into the jq-pro / html / _test.html file to check what's up. My suggestions: make sure that the paths to consecutive scripts actually lead to the files - I personally had to change them to have it working. Secondly - there's no such thing shipped with MDB jQuery PRO package as jquery.min.js - it's the case only when using jQuery hosted at CDN. If you're using jQuery 3.2.1 coming with the MDB package, please ensure it has its proper name and that the path fits it properly. After that the code's getting no errors and all Date Pickers' button work as a charm. With Best Regards, Jake

Please insert min. 15 characters.

develo-per pro commented 6 years ago

thx a lot, I'll try it

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

develo-per

Pro User 15Support score
2Questions 1Answers 1Snippets