Registry /
web-framework / bootstrap-datetimepicker
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
$().datetimepicker
✓ <!-- Include jQuery, Bootstrap, and plugin JS files -->
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-datetimepicker.min.js"></script>
<script>
$(function() {
$('#myDatetimepicker').datetimepicker();
});
</script>
✗ import { datetimepicker } from 'bootstrap-datetimepicker';
This is a jQuery plugin designed for global script inclusion. It does not support ES modules (`import`) or CommonJS (`require`). The plugin extends jQuery's prototype, making `datetimepicker` available on jQuery objects.
datetimepicker CSS
✓ <!-- In <head> -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/bootstrap-datetimepicker.min.css" rel="stylesheet">
✗ import 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.css';
Stylesheets are loaded via `<link>` tags. This version predates modern CSS module bundling, and trying to import CSS directly in JavaScript will not work.
$.fn.datetimepicker.defaults
✓ <script>
$.fn.datetimepicker.defaults.maskInput = false;
$('#myDatetimepicker').datetimepicker();
</script>
Configuration options can be set globally on the `$.fn.datetimepicker.defaults` object before initialization, or passed as an options hash to individual instances. This is a common pattern for jQuery plugins.
This quickstart demonstrates how to include the necessary CSS and JavaScript files (jQuery, Bootstrap, and the datetimepicker plugin) and initialize the datetimepicker on an input field using jQuery. It also shows basic event handling to log the selected date.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Datetimepicker Demo</title>
<!-- Bootstrap 2 or 3 CSS - adjust path as needed -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Datetimepicker CSS - adjust path as needed -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Bootstrap Datetimepicker (tarruda fork)</h1>
<div class="form-group">
<label for="datetimepickerInput">Select Date and Time:</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" id="datetimepickerInput" data-format="dd/MM/yyyy hh:mm:ss PP"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- jQuery - adjust path as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Moment.js is often required by later forks/versions for advanced parsing/formatting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- Bootstrap JS - adjust path as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap Datetimepicker JS - adjust path as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
// Global defaults can be set here if desired
// $.fn.datetimepicker.defaults.language = 'en';
// Initialize the datetimepicker
$('#datetimepicker1').datetimepicker({
// Example options (refer to original documentation for full list)
pickDate: true, // Enable date picker
pickTime: true, // Enable time picker
maskInput: true, // Use masked input (default for this fork)
pickSeconds: true, // Enable seconds selection
showTodayButton: true,
language: 'en' // Ensure language is set if locales are included
});
// Example of getting selected date
$('#datetimepicker1').on('dp.change', function (e) {
console.log('Selected date:', e.date.format('YYYY-MM-DD HH:mm:ss'));
});
});
</script>
</body>
</html>
Errors
Common errors & fixes
TypeError: $(...).datetimepicker is not a function
The jQuery plugin script (`bootstrap-datetimepicker.min.js`) was not loaded, or it was loaded before jQuery, or jQuery itself was not loaded.
fixEnsure jQuery is loaded first, followed by Bootstrap's JavaScript, and then `bootstrap-datetimepicker.min.js`. Verify paths are correct and files are accessible.
Date picker displays incorrectly or has missing styles.
The Bootstrap CSS or the `bootstrap-datetimepicker` CSS file is not loaded, or there's a version mismatch between Bootstrap CSS and the plugin's CSS.
fixCheck that `bootstrap.min.css` and `bootstrap-datetimepicker.min.css` are correctly linked in the `<head>` section of your HTML and that their paths are valid. Ensure the Bootstrap version matches what the datetimepicker was designed for (typically Bootstrap 2 or 3).
Input mask not working or date/time format is not applied.
The `data-format` attribute is missing or incorrect on the input field, or `maskInput` option is explicitly set to `false` (though `true` is default for this fork).
fixAdd or correct the `data-format="dd/MM/yyyy hh:mm:ss"` attribute on your input element, or pass a `format` option during initialization. If using `moment.js` (common in related forks), ensure its locale settings are correctly applied if using non-English formats.
Audit
Dependencies
jqueryrequiredThis is a jQuery plugin and relies on jQuery for DOM manipulation and event handling.
bootstraprequiredIt's a Bootstrap plugin, requiring Bootstrap's CSS and JavaScript (specifically transition and collapse components) for styling and modal/dropdown functionality, primarily Bootstrap v2 or v3.