Login / Join
Bootstrap Date Time Picker
submitted on 05/08/2014 by
Codicode
+ infos
Config
Embed
Share
Bootstrap Date Time Picker
by
Codicode
A simple datetime picker implementation for bootstrap.
When the selected date/time change the label is updated.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js
+ Css file(s) :
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="2e5" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
Selected date : <i><span id="selDate">none</span></i> <br><br> Select a date : <div class='input-group date' id='dateTime'> <input type='text' placeholder="Select .." /> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar" ></i> </span> </div>
CSS
body { padding: 50px; } .date input { height:30px; }
Javascript
$(function() { dp = $('#dateTime').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' }); $('#dateTime').on("changeDate",function (e) { $("#selDate").html(e.date); }); });
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact