We Keep Coding

HTML/JS: How to make an input date change another input date?

So I'm working on an Angular app and I have these two date input fields:
<div class="col-lg-3">
<div> {{ dataInizioLabel }} </div>
<input required type="datetime-local" name="dataInizio" id="dateInput"
[ngModel]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"
(ngModelChange)="manageDateChange($event, dataInizio)" #dataInizio="ngModel">
<small class="text-danger" *ngIf="dataInizio.errors">Campo obbligatorio</small>
</div>
<div class="col-lg-3">
<div> {{ dataFineLabel }} </div>
<input required type="datetime-local" name="dataFine" [ngModel]="serverEvent.dataFine | date:'yyyy-MM-ddTHH:mm'" id="dataFine"
(ngModelChange)="manageDateChange($event, dataFine)" #dataFine="ngModel">
<small class="text-danger" *ngIf="dataFine.errors">Campo obbligatorio</small>
</div>
manageDateChange() JS (incomplete):
manageDateChange(date, inputField) {
if (date) {
this.serverEvent[inputField.name] = new Date(date);
}
let inizio = new Date(date.val())
console.log(inizio)
}
I can't find a way to make so the dataInizioLabel uptades the dataFineLabel field with his same date when it gets changed. For example, if dataInizioLaber gets set to 24/04/2022, I'd need dataFineLabel to self update to the same date.
Also, console says date.val() can't work and gives an error, so I don't think that's the right way to get the date value from the input field.

You might want to try to use a two-way binding on your ngModel like this:
[(ngModel)]="serverEvent.dataInizio | date:'yyyy-MM-ddTHH:mm'"

Angular Material Design - Bind Date object to MdDatepicker

https://material.angular.io/components/datepicker/examples
I learn using Material Design datepicker from official page and I would like to bind choosen data to Date object.
datepicker-overview-example.component.html:
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
datepicker-overview-example.component.ts:
import {Component} from '#angular/core';
#Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.component.html',
styleUrls: ['datepicker-overview-example.component.css'],
})
export class DatepickerOverviewExample {
#Input() date: Date;
}
How can I bind it?

By assigning a value property binding to the input element
<md-input-container>
<input [value]="value" mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker (selectedChanged)="selectedChanged($event)" #picker></md-datepicker>
Typescript:
value:Date =new Date();
LIVE DEMO

Datepicker to datetimepicker

We currently working on a Hotel Management System, and we have an accommodation module. In our accommodation module there's Start Date and End Date, we used date picker for it. But I was ask to make it a datetime picker, I search about it and I find something on how to do it. I download a datetimepicker jquery plugin. Here's what I did in my UI:
<script type="text/javascript">
$(function () {
$('#_startDate_id').datetimepicker();
$('#_endDate_id').datetimepicker();
});
</script>
<div class='col-sm-6'>
<input type='text' class="form-control" id='_startDate_id' />
</div>
<div class='col-sm-6'>
<input type='text' class="form-control" id='_endDate_id' />
</div>
But I'm a bit confused on how to adjust my domain, this how it looks like:
#NotNull
#PresentOrFuture
#DateTimeFormat(pattern = "dd/MM/yyyy hh:mm:ss")
#Temporal(TemporalType.DATE)
private Date startDate;
#NotNull
#Future
#DateTimeFormat(pattern = "dd/MM/yyyy hh:mm:ss")
#Temporal(TemporalType.DATE)
private Date endDate;
Newbie here. I hope someone can help me.

How to call a function on click of date in html 5 datepicker input type

