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": {}
}
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>
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">