Is there a way to deactivate the Bootstrap DatePicker?

I have been attempting to disable the Bootstrap Date picker by using the attribute disable="true". The text-box is now disabled, but the date picker still opens when clicking on the text-box. How can I resolve this issue?

HTML

<div class="input-group" id="DateDemo">
    <input type="text" id="txtPatientDOB" name="dd" data-format="MM/DD/YYYY" placeholder="DOB" class="form-control" disabled="disabled" /> <span class="input-group-btn">
    <button class="btn btn-green" type="button"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</div>

JS

 $("#txtPatientDOB").attr("disabled", true);
jqueryhtmlcsstwitter-bootstrap

Answer №1

Here is a suggestion:

Set the date-disabled attribute to "'true'" (making all dates unclickable) and the show-button-bar attribute to "'false'" (hiding the buttons).

<label>Date</label>
<p class="input-group">
    <input type="text" class="form-control" ng-model="dt"
       datepicker-popup="MM-dd-yyyy" is-open="opened" close-text="Close"
       show-weeks="true" show-button-bar="'false'" date-disabled="'true'" disabled />
    <span class="input-group-btn">
        <button class="btn btn-disabled" ng-click="open()">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</p>

Alternatively, you can set the Disabled property to true like this:

$("#Date").prop('disabled', true);

Answer №2

If you want to deactivate the datepicker, you can use the code below:

JavaScript

$(document).off('.datepicker.data-api');

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

Ways to dynamically toggle visibility and hide elements by clicking outside the specified div

I have a div that, when clicked, displays a contact us form. This form toggles between being visible and hidden. How can I make it hide when clicked on another part of the document? Here is the code: function showContactForm(){ var formWidth = &apos ...

javascriptjqueryhtml

Capture selected items from checkboxes and incorporate them into the CSS styling

I would like to give users the ability to choose from a series of checkboxes with additional options to add to their CSS. Using JavaScript, I am searching for checked boxes, extracting their names, adding them to a list, and then inserting that list into ...

javascriptjqueryhtmlcss

Leveraging SQL queries with ajax

Would it be considered risky to use a SQL query directly in an ajax call? For example: $.ajax({ type: "POST", url: "queryhandler.php", data: { query: "INSERT INTO users VALUES(incontrol, drowssap)" }, dataType: "json", success: fu ...

phpjqueryajax

When new AJAX content is loaded, Isotope container fails to properly target the new objects and instead overlaps the existing ones

My webpage loads all content through an AJAX call. Initially, I tried placing my isotope initialization code inside a document ready function, but it didn't work as expected: $(function(){ container = $('#content'); contain ...

javascriptjqueryajaxjquery-isotope

Setting a border on a specific column in ag-grid is a simple task that can help you customize

I have a table where the first set of columns differs from the rest. I am looking to emphasize this distinction by adding a vertical border on the right side of the specific column to highlight it both in the header and rows. Our setup includes using the ...

cssangularsassag-gridag-grid-angular

Activate an update of a jQuery color selector plugin when there is a change in the input field

Currently, I am utilizing the jQuery .click() method to update 15 text fields with basic color hex values like this: document.form1.top_menu_bgcolor.value = '#FFFFFF'; In addition, I have incorporated ExColor for jQuery from which showcases an ...

jquerytriggerscolor-picker

What is the method for integrating an element into a different flow using the position property?

How can I solve the following issue: I am working with a carousel markup that has the same HTML structure as shown below. <div> // Contains the carousel slide <div> <ul> <li><img src={....} /></li> <li ...

csssassscss-mixinssplidejsscss-functions

What is the best way to add pairs of divs to a single div?

Can you help me with this task? <div id="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div& ...

javascriptjquery

Generating and Retrieving Dynamic URL with Jquery

My web page named single-colur.html has the ability to handle various query strings, such as: single-colour.html?id=1 single-colour.html?id=2 single-colour.html?id=3 single-colour.html?id=4 The parameter id in the URL corresponds to an entry in a table c ...

javascriptphpjquerydynamic-url

How to align certain nav-pills items to the right using Bootstrap 4

Currently, I am utilizing Bootstrap 4-beta2's nav-pills to create a tabbed interface. Is there a way to align certain elements to the right side of the screen? Even after trying to apply ml-auto to the last li item, I have not been successful. Break ...

twitter-bootstrapbootstrap-4navtwitter-bootstrap-4nav-pills

Element.style prevents customization of Rev Slider dimensions

I'm currently attempting to adjust the height of my rev slider from 100% to 80%, but I can't seem to locate the necessary code. Upon inspecting in Chrome, I noticed the following: element.style { max-height: 1080px; margin-to ...

javascripthtmlcssrevolution-slider

Upon shutting down the Alert Window, the submit button remains unresponsive

I am facing an issue where, upon detecting an identical value during submission and triggering an error, the button becomes unclickable and feels like it is stuck on saving. Can anyone provide assistance with this situation? Here is the jQuery code I am u ...

javascriptjquerybuttonclicksave

Tips for retaining the name of a chosen option rather than its value

Here is the code snippet I'm currently using: $("#subscription").on('change', function(){ $('#plan').val($(this).val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> ...

javascriptphpjqueryhtml

Concealing Text using Jquery Placeholder

I'm attempting to use jQuery to hide a text field based solely on its placeholder value, without relying on ids or classes. My goal is to achieve something like this: $(look for placeholder with the name credit card number).hide(); Here's the H ...

javascriptjquerytextplaceholder

Show a list of options when a user clicks on an input field using Ajax AutoComplete with jQuery

I have a form field that looks like this: <div> <input type = "text" class = "form-control" id = "driverplus" placeholder = "Fahrer"> </div> I am using jquery-autocomplete plugin from . Is there ...

jqueryajaxautocomplete

Dealing with problems when uploading images using Django and Jquery ajax

I am encountering some difficulties when attempting to upload an image using Jquery Ajax on my Django 1.7 server. The behavior I experience on my development machine differs from that on my staging machine, making it challenging to pinpoint the exact issu ...

jqueryajaxdjangouploadimage-uploading

I'm experiencing an issue with my website not being able to read the CSS and JavaScript files. Instead, it's displaying the error message

I am new to PHP and I am using Wordpress to build websites. Currently, I am trying to develop my own themes for Wordpress. However, I am facing an issue with loading the CSS and JavaScript files. Can someone assist me in resolving this problem? header.php ...

phphtmlwordpress

Has long-polling been implemented recently?

Is there a risk of encountering a call stack overflow if the function is currently running? This is because it calls itself infinitely in a recursive manner. If this problem does arise, are there any alternative implementations that could be more efficie ...

jqueryajaxlong-polling

In the realm where jQuery meets Django, a mysterious pair of brackets mysteriously appear in my JSON data, causing form validation to

In my Django model, there is a ManyToMany field named images, and I have created a simple ModelForm for this model. I am attempting to send data using jQuery along with a basic UpdateView. The field in the model images = models.ManyToManyField( RawI ...

jqueryajaxdjangopost

React is unable to identify the prop `controlID` when used on a DOM element in React-Bootstrap Forms

While constructing a form with React components sourced from react-bootstrap, and taking guidance directly from an example provided in its documentation: <Form.Group controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> ...

javascriptreactjsformstwitter-bootstrapreact-bootstrap