js中显示错误时间的clockpicker

时间:2017-05-02 05:25:21

标签: javascript jquery

默认值与type="text" class="form-control" value="10:30AM"类似,但时间仅显示10:00。

这是代码:

this.form = $('<form><div class="row-form status-row-oth border-bottom-none"><div class="col-sm-2 day-month">'+ this.date+'</div><div class="col-sm-2 selectpicker-oth activity-list"><select id="activity_dd_'+this.row_id+'"></select></div><div class="col-sm-3"><input type="text" class="form-control" id="memo_'+this.row_id+'" name="memo" placeholder="Enter memo..."></div><div class="col-sm-3 start-time-oth"><div class="start-time"><label>Start Time</label><div class="input-group clockpicker"><input name="start_time"  id="start_time_'+this.row_id+'" type="text" class="form-control" value="10:30AM"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div><div class="start-time"><label>End Time</label><div class="input-group clockpicker"><input name="end_time" id="end_time_'+this.row_id+'" type="text" class="form-control" value="06:30PM"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-sm-2 save-memo-btn save-btn" id="'+this.save_btn_id+'"> <a href="#">Save Memo</a></div></div></form>');

有人知道解决方案,请告诉我。感谢

1 个答案:

答案 0 :(得分:-1)

&#13;
&#13;
<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" />
</head>

<body>
<!-- Or just a input -->
<input type="text" id="demo-input" class="form-control" value="10:30" />
<!-- jQuery and Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js"></script>
<script type="text/javascript">

$('#demo-input').clockpicker({
  'default': DisplayTimeWithAMPM(),
   donetext: 'Done',
   twelvehour: true,
   autoclose: false,
   leadingZeroHours: false,
   upperCaseAmPm: true,
   leadingSpaceAmPm: true,
   afterHourSelect: function() {
      $('.clockpicker').clockpicker('realtimeDone');
   },
   afterMinuteSelect: function() {
      $('.clockpicker').clockpicker('realtimeDone');
   },
   afterAmPmSelect: function() {
      $('.clockpicker').clockpicker('realtimeDone');
   }
});

function DisplayTimeWithAMPM() {
  debugger;
  time = $('#demo-input').val() + "AM";
  debugger;
  return time;
};
</script> 
</body>
</html>
&#13;
&#13;
&#13;

设置

  

十二小时:真的

这样您就可以在时间选择器中获得AM和PM框。 希望这对你有用!谢谢