Click here to Skip to main content
14,392,481 members
Rate this:
Please Sign up or sign in to vote.
Hi Team

I have a datepicker, but i am struggling to find a way i can create a control to download a datepicker as a cvs file or xml. I hope i make sense to this, if so will provide my logic for both HTML code and Jquery code for my datepicker;


What I have tried:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><br>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
       <div class="container">
        <div class='col-md-5'>
          <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
        <div class='col-md-5'>
          <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    
    <!---Jquery code--->
    
     // date functionality
          $(document).ready(function() {
      $(function() {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
          useCurrent: false 
        });
        $("#datetimepicker6").on("dp.change", function(e) {
          $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function(e) {
          $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
      });
    });
Posted
Updated 8-Nov-19 2:37am
v2
Comments
Richard Deeming 7-Nov-19 13:30pm
   
Sorry, "download a datepicker" doesn't make any sense. Do you want to download some data based on the selected date range?

If that's what you're trying to do, then you'll need to provide a lot more information. What server-side framework are you using? Where does the data come from? Etc.
gcogco10 7-Nov-19 13:35pm
   
The data should be to download the date itself from a specific day e.g 07-11-2019 to 09-11-2019 on datepicker its. I am using Jquery to interface with my browser.
Dave Kreskowiak 7-Nov-19 15:44pm
   
Are you trying to limit the DatePicker to a range of dates that the user can pick a single date from?

Or are you using two DatePickers to specify a range of dates?
gcogco10 7-Nov-19 15:48pm
   
@Dave Kreskowiah yes and be able to have a download-option from those records as cvs file or pdf.
gcogco10 8-Nov-19 4:44am
   
Hi All i am working something along this line, but my URL on Ajax is not working, but my button should be able to download those record set on date range. Here is my code on Jquery i just implemented;

$(document).ready(function() {
$("#download").click(function() {
$.ajax({
url:'https://api.thingspeak.com/update?api_key=D****&field8=1',
type:'POST',
success:function(response){
window.location = response;
}
});

});

});
Rate this:
Please Sign up or sign in to vote.

Solution 1

Sounds like you are looking for a calendar plugin: jQuery Calendar Plugins | jQuery Script[^]

A simpler option might be using Airtable: best-front-end-for-editing-strongly-typed-tabular-data-e-g-not-a-spreadsheets~airtable[^]
   
v2
Rate this:
Please Sign up or sign in to vote.

Solution 2

Hi
If you want to add Jquery datepicker in your code then first you need to add cdn for jquery in your page.

I have modified your code and added Jquery datepicker.
See here:Jquery DatePicker[^]
   
Comments
gcogco10 8-Nov-19 1:04am
   
Hi Harsh.Shah.ifour, thanks i came right there with datepicker. The output looks the same as mine. Now i want to find a way, if there is a control to be able to download that start date and end date in jquery or javascript.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100