Is there a way to configure the bootstrap datetimepicker to only allow selection of time

I am having trouble using bootstrap datetimepicker with the initialization code like this:

  $('#departure-time').datetimepicker({
    todayHighlight: true,
    autoclose: true,
    format: 'yyyy-mm-dd hh:ii'
  }).on('change', function () {
  });

I cannot figure out how to select only the time. I tried setting the format to :

format: 'hh:ii'

But it didn't work.

Which approach should I take?

The dependencies in my project include:

"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "^0.0.7",

UPDATED: The project is utilizing "jquery": "^3.3.1", and switching to "jquery 2" is not feasible due to compatibility issues. Could this be causing the error message:

“Uncaught Error: Invalid date format.    at Object.parseFormat” 

which appears in the console when I initialize the Datetimepicker as follows:

$('#time_utc').datetimepicker({
  todayHighlight: true,
  autoclose: true,
  format: 'LT',
}).on('change', function () {
});

Is there a way to resolve this error?

UPDATED # 2: I attempted to upgrade bootstrap-datetimepicker to version 4.17.47, which seems to be the latest version according to https://github.com/Eonasdan/bootstrap-datetimepicker

However, I encountered issues during the upgrade process. In the package.json file of my project, I have the following line:

  "bootstrap-datetimepicker": "^0.0.7",

I tried changing it to:

  "bootstrap-datetimepicker": "^4.17.47",

But when running npm install, I received an error message:

      npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@^4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

I then modified it to

"bootstrap-datetimepicker": "4.17.47",

Yet again, running npm install resulted in a similar error:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796cb82879283928f8b83968f858d8394a6d2c8d7d1c8d2d1">[email protected]</a>.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

I decided to remove bootstrap-datetimepicker from the package.json

and ran:

npm install  bootstrap-datetimepicker

After installation, I noticed that the package.json still shows:

"bootstrap-datetimepicker": "0.0.7",

This essentially brought me back to square one.

Furthermore, please review the contents of the package.json file:

{
    "private": true,
    ...
}

This file contains a multitude of packages. I am new to this project and seeking assistance to identify the potential cause of the errors mentioned above.

Thank you!

Answer №1

Include format: 'LT', make sure to consult the official documentation:

$('#departure-time').datetimepicker({
  // todayHighlight: true,
  // autoclose: true,
  format: 'LT'
}).on('change', function() {
});

Update

Functional demonstration (using jQuery 2.x, Bootstrap 3):

