Question posted in
You can find the official documentation here.

How can I change my API link with a date picker – Jquery ajax

Currently my api link is dynamic by selecting the current year and month.

Example:
APILINK…/202109

That part is fine… But what I want to do is change the last part of the API link (Year and Month) with a datepicker and I’m not sure how I can do that.

My current Code:

const timehsheetUrl = "API LINK"
const today = new Date();
const date = today.getFullYear()+('0' + (today.getMonth() + 1)).slice(-2);
const settings = {
    "async": true,
    "crossDomain": true,
    "url": timesleetUrl + date,
    "method": "GET",
    "headers": {}
}
Tags:

2

Answers


  1. 0

    It’s easy use jQuery date picker.

    On date select script should return selected date’s month and year.

    Store the output in variable and format. The code shown below will help you

    // html markup, use jQuery UI CDN in head section
<input type="text" id="calendar" name="date1"/>
// html markup

<script>
$('#calendar').datepicker({
    dateFormat: 'yy-m-d',
    inline: true,
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate'),
            day  = date.getDate(),  
            month = date.getMonth() + 1,              
            year =  date.getFullYear();
         // alert(day + '-' + month + '-' + year);
         // this is your result
         alert( "api link is   "+"APILINK.../"+year+month);
    }
});
</script>
    Login or Signup to reply.
  2. 0

    No, you don’t need to use datepicker plugin, while plugin is more convenient.

    Here’s an example with default HTML date-input.

    const timesleetUrl = "API LINK";
const today = new Date();
function urlDateSuffix(_date) {
  return  _date.getFullYear()+('0' + (_date.getMonth() + 1)).slice(-2);
}

let settings = {
    "async": true,
    "crossDomain": true,
    "url": timesleetUrl + urlDateSuffix(today),
    "method": "GET",
    "headers": {}
}
console.log(settings);

$(function() {
  $('#datepicker').change(function() {
    settings.url = timesleetUrl + urlDateSuffix(new Date(this.value));
    console.log(settings);
    alert(settings.url);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="datepicker">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search