I've read some opened issue about this, but it didn't help me. I have also read the moment.js
documentation but I don't know why it still not working. I just want to add the seconds
to show when picking a datetime. Please see my code below:
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A"
});
});
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
<link rel="stylesheet" href=".1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src=".2.0/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<script src=".js/2.20.1/moment-with-locales.min.js"></script>
<script src=".1.4/js/bootstrap-datetimepicker.min.js"></script>
I've read some opened issue about this, but it didn't help me. I have also read the moment.js
documentation but I don't know why it still not working. I just want to add the seconds
to show when picking a datetime. Please see my code below:
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
Share
Improve this question
edited Feb 6, 2018 at 2:36
Blues Clues
asked Feb 6, 2018 at 2:11
Blues CluesBlues Clues
1,8784 gold badges39 silver badges84 bronze badges
3 Answers
Reset to default 4Try passing useSeconds: true
as shown below. That should help.
The datetimepicker FAQ says that it uses the format option to decide what ponents to show. But then I found useMinutes
and useSeconds
options here: http://eonasdan.github.io/bootstrap-datetimepicker/Changelog/#2120.
(I know its not a very good place to document a feature, but .... let it be ;) )
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A",
useSeconds: true
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
Please try this snippet, Setting the format to the correct value from moment and sideBySide:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A',
sideBySide: true,
tooltips: {
pickSecond: 'Pick Second'
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet"
href="https://rawgit./Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit./Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
For more info please visit this - How to add seconds to Bootstrap date time picker Bootstrap3 DateTime picker - https://eonasdan.github.io/bootstrap-datetimepicker/Options/#viewdate
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn./bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn./font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit./Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit./Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({format: "DD/MM/YYYY hh:mm:ss A"});
});
</script>
</div>
</div>
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744740094a4590975.html
评论列表(0条)