$(function() {
  $('#departure-time').datetimepicker({
    // todayHighlight: true,
    // autoclose: true,
    format: 'LT'
  }).on('change', function() {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='departure-time'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

I opted for jQuery version 2.x due to this issue.

Update 2

Here is another functional example utilizing

jQuery 3.3.1

Bootstrap 4.4.1

Bootstrap-datetimepicker 4.17.47

The Glyphicons have been eliminated in Bootstrap 4, so I imported them from Bootstrap 3.

The bootstrap-datetimepicker version being utilized is quite outdated, it's recommended to upgrade to a newer release.

Execute npm update or

npm update bootstrap-datetimepicker
or
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f92929d9a9d9b98b99aa39c9d98899594a38a999880898422db979ba79895aaed"><i class="__cf_email__" onclick="$(this).replaceWith(decodeURIComponent($(this).attr('data-cfemail')))">*</i>[email protected]</a>
for a specific version, alternatively, you can modify it within the package.json file. If the version doesn't change, try deleting the file package-lock.json (keep a backup) and adjust the version in your package.json, then run npm install.

$(function() {
  $('#departure-time').datetimepicker({
    format: 'LT'
  }).on('change', function() {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='departure-time'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to accessing Realm(JavaScript) object in an asynchronous manner and integrating it with various services

I have incorporated the following code into my project to open Realm asynchronously and integrate it with services. RmProfile.js: import Realm from 'realm'; const PrflSchema = { name: 'Profile', primaryKey: 'id', prope ...

Ways to stop the parent container from causing the child element set as fixed to scroll

When I have a parent and children with the property 'overflow:auto', scrolling the children causes the parent to start scrolling after it reaches the end. How can this be prevented? I do not want the parent container to scroll even after the chi ...

Iterating over each element within an array using the map method

I am facing an issue while trying to map values to a new array. The challenge lies in the fact that the property I am mapping can either be a number or an array. When it comes to arrays, I encounter a problem as my result ends up being an associative arra ...

Exploring how to access a shared component element in the Angular DOM

Component in Question: pro-image The pro-image component includes an image element with the id proImg <img id="proImg" src="{{imgPath}}"> The imgPath variable is passed as an @input. This particular component is utilized in var ...

When using form.serialize() in Django forms, an empty object is being sent

Upon clicking the button, my AJAX request is sending an empty object Object { } instead of form data. The form on my page consists of checkboxes and its HTML structure is as follows: <form method="post" action="" data-id="filter-form"> //Included ...

Ensure the first column is aligned to the right and the second column is aligned to the left within a

After reviewing the official Bootstrap grid layout page, I noticed numerous examples of alignment. I am eager to find a class that will help achieve a layout similar to the one shown in https://i.stack.imgur.com/OPYrZ.png. I want all content in the first ...

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

Issue with nested views in Angular UI-Router not displaying properly

The issue I'm facing is that the template <h1>HELLO</h1> is not loading into the nested ui-view in analysis.client.view.html. However, the ui-view in the analysis.client.view.html file is being loaded successfully. I've tried naming t ...

Activate a dropdown menu following the selection of a date on a calendar input using vue.js

What I need to do is have two select fields, one for 'days' and the other for 'hours'. When a day is selected, the user should then be able to choose between two available time slots. If they choose day two, the available time slots sh ...

Is there a way to apply a scaling transformation to an element in react native that is relative to the window size by a percentage?

One method that can be used to achieve a similar result is by following this formula: const { width } = useWindowDimension(); const percentage = width * 0.8; // 80% of the window <ComponentOrElement style={ width: percentage } /> However, this calc ...

The content in my textarea disappears once the submit button is clicked

I have a script that deletes the text from my textarea after a user clicks the submit button. However, I would like the text to remain in the textarea after submission. <form action="/search" name="myform" id="formid" method="post"> <div cla ...

Add a dynamic navigation class based on the current URL for corresponding URLs

Looking for a way to dynamically add an active class to navigation links? I came across this helpful article: Add Active Navigation Class Based on URL $(function(){ var current = location.pathname; $('#nav li a').each(function(){ ...

Invoking a function from a higher-level parent scope within multiple layers of nested directives

I am working with a data structure that is nested infinitely. There is a top-level object containing a collection of objects, and each of these objects can also have their own collection of objects. To iterate through this tree, I have implemented the fol ...

Having trouble determining the offsetHeight of an element within AngularJS

My directive, named 'myObject', is supposed to log the offsetHeight of its target element. However, it's not working as expected. I suspect it's because the height is being calculated before the element has any content. Is there a solu ...

JSON script containing the variable "url"

After spending days messing around, I've been learning javascript and jquery for a few weeks now. It's been going well, but there are some hurdles... For a mobile app I'm working on, I'm trying to retrieve the coordinates. Displaying t ...

What could be causing my AJAX form to refresh the page upon submission?

I have been working on a basic Follow/Unfollow system, and although the functionality is working correctly in terms of inserting and deleting rows when following/unfollowing, I'm facing an issue where the page refreshes every time despite using e.prev ...

Can a form be submitted to two different pages based on the button name?

I have a form that directs to another page and performs various database operations. <form id="form1" method="post" action="goes_to_page1.php" onsubmit="return checkformvalidation();"> <input type="text" id="field1" name="field1" onblur="checkva ...

Can ReactJS and jQuery be used together or are they mutually exclusive?

As a beginner in the world of ReactJS, I am intrigued by how this library essentially handles all DOM node rendering without any need for interference from other libraries like jQuery. However, this does pose a challenge as many convenient jQuery plugins ...

Video streaming platform without the need for javascript and plugins

Is it feasible to watch Youtube videos without relying on javascript and plugins, exclusively using HTML5 or a similar alternative? ...