{"id":17510,"library":"bootstrap-datetimepicker","title":"Bootstrap Datetimepicker (tarruda fork)","description":"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.","status":"abandoned","version":"0.0.7","language":"javascript","source_language":"en","source_url":"git://github.com/tarruda/bootstrap-datetimepicker","tags":["javascript","twitter-bootstrap","bootstrap","datepicker","datetimepicker","timepicker"],"install":[{"cmd":"npm install bootstrap-datetimepicker","lang":"bash","label":"npm"},{"cmd":"yarn add bootstrap-datetimepicker","lang":"bash","label":"yarn"},{"cmd":"pnpm add bootstrap-datetimepicker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a jQuery plugin and relies on jQuery for DOM manipulation and event handling.","package":"jquery","optional":false},{"reason":"It'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.","package":"bootstrap","optional":false}],"imports":[{"note":"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.","wrong":"import { datetimepicker } from 'bootstrap-datetimepicker';","symbol":"$().datetimepicker","correct":"<!-- Include jQuery, Bootstrap, and plugin JS files -->\n<script src=\"path/to/jquery.min.js\"></script>\n<script src=\"path/to/bootstrap.min.js\"></script>\n<script src=\"path/to/bootstrap-datetimepicker.min.js\"></script>\n<script>\n  $(function() {\n    $('#myDatetimepicker').datetimepicker();\n  });\n</script>"},{"note":"Stylesheets are loaded via `<link>` tags. This version predates modern CSS module bundling, and trying to import CSS directly in JavaScript will not work.","wrong":"import 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.css';","symbol":"datetimepicker CSS","correct":"<!-- In <head> -->\n<link href=\"path/to/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"path/to/bootstrap-datetimepicker.min.css\" rel=\"stylesheet\">"},{"note":"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.","symbol":"$.fn.datetimepicker.defaults","correct":"<script>\n  $.fn.datetimepicker.defaults.maskInput = false;\n  $('#myDatetimepicker').datetimepicker();\n</script>"}],"quickstart":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Bootstrap Datetimepicker Demo</title>\n  <!-- Bootstrap 2 or 3 CSS - adjust path as needed -->\n  <link href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n  <!-- Bootstrap Datetimepicker CSS - adjust path as needed -->\n  <link href=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css\" rel=\"stylesheet\">\n</head>\n<body>\n  <div class=\"container\">\n    <h1>Bootstrap Datetimepicker (tarruda fork)</h1>\n    <div class=\"form-group\">\n      <label for=\"datetimepickerInput\">Select Date and Time:</label>\n      <div class=\"input-group date\" id=\"datetimepicker1\">\n        <input type=\"text\" class=\"form-control\" id=\"datetimepickerInput\" data-format=\"dd/MM/yyyy hh:mm:ss PP\"/>\n        <span class=\"input-group-addon\">\n          <span class=\"glyphicon glyphicon-calendar\"></span>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- jQuery - adjust path as needed -->\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\"></script>\n  <!-- Moment.js is often required by later forks/versions for advanced parsing/formatting -->\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js\"></script>\n  <!-- Bootstrap JS - adjust path as needed -->\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n  <!-- Bootstrap Datetimepicker JS - adjust path as needed -->\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js\"></script>\n\n  <script type=\"text/javascript\">\n    $(function () {\n      // Global defaults can be set here if desired\n      // $.fn.datetimepicker.defaults.language = 'en';\n\n      // Initialize the datetimepicker\n      $('#datetimepicker1').datetimepicker({\n        // Example options (refer to original documentation for full list)\n        pickDate: true,     // Enable date picker\n        pickTime: true,     // Enable time picker\n        maskInput: true,    // Use masked input (default for this fork)\n        pickSeconds: true,  // Enable seconds selection\n        showTodayButton: true,\n        language: 'en' // Ensure language is set if locales are included\n      });\n\n      // Example of getting selected date\n      $('#datetimepicker1').on('dp.change', function (e) {\n        console.log('Selected date:', e.date.format('YYYY-MM-DD HH:mm:ss'));\n      });\n    });\n  </script>\n</body>\n</html>","lang":"javascript","description":"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."},"warnings":[{"fix":"Migrate to actively maintained alternatives like `eonasdan/bootstrap-datetimepicker` (for Bootstrap 3/4) or `@eonasdan/tempus-dominus` (for Bootstrap 5+ and framework agnostic).","message":"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.","severity":"breaking","affected_versions":">=0.0.7"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.0.7"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.0.7"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.0.7"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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.","cause":"The jQuery plugin script (`bootstrap-datetimepicker.min.js`) was not loaded, or it was loaded before jQuery, or jQuery itself was not loaded.","error":"TypeError: $(...).datetimepicker is not a function"},{"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).","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.","error":"Date picker displays incorrectly or has missing styles."},{"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.","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).","error":"Input mask not working or date/time format is not applied."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}