Level 21
This is the best easy to impliment date time picker i found so far.
https://github.com/Eonasdan/bootstrap-datetimepicker
Mar 19, 2015
7
Level 1
date and time picker
is there any jquery/bootstrap date and time picker and how i can use it? currently i am using date calendar only
<div class='input-group' >
{!! Form::text('fromDate', $plan->fromDate, ["placeholder" => "2014-09-09 12:00:00", 'id' => 'calendar1']) !!}
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#calendar1" ).datepicker();
$( "#calendar2" ).datepicker();
});
</script>
Level 1
Thanks for your answer, I have tried the way. It shows the icon next to text fields but not clickable, shows nothing
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css"></script>
<div class="col-md-2">
<div class='input-group' id='calendar1'>
{!! Form::text('fromDate', $plan->fromDate, ["placeholder" => "2014-09-09 12:00:00"]) !!}
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#calendar1').datetimepicker();
$('#calendar2').datetimepicker();
});
</script>
Level 21
@technogens Follow this steps:
- Download all the files from links below (just right click and save)
http://code.jquery.com/jquery.min.js
https://raw.githubusercontent.com/moment/moment/develop/min/moment-with-locales.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js
And css links:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css
- Now include them in your html file in same order. (I would prefer css in head section and js at the bottom of the page i.,e just before closing body tag)
Level 9
There is an example jsfiddle link at github page - http://jsfiddle.net/Eonasdan/0Ltv25o8/
Level 55
@technogenes I love this datepicker - http://getfuelux.com/javascript.html#datepicker or from the same guys, the scheduler - http://getfuelux.com/javascript.html#scheduler
2 likes
Level 1
@mstnorris Your second link, schedular, made me think about a plugin I would really benefit from. I was thinking about a scheduling tool, like you would schedule a date in microsoft outlook, but web based. Do you or anyone else know such a plugin?
Level 8
@vogtdominik Look for FullCalendar!
2 likes
Please or to participate in this conversation.