I am looking to populate a table with 24 consecutive dates, starting from a selected date. For example, if I choose 7/1/2017, the table should display dates ranging from 7/2/2017 to 7/25/2017.
Previously, I achieved this using Jquery's datepicker as shown below:
<p id="dateStuff">
Date: <br />
<input type="text" id="datepicker">
</p>
Script for populating the table:
for (var i = 1; i <= 24; i++) {
var result = new Date(currentDateString);
var someFormattedDate = 0;
result.setDate(result.getDate() + 1);
var dd = result.getDate();
var mm = result.getMonth() + 1;
if (mm < 10) {
someFormattedDate = '0'+ mm + '/' + dd + '/' + y;
}
else {
someFormattedDate = mm + '/' + dd + '/' + y;
}
currentDateString = someFormattedDate;
document.getElementById("date" + i).appendChild(document.createTextNode(currentDateString));
}
Now, I am trying to replicate this functionality using angular ui datepicker (http://angular-ui.github.io/bootstrap/#!#datepicker) and facing challenges in achieving the same result.
Snippet of my code using angular ui datepicker:
<div class="form-group">
<label for="cpDate">Date</label>
<div class="input-group">
<input id="inputStartDate" type="text" ng-model="sc.model.date" class="form-control" ng-required="true"
ng-focus="isDatePickerStartOpened=true"
uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="datepickerOptions"
is-open="isDatePickerStartOpened"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default form-control" ng-click="sc.showDatePickerStart($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
Script for angular ui datepicker:
var vm = this;
vm.model = {
date: new Date(),
};
alert(vm.model.date.toString().substring(4, 15));
I am facing issues as the alert displays the date format as Jul 19 2017 instead of 7/19/2017. Additionally, I am unsure how to retrieve and manipulate the month, day, etc. similar to my previous implementation.