Timepicker does not work.

"We are currently implementing the ""Timepicker"" function on the screen, but it does not work."
"There is a ""11:00 PM"" sign in the input box, but when I try to press the button, nothing is working."How do I modify it so that I can click on the button and choose the time?
I am using bootstrap downloaded from http://getbootstrap.com/getting-started/ #download which I have been using for a long time.
Also, I would like to add the function of timepicker this time, so I downloaded v0.5.2 from https://github.com/jdewit/bootstrap-timepicker/releases and

What files do you think timepicker will need? "bootstrap-timepicker.min.css
US>Copy and implement js/bootstrap-timepicker.min.js to bootstrap that you have been using for a long time

<!DOCTYPE html>
<html lang="ja">
  <head>
    <metacharset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Timepecker</title>

    <link href="css/bootstrap.min.css"rel="stylesheet">
    <link type="text/css" href="css/bootstrap-timepicker.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
  </head>
  <body>
    <div class="container">

      <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
        </div>

        <script type="text/javascript">
            $('#timepicker1').timepicker();
        </script>
    </div>
</body>
</html>

jquery html5 bootstrap

2022-09-30 21:20

1 Answers

This is because the rel="stylesheet" attribute is not specified in the link tag of the bootstrap-timepicker.
It works if you specify the following:

$('#timepicker1').timepicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css"rel="stylesheet"/>
<div class="container">
    <div class="input-group bootstrap-timepicker timepicker">
        <input id="timepicker1" type="text" class="form-control input-small">
        <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
    </div>
</div>

2022-09-30 21:20

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656