We Keep Coding

Angular 2 datepicker two way data binding

I have the following code:
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right input-sm" id="datepickerTo" [ngModel]="dateTo | date:'yyyy-MM-dd'" (ngModelChange)="dateTo = $event" name="nameTo">
</div>
I have component class and declared dateTo parameter.
public dateTo: Date;
constructor() {
this.dateTo = new Date();
this.dateTo.setDate(this.dateTo.getDate() + 30);
}
When I load page it shows date properly, but when I change date on picker choose different date, value in component class does not change. Any idea how to fix this problem?

Not Set Datetime Value To The Bootstrap DatetimePicker

I have update form. And this update form has bootstrap datetime picker and it has html code like as below:
<div class="input-group date" id="startdateandtime" value="Thu Jul 25 1997 00:00:00">
<input required="" type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I want to set any date and time of this picker when edit form is opened.
But my jquery functions doesn't work. And value is not set to this datetime picker. I use jquery like as below:
$('#startdateandtime').datetimepicker({
date: new Date(1434544882775)
});
$("#startdateandtime").datetimepicker("update", new Date(1434544882775));
$("#startdateandtime").datepicker("setValue", "02-17-2012");
$('#startdateandtime').datepicker({
onSelect: function () {
$('#startdateandtime').text(new Date(1434544882775));
}
});
All of the above jquery functions doesn't work. So that I can't set any
datetime to the picker which is in the edit form.
I use bootstrap datetime picker. Bootstrap DateTimePicker css and js source files. And their version is 4.7.14.
How can I set any datetime to the datetime picker when edit form is opened ?

If you are using this bootstrap component: https://github.com/Eonasdan/bootstrap-datetimepicker
you can reference date function this ways:
set value in the picker to current datetime:
$("#startdateandtime").data("DateTimePicker").date(new Date());
set value to timestamp (24/11/2017 11:41:41 ==> timestamp 1511520101020):
$("#startdateandtime").data("DateTimePicker").date(new Date(1511520101020));
set value to date string:
$("#startdateandtime").data("DateTimePicker").date("30/11/2017 11:30");
See http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date
Here is a working snippet:
$('#datetimepicker1').datetimepicker(
{
format: "DD/MM/YYYY HH:mm:ss",
toolbarPlacement: 'top',
showClear: true,
showClose: true,
sideBySide: true
}
);
$(document).ready(function() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
})
function setTs() {
$("#datetimepicker1").data("DateTimePicker").date(new Date(1511520101020));
}
function setNow() {
$("#datetimepicker1").data("DateTimePicker").date(new Date());
}
function setDateStr() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">
<div class="row">
<div class="col-md-4">
<div class="panel-body">
<form id="srcForm" data-toggle="validator">
<div class="row">
<div class="form-group col-xs-12">
<label>Date</label>
<div id="datetimepicker1" class="input-group">
<input type="text" class="form-control" name="from">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
<div class="search-footer">
<button type="button" class="btn btn-primary btn-search" onclick="setTs()">Set Date To TS</button>
<button type="button" class="btn btn-primary btn-search" onclick="setNow()">Set Date To Now</button>
<button type="button" class="btn btn-primary btn-search" onclick="setDateStr()">Set Date To Date String</button>
</div>
</div>
</div>
</div>

I am sharing how I made it work with setDate OPTION:
var dateEx = "08/14/2022 01:57:00 AM";
$('#datetimepicker1').data('DateTimePicker').setDate(dateEx);
Hope it helps someone too!

Angular js directive not working in for loop