I had a html5 date-time picker.Now on mouseclick(select) of date from date picker I want to call a function.I wonder how can we do that in angular js ...can
someone help me.
html:
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" format="dd/MM/yyyy" ng-model="$root.Details.date" value = "{{dob}}">
</div>
Js
class CreateCustomerCtrl {
constructor($scope,$rootScope,$http,$state,$reactive,$timeout,Notification)
{
//logic here
}
export default angular.module('createCustomer', [
angularMeteor
])
.component('newCustomer', {
templateUrl: 'client/customer/new-customer.html',
controller:['$scope','$rootScope','$http','$state','$reactive','$timeout','Notification'
,customerCtrl]});
So on select of date I want to call a function.
Thanks

You could use ng-change="yourFunc()" event on input with ng-model="myDate" for binding value and inside function you can put your logic.

You should try <input type="date" onchange="return function(this) />;" and return your function to do whatever you want to.

Disable ui bootstrap datepicker if the date is less than the current date - Angularjs ngRepeat

How can I disable each individual datepicker if the date model is less than the current date or if the date has "expired".
I am developing a UI with datepickers for start and end dates. Initially, the UI can have as many datepickers as needed depending on the data returned from a backend. Users can also add more date pickers.
Here is a sample data I am using to build datepickers with ngRepeat.
{
"id": 1234,
"seasons": [{
"endDate": "2016-01-03",
"startDate": "2015-09-10",
"description": "2015"
}, {
"endDate": "2017-01-03",
"startDate": "2016-09-10",
"description": "2016"
}]
}
I am creating a UI where users can change dates via datepickers only if the start and end date has not expired. In cases where the date has expired the datepicker needs to be disable.
Here is my UI for reference.
My current approach is to iterate through seasons array and check if the startDate is less than today.
ss.datePickerStartDateEnabled = false;
angular.forEach(ss.seasonSet.seasons, function(season, key) {
if (season.startDate < today) {
console.log('Less than today');
ss.datePickerStartDateEnabled = true;
}
});
So far it works but it disables startDate that is not less than today.
Here's my html
<div class="row" ng-repeat="s in ss.seasonSet.seasons track by $index">
<div ng-controller="DatePickerCtrl as datePicker">
<div class="col-md-3"> <!-- StartDate datepicker-->
<div class="form-group has-feedback">
<label for="username">Start Date</label>
<input
type="text"
class="form-control"
id="startDate{{$index}}" <!-- id=startDate1 -->
uib-datepicker-popup="{{}}"
ng-model="s.startDate"
is-open="datePicker.isOpen.startDate"
datepicker-options="datePicker.dateOptions"
ng-required="true"
ng-disabled="ss.datePickerStartDateEnabled"
close-text="Close"
ng-click="datePicker.open($event, 'startDate')"/>
<span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>
<div class="form-group has-feedback">
<label for="username">End Date</label>
<input
type="text"
class="form-control"
id="endDate+{{$index}}"
uib-datepicker-popup="{{}}"
ng-model="s.endDate"
is-open="datePicker.isOpen.endDate"
datepicker-options="datePicker.dateOptions"
ng-required="true"
close-text="Close"
ng-click="datePicker.open($event, 'endDate')"/>
<span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
How could I use id="endDate+{{$index}}" in the datepicker input along with the ng-disabled="ss.datePickerStartDateEnabled" and ss.datePickerEndtDateEnabled in my controller to disable a single date picker based on the condition from above.
There are other validations that I need to do e.g. no overlapping dates and start date must be after the previous end date. I am trying to solve the easy case first.
Thanks in advance. Here is the the plunker code and here is the UI, tho the datetime picker is not working. See it full screen for better UI.

Using ng-disabled on the input is the right approach.
Your comment,
So far it works but it disables startDate that is not less than today.
Makes me think that your date comparison may be flawed, for example, if they are comparing different date formats. After the date comparison, disabling the input via ng-disabled should be all there is to this.
You also have some semantic confusion in
ng-disabled="ss.datePickerStartDateEnabled"
Where it essentially says "disable if enabled".

I was able to solve this problem using the following pattern.
I delegated the UI logic to disable datepicker(s) if the date has expired to my DatePickerCtrl.
angular.module('someApp')
.controller('DatePickerCtrl', ['$filter', function($filter) {
var datePicker = this;
datePicker.dateOptions = {
formatYear: 'yy',
startingDay: 1,
};
var today = $filter('date')(new Date(), "yyyy-MM-dd");
datePicker.startDateDisable = startDateDisable;
datePicker.endDateDisable = endDateDisable;
datePicker.open = open;
//Useful to manage more than one datepicker in the same view
//E.g. datepickers created in a ngRepeat
datePicker.isOpen = {};
function open($event, which) {
$event.preventDefault();
$event.stopPropagation();
datePicker.isOpen[which] = true;
}
function startDateDisable(startDate) {
return startDate <= today ? true : false;
}
function endDateDisable(endDate) {
return endDate <= today ? true : false;
}
//Date format could come from user's profile preferences
datePicker.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
datePicker.format = datePicker.formats[2];
}])
The startDateDisable(startDate) and endDateDisable(endDate) functions are the only relevant ones.
Next, I used ng-disabled directive on the datepicker input as such:
<div class="form-group has-feedback">
<label for="username">Start Date</label>
<input
type="text"
class="form-control"
id="startDate{{$index}}"
uib-datepicker-popup="{{format}}"
ng-model="s.startDate"
is-open="datePicker.isOpen.startDate"
datepicker-options="datePicker.dateOptions"
ng-required="true"
ng-disabled="datePicker.startDateDisable(s.startDate)"
close-text="Close"
ng-click="datePicker.open($event, 'startDate')"
date-validation/>
<span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>
The relevant code is ng-disabled="datePicker.startDateDisable(s.startDate)" where s.startDate in my input model. The DatePickerCtrl is responsible for managing the UI state. The data comes from another controller.
The same logic applies for endDate.