Utilize Bootstrap to deactivate the time picker feature

I recently downloaded an admin template that includes a datetimepicker. However, I only need the date picker and am struggling to disable the time picker. Can anyone help me fix this issue? I will provide my class file, HTML code, and a snapshot of the time picker UI for reference.

<!-- Bootstrap Material Datetime Picker Css -->
<link href="{{asset('assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css')}}" rel="stylesheet" />

The template uses a footer section

<script src="{{asset('assets/plugins/momentjs/moment.js')}}"></script> <!-- Moment Plugin Js -->
<!-- Bootstrap Material Datetime Picker Plugin Js -->
<script src="{{asset('assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js}}"></script>

This is my HTML code snippet:

  <div class="col-sm-6">
        <div class="input-group">
             <span class="input-group-addon">
                 <i class="zmdi zmdi-calendar"></i>
             </span>
   <input type="text" class="form-control datetimepicker" placeholder="Please choose date & time...">
       </div>
   </div>

Here is the link to the attached image of the time picker UI

Answer №1

To achieve this, simply ensure that the time parameter is set to false as shown below:

$('.datetimepicker').bootstrapMaterialDatePicker({ time: false });

Check out the demo here

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

Arranging rows within the Zurb Foundation grid structure

As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...

Unoccupied whitespace created by using Bootstrap

I'm experiencing a challenge with the code below in terms of large spaces being left when columns are collapsed. Is there a way to eliminate these spaces? body { font-family: sans-serif; max-width: 100%; overflow-x: hidden; } .poster { heig ...

Count Scroller - Finding a Solution for _.debounce

Issue with Counter I have a counter that should increase or decrease by one each time the user scrolls up or down. The problem I'm facing is that my counter $('html').on('mousewheel', function (e) { var delta = e.originalEve ...

Having trouble fetching JSON data from an Express server?

I successfully set up my first basic server using express, however I am encountering an issue when trying to fetch JSON data from a file called data.json: Here is the code for the server: const express = require('express') const app = express() ...

Creating an HTML form that spans across multiple pages: Tips and tricks

When creating a shopping form that includes items like mugs and tshirts, is it permissible according to website standards to design a form that spans multiple pages? One option could be to add radio buttons for choosing a color directly on the main form ...

Can you show me how to use jQuery/JS to split this string into two separate arrays?

Can you help me separate this string into two arrays? { array1: [ 'mary', 'steve', 'george' ], array2: [ 'dog', 'cat', 'hobbit' ] } I attempted the following code but encountered a syntax err ...

JavaScript alert: element does not exist

Check out my code snippet below. The inline JavaScript alert works fine, but the external one isn't firing. Every time I reload the page, I'm greeted with a console error message saying "TypeError: tileBlock is null". Any suggestions on how to re ...

Ember application experiencing trouble displaying Facebook Like Box

I’m currently facing an issue with integrating the like box into our ember app, specifically in a template named about. The problem arises when users enter the ember app from a different route, instead of directly accessing the about route. In such cases ...

In Express JS, the REST API encounters an issue where req.body is not defined

I am currently working on building a REST API with Express JS. When I use console.log(req.body), it is returning undefined as the output. Below is the code snippet from my routes.js file: const express = require('express'); const router = expres ...

scrollable material ui chips list with navigation arrows

I'm attempting to create a unique scrollable chips array using Material UI version 4 (not version 5). Previous examples demonstrate similar functionality: View Demo Code I would like to update the scrolling bar of this component to include l ...

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

Instructions on transferring an image to a server. The image is located on the client side within an <img> tag

Looking for an effective way to upload an image when the type is “file”? The goal here is to send an image from an image tag to the server without converting it into base64 due to size constraints. <form id="form-url"> <image src ...

Using an AJAX/HTML/JavaScript approach to enable/disable a button for generating reports and then re-enabling it

A Spring-MVC controller is used to generate a PDF report when a get request is made. The controller includes headers such as "application/OCTET-STREAM", "Content-Disposition", and "attachment; filename=\"" + filename + "\"" in order to prompt the ...

What is the best way to incorporate media queries in order to reduce the padding around my image?

Currently, I am working on a small gallery and have successfully implemented Salvattore (similar to Masonry). However, a challenge has arisen when resizing the web page - the padding remains at 10px instead of reducing to 5px as desired. The goal is to e ...

How to create an array of objects using an object

I have a specific object structure: { name: 'ABC', age: 12, timing: '2021-12-30T11:12:34.033Z' } My goal is to create an array of objects for each key in the above object, formatted like this: [ { fieldName: 'nam ...

What are some ways to sort through JSON data efficiently?

I am in need of filtering JSON data based on specific parameters. When using the GET method at http://localhost:5000/api/car?bodyTypeId=2, I expect to receive only JSON objects with bodyTypeId equal to 2. However, all objects are being returned: [ { ...

Transmitting information through ajax and fetching it using Request.Form[""]

My struggle lies in passing parameters from a js script to an aspx.cs page. Interestingly, when I exclude the following line: contentType: "application/json; charset=utf-8" from my ajax request, the data received by Request.Form["ORDER"] appears as {%7b% ...

Steps for Deactivating HTML Links

I am facing an issue with a link button inside a <td> that needs to be disabled. It is working fine on Internet Explorer but not functioning properly in Firefox and Chrome. I have tried various methods, but nothing seems to work on Firefox (using ve ...

A guide on incorporating a component from a nested directory with webpack

https://i.sstatic.net/kLB0S.png The directory structure above shows how my react app 'MyProject' is organized. Using this structure, I successfully utilize the Layout component in Main.jsx (located at src/Main.jsx) by : import Layout from &apo ...

Using Jquery.each() to traverse a Literal Array is not possible

Alright, I have this literal array declared, which can be seen in the screenshot below from Firebug. I attempted to traverse it using jquery.each(); Here is my code: $.each(window.feeditems,function(key,val){ alert('pass OK'); console.lo ...