Btukfyl

I am utilizing a datepicker script for some text inputs in a form. The form lives within a modal that is triggered by a button in a table. I am having a problem when I use my export to csv script, the datepicker is showing up in my csv and breaking stuff.

So I figured, easiest solution is to remove datepicker class on export, but this isn't working.

I have added an alert into the jQuery code to ensure its even triggering. Sure enough it is. For some reason it just will not remove that class. Any suggestions on how to fix removeClass, or better yet, how to ensure the datepicker isnt showing up in my csv.

Here is the modal in which the form lives:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">

  <div class="modal-dialog controls" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>

        <h4 class="modal-title bold" id="controlsModalLabel">Edit Entry</h4>

      </div>

      <div class="modal-body">

        <h3 class="center">You are about to edit entry for</h3><br/>

        <h3 class="alert login"></h3>

        <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">

          <input id="_csrf" type="text" name="_csrf" hidden="hidden"/>

          <input class="la_id form-control" type="hidden" name="la_id"/>

          <label class="bold">Start date:</label>

          <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>

          <label class="bold">End date:</label>

          <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>

          <label class="bold">SIM link:</label>

          <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required"/><br/>

          <label class="bold">Notes:</label>

          <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>

          <div class="modal-footer">

            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>

            <button class="btn btn-success" type="submit">Submit</button>

          </div>

        </form>

      </div>

    </div>

  </div>

</div>

jquery code:

$('#export').on('click', function(){

  $('.date').removeClass('datepicker');

});

table export to csv script:

function downloadCSV(csv, filename) {

    var csvFile;

    var downloadLink;



    // CSV file

    csvFile = new Blob([csv], {type: "text/csv"});



    // Download link

    downloadLink = document.createElement("a");



    // File name

    downloadLink.download = filename;



    // Create a link to the file

    downloadLink.href = window.URL.createObjectURL(csvFile);



    // Hide download link

    downloadLink.style.display = "none";



    // Add the link to DOM

    document.body.appendChild(downloadLink);



    // Click download link

    downloadLink.click();

}



function exportTableToCSV(filename) {

    var csv = ;

    var rows = document.querySelectorAll("table tbody tr,table thead tr");



    for (var i = 0; i < rows.length; i++) {

        var row = , cols = rows[i].querySelectorAll("td,th");



        for (var j = 2; j < cols.length; j++) 

            row.push(cols[j].innerText.trim());



        csv.push(row.join(","));        

    }



    // Download CSV file

    downloadCSV(csv.join("n"), filename+(new Date().getTime())+".csv");

}

Seems like the date picker uses <table> markup (jQuery UI datepicker does that). Instead of trying to hide the date picker you could simply add an ID or class to the CSV table and revise your export to CSV code to target the contents of that table only:

<table id="csv-table" class="csv-table">

var rows = document.querySelectorAll("table#csv-table tbody tr, table#csv-table thead tr");

// or

var rows = document.querySelectorAll("table.csv-table tbody tr, table.csv-table thead tr");

Be advised that hiding or removing class from an element will not make it "go away".

I simplified your example (ie...no modal and no CSV) to give you a working example of the removeClass jQuery call. The reason you aren't getting the class to be removed is that you have to wait on the DOM ready event before you wire up the click event. In the example code I have posted, you will notice your version of the click and one with the document.ready wireup. The version you have will not work to remove the class, but the DOM ready version will. Hope this helps.

<style>

    .date {

        background-color: purple;

    }



    .datepicker {

        background-color: blue;

    }



</style>



<script src="~/Scripts/jquery-3.3.1.js"></script>

<script>



    //$(document).ready(function () {

    //    $('#export').on('click', function () {

    //        $('.date').removeClass('datepicker');

    //    });

    //});





    $('#export').on('click', function () {

        $('.date').removeClass('datepicker');

    });



</script>



<div class="jumbotron">

    <h1>ASP.NET</h1>

    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>

    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>

</div>



<div class="row">

    <button id="export" name="export">Export</button>



    <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">

        <input id="_csrf" type="text" name="_csrf" hidden="hidden" />

        <input class="la_id form-control" type="hidden" name="la_id" />

        <label class="bold">Start date:</label>

        <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required" /><br />

        <label class="bold">End date:</label>

        <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date" /><br />

        <label class="bold">SIM link:</label>

        <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required" /><br />

        <label class="bold">Notes:</label>

        <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>

        <div class="modal-footer">

            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>

            <button class="btn btn-success" type="submit">Submit</button>

        </div>

    </form>

</div>

Export button jquery event should be like code given below:-

$(document).ready(function () {

   $('#export').on('click', function () {

       $('.date').removeClass('datepicker');

   });

});

this will definitely remove the class. but if doesn't work than try with this library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I am not sure which datepicker you're using. But the datepicker plugin might have some way attached the input in cache may call the datepicker. Then, you may noop its functionality like:

var exported = false;

$('#export').on('click', function(){

  exported = true

});



$('.datepicker').on('click', function() {

  if(exported) return $.noop();

  }

}

Here's how you could do it with jQuery. I have narrowed down your problem to keep the answer simple.

$(document).ready(function () {

   $('#export').on('click', function () {

       $('.date').removeClass('datepicker');

   });

});

.datepicker {

 background: #1884c3;

 padding: 5px 2px;

}



.date {

  color: #ce8177;

  font-size: 15px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button id="export" name="export-button">Export</button><br/>



<label class="bold">Start date:</label>

<input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>



<label class="bold">End date:</label>

<input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>

I don't know which date(time)picker you are using. But I am pretty sure the problem is that the plugin creates multiple elements - so just removing the class attribute is not enough to get rid of all elements.

Have a look here:

How do I *completely* remove a jQuery UI datepicker?