Here we go, this is a full html page that includes all css and javascript that is required for the datepicker to work.
By default, bootstrap doesn’t know how to create a datepicker UI, you need to add some cdn javascripts in the header.
Best thing to do is to select all and copy it into a html page and from there, edit your html form.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script> </head> <body> <div class="container"> <div class="row"> </div> <br /> <div class="row"> <div class='col-sm-3'> <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> <script> $(function () { var bindDatePicker = function() { $(".date").datetimepicker({ format:'DD-MM-YYYY HH-mm', icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-arrow-up", down: "fa fa-arrow-down" } }).find('input:first').on("blur",function () { // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd. // update the format if it's yyyy-mm-dd var date = parseDate($(this).val()); if (! isValidDate(date)) { //create date based on momentjs (we have that) date = moment().format('DD-MM-YYYY HH-mm'); } $(this).val(date); }); } var isValidDate = function(value, format) { format = format || false; // lets parse the date to the best of our knowledge if (format) { value = parseDate(value); } var timestamp = Date.parse(value); return isNaN(timestamp) == false; } var parseDate = function(value) { var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/); if (m) value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2); var h = d.getHours(); h = (h < 10) ? ("0" + h) : h ; var m = d.getMinutes(); m = (m < 10) ? ("0" + m) : m ; return value; } bindDatePicker(); }); </script> </body> </html> |