The date-picker element cannot be selected by html2canvas

I'm encountering an issue with Html2canvas while trying to capture a screenshot of my page. Specifically, the date shown in the date-picker on the page is not appearing in the screenshot. Do you have any insights into why this might be happening and how I can troubleshoot it?

Below is the code snippet:

<div id='ownerDetails'>
  <input type="date" class="the-inp date-input">
</div>

<button id="sig-submitBtn">save</button >
<button id='nextbt'>capture</button>

<img id='itemImg' src=''>

//////////////


    $(".date-input").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date());

/////////

var element = $("#ownerDetails"); // global variable
var getCanvas; //global variable


$('#sig-submitBtn').on('click', function () {


        html2canvas(element, {
            onrendered: function (canvas) {
                getCanvas = canvas;
            }
        });

});


$("#nextbt").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    //Now browser starts downloading it instead of just showing it
    document.getElementById("itemImg").src = imgageData;
});


Answer №1

Here is a different approach to the solution, along with a fiddle example:

Check out the code on JSFiddle

Additional CSS code:

.selectedDate{
 background: #fff;
    border: 1px solid #000;
    padding: 3px;
    padding-left: 18px;
    padding-right: 17px;
    font-size: 14px;
  }
<div id='ownerDetails'>
  <input type="date" class="the-inp date-input">
  <lable class="selectedDate" style="display:none;"></lable>

</div>


/////////

var element = $("#ownerDetails"); // global variable
            var getCanvas; //global variable


    $('#sig-submitBtn').on('click', function () {

            var selectedDate = $('.date-input').val();
            $('.date-input').hide();
            $(".selectedDate").show();
            $(".selectedDate").html(selectedDate);
            html2canvas(element, {
                onrendered: function (canvas) {
                    getCanvas = canvas;
                }
            });

    });


            $("#nextbt").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                //Now browser starts downloading it instead of just showing it
                document.getElementById("itemImg").src = imgageData;
            });

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

Using Passport.js with a custom callback function that accepts parameters

I currently have this block of code: app.post('/login', passport.authenticate('local', { failureRedirect: '/login', failureFlash: true }), function(req, res) { return res.redirect('/profile/&a ...

React.js - Error message: onChange is not defined

My application has successfully integrated the last.fm API to fetch related artists. The concept is simple - search for an artist and receive a list of related artists in return. While using 'onClick' works flawlessly as it retrieves the input v ...

The request included an unsupported media type of "text/plain;charset=UTF-8". This caused an error in the NextJS API when interacting with Django Rest Framework

Currently diving into the world of web development, I am endeavoring to construct a website utilizing NextJS and Django Rest Framework. While NextJS effectively proxies API endpoints for retrieving data, I find myself grappling with making it work for a PO ...

Is it possible to utilize components or directives in both AngularJS and Angular when developing a hybrid application?

Is it possible to use AngularJS directives/services that have been "upgraded" in a hybrid app created with ngUpgrade for migrating from AngularJS to Angular? Can Angular components that are "downgraded" still be used on the Angular side as well? While res ...

What is the best way to include multiple entries in a select2 form using ajaxform?

select2/3.5.2/ I had to repost this because my initial post was not formatting correctly. The tools in use are: A select2 form field that allows searching through multiple records A bootstrap popup modal containing a form for entering a new record if i ...

Screening for items that meet specific criteria

Currently, the functions are functioning properly by filtering inventory based on barcode and manufacturer. However, I am looking to enhance it to behave like default angularjs filtering. Specifically, I want it so that if I select manufacturer - LG and ba ...

Challenges arising from the offset in an overflowing Div

Encountering issues with JQuery Offset when utilized within a div that has a fixed height and overflow. This particular div contains two columns, a main column and a sidebar. The objective is to have one of the sidebar divs scroll within its container unt ...

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

Picking a File Directory within an HTML Form

I am in the process of creating an intranet site for my company, and one of its functionalities is to store a database of files along with their locations as provided by users. The files are located on a network drive, and those accessing the database shou ...

Guide on including a callback function in the renderCell columns of Material UI X Datagrid

When a button is clicked and the redux action is successful, I am trying to use a simple toast hook to display a message in the parent component where my Data grid is located. Can a callback be passed to utilize this hook from within the data grid? Here i ...

Is there a way to obtain the full class name if only a portion of it is known?

I am trying to extract the complete classname of an element, but I only have partial information about it. <div class="anotherclass my-class-no-1 onemoreclass...">div> Currently, I can select the element using this: $([class*="my-class-no-"]... ...

Creating a loading screen with JQuery for an Ajax request

I want to implement a loading screen in my web application every time an ajax call is initiated using jQuery. Currently, I have different types of ajax calls such as $.getJSON, $.post, and $.ajaxFileupload, each with their own Success function that remov ...

What is the most effective method for fetching images from MongoDB?

I'm currently working on a web application that uses MongoDB's GridFS to store and retrieve images. However, I'm facing an issue where retrieving images from the database takes significantly longer than expected when a user makes a request. ...

Datagrid in AngularJS does not update filters upon refresh

Currently, I am attempting to implement name filtering with Angular JS using the following library: https://github.com/angular-data-grid/angular-data-grid.github.io. However, an issue arises when searching as the results do not refresh immediately; only up ...

PHP service encountering a failure during an AJAX call

After setting up a web service with PHP, I found that when accessing it from a rest client, the JSON response is correct. However, when calling the method from an AJAX call integrated into a Drupal site, the service response comes back as HTML, leading to ...

What is the best way to make a div expand to the full width of the screen while still being contained within its parent div?

I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...

How to trigger an event with multiple parameters up several levels using Vue 3?

Important Note: While this question may seem repetitive to some, I have not been able to find a suitable solution for Vue 3 that involves passing events with parameters through multiple levels. Please correct me if I am mistaken. A Clarification: Despite ...

Creating an Interactive and Engaging 3D Experience on Facebook with the Power of Javascript API

Looking for suggestions on a 3D API in JavaScript that can be used to create immersive applications on Facebook. Is there something similar to this one: ? Appreciate any insights. ...

Choose a variety of table rows based on the values of the data attributes that are

Is there a more efficient way to select all rows with data attributes id 1,2.. without specifying each row individually? I need some guidance on the best approach for this. Can anyone help me out? <table id="eTable"> <tr data-empid="A123" data- ...

Object displaying no visible illumination

Recently, I've been experimenting with this project, and after some trial and error, I've managed to get things working to some extent. As a novice in JavaScript, I'm unsure if the issue I'm facing has a simple solution. The problem is ...