Problem with Bootstrap Datepicker click functionality

I am currently utilizing the bootstrap datepicker along with bootstrap-rtl.

The problem I encountered was that I had two fields, one for the date and one for the name. The datepicker would not appear until I clicked on the date input first, then on the name input. After that, when I clicked back on the date input, the datepicker would finally show up. This issue only occurred on the initial page load, and it worked fine after that until the page was reloaded.

<div class="col-md-6">
  <div class="form-group">
    <label for="name" class="control-label">name</label>
    <input type="text" maxlength="40" name="name" class="form-control" />
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <span class="text-danger Bold">*</span>
    <label for="civilIDExpiredDate" class="control-label">ExpiredDate</label>
    <div class="input-group date">
      <div class="input-group-addon">
        <i class="fa fa-calendar"></i>
      </div>
      <input type="text" name="ExpiredDate" class="form-control datepicker">
    </div>
  </div>
</div>

<script type="text/javascript">
 //datepicker
     $('.datepicker').datepicker({
      autoclose: true,
      format: 'dd/mm/yyyy',
      todayHighlight: true,
      startDate: "dateToday"
    });
 </script>

Answer №1

Here's a solution that should do the trick:

<script type="text/javascript">
    $(document).ready({
     //datepicker
         $('.datepicker').datepicker({
          autoclose: true,
          format: 'dd/mm/yyyy',
          todayHighlight: true,
          startDate: "dateToday"
        });
    });
</script>

Remember to initialize your datetimepicker after the DOM has fully loaded, not before.

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

What is the best way to ensure that images on a webpage adjust to a maximum width without distorting smaller images?

I'm working on my website blog and I need to create a specific area for images at the top of my articles. I want these images to have a maximum width so they don't exceed a certain size, but I also want smaller images to remain unaffected. Curren ...

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users

Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...

Obtain a compilation of users who have expressed their reaction to a message with a specific emoji on Discord

Check out this Discord.js code snippet for a Discord bot: client.channels.fetch('channelID here').then(function (channel) { channel.messages.fetch('messageID here').then(function (message) { console.log(message.reactions.cache.get(&a ...

Unable to retrieve the .attr() from a button that was created using handlebars

I am currently working on developing a web scraper as part of a homework task that involves using Express, Mongoose, Cheerio/axios, and Handlebars. In my "/" route, I retrieve the Mongoose objects and use Handlebars to display them on the page in individua ...

How can I replay an HTML audio element?

I created an HTML5 page with an audio element for playing music in mp3 format. However, when the music plays to the end, it stops and I'm using JavaScript to control the audio element. Even so, I can't seem to replay it, only stop it. Is there a ...

Displaying CSS image slideshow images side by side

Currently I am a student studying the fundamentals of HTML and CSS. My latest project involved creating a website showcasing my work from digital arts class, complete with a simple CSS slideshow. The original intention was to have each image displayed on i ...

Leveraging Vue.js's capabilities with an external setup file

Is it feasible for a Vue App to access an external configuration file? I envision a setup where I deploy the application along with the config file; then, I should be able to modify the configuration in the external file without needing to rebuild the enti ...

Using VBA and Selenium to access iframes within HTML with the #document tag

I am currently facing a challenge in accessing the HTML content within two iframes using Selenium Basic in VBA. Due to restrictions on our machines, we are unable to use IE and other tools like Python are not available to us. In the past, I was able to ac ...

Creating a sidebar with child elements in Vitepress: A beginner's guide

I'm having trouble displaying my folder tree in the sidebar. When I click on a parent element like Group, the children elements are not showing up as expected. https://i.sstatic.net/kdc98.png One strange thing is that the Group elements do not have ...

What is the best way to invoke a single ajax function across multiple pages with varying URLs?

Hello everyone! I am attempting to streamline my ajax post function and use it across the entire site with different URLs on each page. Below is my original function and how it currently operates: <button type="button" class="submit" ...

Methods for eliminating curly braces from HTTP response in JavaScript before displaying them on a webpage

When utilizing JavaScript to display an HTTP response on the page, it currently shows the message with curly braces like this: {"Result":"SUCCESS"} Is there a way to render the response message on the page without including the curly braces? This is the ...

Analyzing all the <option> elements within a <select> tag with jQuery

I have a WordPress plugin in development and I am currently facing an issue with comparing user-input from an <input> element to a set of <option> elements within a <select> element. Here is my current approach: $('button#test_bu ...

Encountered an issue while attempting to retrieve data from the HTTP URL

I encountered an issue when trying to make a request to an HTTP URL from another domain using AJAX. Every time I attempt this, I receive an error callback. DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load { ...

How can I arrange a specific array position in Vuejs according to the Id value?

<div v-for="(item, index) in gr" :key="space.id" class="val-name"> </div> After making a few modifications to the API call logic, I was able to achieve my desired outcome. However, the issue lies in the fact that ...

Dealing with empty POST request bodies in Node.js Express is a common challenge

In my Node.JS project using Express framework, I am encountering an issue while trying to access the body of a POST request. The POST request is being sent through an HTML form, and upon checking with WireShark, I can see that the request is indeed getting ...

Retrieving form output number using JQuery

Hello, I'm new to this site and have no prior experience with javascript coding. Here is what I have in my javascript file: $(document).ready(function() { $("input").click(function(event) { updateTotal(); }); }); function updateTotal() { var to ...

"Why isn't the reordering functionality functioning properly after the button has been clicked

I have a question regarding menu options that contain text and a button. I need to open the menu option when the button is clicked. Unfortunately, I am facing an issue where rerendering is not working when I click on the button. Here is the link for refer ...

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

Half of the sections will not stack on mobile devices

UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...