I am using a diective in ng-repeat which when i click i pass date and time to the function showAppointmentForm but here the problem is when I click on first index of loop i get date and time displayed in modal box but when I click on second ,third and so on its values are coming as function parameters but not displayed.Is this something problem with using directives in for loop.Can anyone please suggest help.Thanks.
Using directive in template,
<div data-ng-repeat="doctor in doctors">
<appointment-timings data-ng-if="appointments" appointments="appointments" physician="doctor.npi" width="2"></appointment-timings>
</div>
My appointmnt directive,
$scope.showAppointmentForm = function(date,time) {
$scope.appointmentData = {};
$scope.appointmentData.physician = $scope.physician;
$scope.appointmentData.date = '';
$scope.appointmentData.time = '';
$scope.appointmentData.date = date.toString();
$scope.appointmentData.time = time;
$scope.submitted = false;
$timeout(function () {
$scope.$apply();
$('#appointments').modal('show');
},500);
}
My Directive html,(A modal box)
<div class="date-time">
<div class="col-md-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon"><b>DATE</b></span>
<input type="text" class="form-control" ng-model="appointmentData.date" disabled>
</div><!-- /input-group -->
</div>
<div class="col-md-6 col-xs-6">
<div class="input-group">
<span class="input-group-addon"><b>TIME</b></span>
<input type="text" class="form-control" ng-model="appointmentData.time" disabled>
</div>
</div>
</div>
<div class="scheduled-hours" id="scheduled-scroll">
<ul>
<li data-ng-click="showAppointmentForm(date, time)" data-ng-repeat="time in times">{{time}}</li>
</ul>
</div>

Javascript Document.getElementById returning null

I'm new to MVC and AJAX so this is probably a simple mistake I am making but using the code below, I am getting the following error trying to getElementById("txtCount").value:
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h5 style="font-weight:bold;">Parameters</h5>
</div>
<div class="panel-body" id="parameters">
<form class="form-horizontal" id="frmParameters">
<div class="form-group">
<label for="txtCount" class="col-sm-4 col-form-label">Repeat</label>
<input type="number" min="1" max="100" step="1" id="txtCount" value="#Model.Count" class="input-sm col-sm-7" />
</div>
#if (Model.Grammar.SupportsMaxLength)
{
<div class="form-group">
<label for="txtMaxLength" class="col-sm-4 col-form-label">Max Length</label>
<input type="number" min="1" max="100" step="1" id="txtMaxLength" value="#Model.MaxLength" class="input-sm col-sm-7" />
</div>
}
<button name="btnGenerate" class="btn btn-primary pull-right" onclick="Generate();">Generate</button>
</form>
</div>
</div>
</div>
</div>
<script>
function Generate() {
var data = { count: document.getElementById("txtCount").value, maxLength: document.getElementById("txtMaxLength").value };
}
</script>
If I change:
var data = { count: document.getElementById("txtCount").value, maxLength: document.getElementById("txtMaxLength").value };
to:
var data = { count: document.getElementById("txtCount").value};
I don't get the error anymore.

Your code looks fine. I think you are getting the error when your code tries to execute this line
document.getElementById("txtMaxLength").value
Because in your view you are rendering this element when some if condition returns true. So it is possible that your view does not have this input element at all and you are trying to read that! (Check the view source of the page and search for input with txtMaxLength id.
The best solution is to check it exists before trying to read the value.
var data = {
id: "#Model.Id",
count: document.getElementById("txtCount").value,
maxLength: null // or whatever default value you want
};
if (document.getElementById("txtMaxLength")) {
data2.maxLength = document.getElementById("txtMaxLength").value;
}
Or if you are using jQuery library, it is easy
var data = {
id: "#Model.Id",
count: $("#txtCount").val(),
maxLength:$("#txtMaxLength").val()
};

Angular js, on ng-change how to update options of other select control

On change of year value I want to change options of Make drop down, but not getting how to update options of other control.
Below is my plunker with form.
https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
api.php is server response these options should display in Make drop down on change of year.
autoQuoteCtrl.js
$scope.updateMakeList = function(){
}
index.html
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.VehicleYear.$error.required">This field is required.</span>
</div>

You need to put this function in your controller -
$scope.updateMakeList = function(name)
{
// Your logic to change value in Make dropdown
$scope.questions[name].VehicleMake.QuestionData._answerOptions = [{'_value':"test",'_promptText':"Test"}];
}
And update your HTML (year select box)-
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList($state.current.name)" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>