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

What steps do I need to take to make this JavaScript code function properly? How can I create a carbon copy email setup in

Recently, I've been struggling to implement this particular code on my website as I am not very proficient in JavaScript. Despite searching for various online resources, none of them seem to address my issue. This code is meant to be a part of a form ...

Try triggering transitions on all elements by hovering over any CSS element

I am currently in the process of developing a website, and for the header section, I have decided to use a table format where each column represents a different section. The top row will feature a picture link, while the bottom row will display the name of ...

What steps do I need to take in order for my web controls to show up on top of an activex

I'm currently facing a challenge in designing a website with activex reports. Even though I recommended switching to another reporting tool or technology, we're still using activex for now. I've noticed that graphical activex objects displa ...

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

What is the process for adding a line of JavaScript directly into the code (instead of using an external .js file)?

I am trying to insert a script tag that will run one line of JavaScript directly into the head of a document instead of inserting an empty script tag with a src attribute. So far, I have the following code: <script type="text/javascript"> var script ...

What causes certain content to be inaccessible when using Safari?

When I visit this page using Safari or my iPhone, the list of social network members does not appear. Can anyone explain why this might be happening? I am unable to figure out the reason behind this issue. Thank you in advance for your help! ...

click event to activate delayed function in dropdown

Within the li element, there is an onclick function with a data-toggle="dropdown" attribute. The issue at hand is that my function isn't triggered when I click once, but interestingly it works after clicking twice. I invoke this function to ensure th ...

Interceptors in axios do not trigger when making requests through a PHP proxy

I am currently working on a React app that will be interacting with services hosted on a remote server. During development on my local machine using the react-scripts server at localhost:3000, I disable CORS in the browser and have no issues with axios f ...

Unable to execute multiple instances of Selenium PhantomJS concurrently

I have encountered an issue while using Selenium's node.js API to run PhantomJS instances against a series of web pages. The code that I have written to perform actions on the pages is functioning correctly, but it appears that only one instance of Se ...

The website runs quickly on my computer, but lags when deployed to the

With the development of my WordPress site that heavily utilizes custom Ajax for search result loading, I have encountered a discrepancy in performance between my local environment and VPS. On my HP laptop running WAMP, the site performs excellently with A ...

Update the text on the button when tasks are in progress in React

I am working on a React project and I need to implement a button that changes its text from Save to Saving... when clicked, and then back to Save once the saving process is complete. My initial approach looks like this: import React from 'react&apos ...

The output returned by an AngularJS controller

John Papa introduced the 'controller as' technique for AngularJS in his article titled Do You Like Your Angular Controllers with or without Sugar: myApp.controller("MainCtrl", [ function () { var vm = this; // using ViewModel conv ...

Adjust the class attribute in real-time

My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

Issue: A SyntaxError is triggered due to an unexpected termination of the JSON input while utilizing the fetch()

I encountered an issue while working on sending JSON between a Go API server and a React front-end. The error message I received was: Error: SyntaxError: Unexpected end of JSON input The specific line where the error is occurring is Line 25, which contai ...

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

What is the method for eliminating quotes from a URL?

Changing the URL: history.replaceState('data to be passed', 'Title of the page', '<?php echo getAddress(); ?>/?usp-custom-14="'+urldates+'"&usp-custom-8="'+title+'"'); After making changes, it s ...

Navigating through different tabs in an AngularJS application is made simple and efficient with the help of $

I used the angular-authentication-example to create a login page for my project. After logging in, the homepage should display multiple tabs just like in this example on Plunker. <ul class="nav nav-tabs" ng-controller="TabsCtrl"> <li ng-class= ...

Tips for modifying a user's tags with Quickblox's JavaScript SDK

Is there a way to update a user's tags using the Quickblox JavaScript SDK? I have attempted using the parameter names listed below: user_tags tags with var params = { user_tags: ["testing"] }; Kindly avoid suggesting alternatives like "custom ...

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...