I want to change the time by handling check boxes.

The default time is 9:00 when the screen is displayed.
screen is displayed. I would like to implement it so that if I check the end time check box, it will switch to 22:00, and if I uncheck the check box, it will switch to 21:00, but it doesn't work.(By default, the time is 9:00 when the screen is displayed.)
How should I correct it?Thank you.

<!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> Ayeo Shop </title>

  <link href="css/bootstrap.min.css"rel="stylesheet">
  <link type="text/css"rel="stylesheet" href="css/bootstrap-timepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
  <style>.input-group.timepicker {display:inline-table;
   vertical-align:middle;}</style>

 </head>
 <body>
   <div class="container">
    <p> Ayeo Shop </p>
    <p>Address: Chiyoda Ward, Tokyo;/p>
    <form class="form-inline" name="form1">
      <div class="form-group">
        <label class="control-label" style="font-weight:normal;" for="businesshours">Time:</label>
        <div class="input-group bootstrap-timepicker timepicker" style="width:110px">

          <input type="text" id="businesshours" class="form-control input-small timepicker1">
          <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
        </div>~ 
        <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
          <input type="text" class="form-control input-small timepicker1">
          <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
        </div>
        <div class="checkbox" style="position:relative;left:45px;display:block;margin-bottom:0px;margin-top:0px;">
          <label><input id="Checkbox1" value="type="checkbox">End Time</label>
        </div>
        <a class="btn btn-primary" href="#">Back</a>
      </div>
    </form>
  </div>
  <script type="text/javascript">
    $(function(){
     $('.timepicker1').timepicker({

      showMeridian: false,
      minuteStep: 1,
      defaultTime: "9:00"
    });

     $('#Checkbox1').click(function(){
      if($(this).prop('checked')==true){
        $('.timepicker1').timepicker({

          showMeridian: false,
          minuteStep: 1,
          defaultTime: "22:00"
        });
      } else {
        $('.timepicker1').timepicker({

          showMeridian: false,
          minuteStep: 1,
          defaultTime: "21:00"
        });
      }
    });
   });

 </script>
</body>

javascript jquery html5 bootstrap

2022-09-30 18:36

1 Answers

Use setTime to set the Timepicker time.
For more information, see here.

<!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> Ayeo Shop </title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
  <link type="text/css"rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js">/script>
  <style>.input-group.timepicker {display:inline-table;
   vertical-align:middle;}</style>

 </head>
 <body>
   <div class="container">
    <p> Ayeo Shop </p>
    <p>Address: Chiyoda Ward, Tokyo;/p>
    <form class="form-inline" name="form1">
      <div class="form-group">
        <label class="control-label" style="font-weight:normal;" for="businesshours">Time:</label>
        <div class="input-group bootstrap-timepicker timepicker" style="width:110px">

          <input type="text" id="businesshours" class="form-control input-small timepicker1">
          <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
        </div>~ 
        <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
          <input type="text" class="form-control input-small timepicker1">
          <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
        </div>
        <div class="checkbox" style="position:relative;left:45px;display:block;margin-bottom:0px;margin-top:0px;">
          <label><input id="Checkbox1" value="type="checkbox">End Time</label>
        </div>
        <a class="btn btn-primary" href="#">Back</a>
      </div>
    </form>
  </div>
  <script type="text/javascript">
    $(function(){
     $('.timepicker1').timepicker({

      showMeridian: false,
      minuteStep: 1,
      defaultTime: "9:00"
    });

     $('#Checkbox1').click(function(){
      if($(this).prop('checked')==true){
        $('.timepicker1').timepicker(
          'setTime', '22:00'
        );
      } else {
        $('.timepicker1').timepicker(
		 'setTime', '21:00'
        );
      }
    });
   });

 </script>
</body>

2022-09-30 18:36

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