Bootstrap Datetimepicker (tarruda fork)

0.0.7 verified Thu Apr 23 auth: no javascript abandoned

This package is a fork of the original `bootstrap-datepicker` by Stefan Petre, extended to provide both date and time picking functionality for Twitter Bootstrap. Originally designed for Bootstrap 2 and 3, it integrates as a jQuery plugin, allowing users to select dates and times through a unified UI. The `tarruda` fork, specifically the one requested, reached versions like `0.0.7` and `0.0.10` and explicitly states it is no longer maintained, with its GitHub repository marked as archived. It differentiated itself by adding crucial time selection (hours, minutes) to the date-only functionality of its parent project. Developers seeking similar functionality for modern Bootstrap versions should look for actively maintained alternatives like `eonasdan/bootstrap-datetimepicker` or the non-Bootstrap-specific `@eonasdan/tempus-dominus`. The original package's release cadence was infrequent and it is now abandoned.

Common errors

error TypeError: $(...).datetimepicker is not a function ↓

cause The jQuery plugin script (`bootstrap-datetimepicker.min.js`) was not loaded, or it was loaded before jQuery, or jQuery itself was not loaded.

fix

Ensure jQuery is loaded first, followed by Bootstrap's JavaScript, and then bootstrap-datetimepicker.min.js. Verify paths are correct and files are accessible.

error Date picker displays incorrectly or has missing styles. ↓

cause 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.

fix

Check 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).

error Input mask not working or date/time format is not applied. ↓

cause 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).

fix

Add 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.

Warnings

breaking This package is explicitly marked as abandoned and is no longer maintained. Using it in new projects is strongly discouraged due to lack of updates, potential security vulnerabilities, and incompatibility with modern web standards. ↓

fix Migrate to actively maintained alternatives like `eonasdan/bootstrap-datetimepicker` (for Bootstrap 3/4) or `@eonasdan/tempus-dominus` (for Bootstrap 5+ and framework agnostic).

breaking The `tarruda/bootstrap-datetimepicker` fork is compatible primarily with Bootstrap 2 and 3. It will not work correctly, and likely break styling and functionality, with Bootstrap 4, 5, or newer versions due to significant changes in Bootstrap's CSS and JavaScript APIs. ↓

fix Use a date/time picker specifically designed for your Bootstrap version. For Bootstrap 4/5, consider `@eonasdan/tempus-dominus` or other modern UI libraries.

gotcha This plugin relies on specific versions of jQuery. Using it with very old or very new versions of jQuery might lead to unexpected behavior or breakage, as jQuery's API has evolved over time. ↓

fix Refer to the original documentation or source code for compatible jQuery versions, typically jQuery 1.x or 2.x for this era of Bootstrap. Test thoroughly if using a different jQuery version.

gotcha The documentation for this specific fork is hosted on GitHub Pages and is no longer actively maintained. Finding accurate, complete, and up-to-date usage information can be challenging. ↓

fix Inspect the source code and examples within the `tarruda/bootstrap-datetimepicker` GitHub repository directly. Be prepared for trial-and-error due to incomplete documentation.

Install

npm install bootstrap-datetimepicker

yarn add bootstrap-datetimepicker

pnpm add bootstrap-datetimepicker

Imports

$().datetimepicker

wrong

import { datetimepicker } from 'bootstrap-datetimepicker';

correct

<!-- 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>

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

wrong

import 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.css';

correct

<!-- In <head> -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/bootstrap-datetimepicker.min.css" rel="stylesheet">

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.

Quickstart

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>