Datapickers cmp with today to exe jQuery code - html

Question

I have created this code:
<div class="option">
<label for="date">Date de debut de reservation</label>
<input type="date" id="datepickerFrom" ui-date="dateOptionsFrom" ng-model="datepickerFrom" class="form-control ng-empty hasDatepicker ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-ui-date-validator" name="datepickersFrom" placeholder="dd/mm/yyyy" min="<?php echo $today; ?>" required>
<script>
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("datepickersFrom")[0].setAttribute('min', today);
</script>
</div>
I want to compare the date selected with date of today.
If it is the case that today's day is selected I would like to run this code below:
$("#exptype").append('<option value="fast" selected>Ultra-express 1 heure</option>');
otherwise if today's date is not selected, I would like to execute this code:
$("#exptype").append('<option value="stand">Livraison standard 24-48h</option>');
How can I do that?

Answer 1

You are using angular, right? I presume this given that you have the ng-model attribute set on your date input. If that is the case, you can use the angular controller to handle this - see example below.
Also, presuming you are using angular, then you could look at using the angular date picker controls for a richer/more robust UI control...
angular.module('myApp',[]).controller('dateController',function($scope) {
var today = new Date().toISOString().split('T')[0];
$scope.datepickerFrom = today;
$scope.todaySelected = true;
//this replaces that line you had:
//document.getElementsByName("datepickersFrom")[0].setAttribute('min', today);
$scope.minDate = today;
//when the date changes, store a boolean in our controller scope, to be used in the filter function below
$scope.dateChanged = function() {
$scope.todaySelected = ($scope.datepickerFrom == today);
};
//define our options - please adjust for your needs
$scope.expTypeOptions = [
{ value: "four hours", text: "4 heure" },
{ value: "fast", text: "Ultra-express 1 heure" },
{ value: "stand", text: "Livraison standard 24-48h" },
];
//this function handles showing the expType options in the select list,
//based on the selected date
$scope.filterOptionsByDate = function(expType) {
if ($scope.todaySelected) { //hide the 'stand' option
return expType.value != "stand";
}
else { //otherwise show everything except the 'fast' option
return expType.value != "fast";
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="option" ng-app="myApp" ng-controller="dateController">
<label for="date">Date de debut de reservation</label>
<input type="date" id="datepickerFrom" ui-date="dateOptionsFrom" ng-model="datepickerFrom" class="form-control ng-empty hasDatepicker ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-ui-date-validator" min="{{ minDate }}" ng-change="dateChanged()" name="datepickersFrom" placeholder="dd/mm/yyyy" required >
<div>
<select ng-model="expType" ng-options="expType.text for expType in expTypeOptions | filter:filterOptionsByDate">
</select>
</div>