Develop Reference

React JS How to change value in #material-ui keyboarddatepicker which is already bound to a model field

In React JS I have a dropdown and a #material-ui keyboarddatepicker.
My datepicker is bound to a field in a json file...
<div>
Expiry Date:<KeyboardDatePicker
id="ExpiryDate"
disablePast
minDate={new Date()}
format="D/MM/yyyy"
mask="__/__/____"
value={Person.LocationExpiryDate}
/>
</div>
Note the bound value above from the'Person' model.
I have a dropdown control which on it's onChange event I would like to change the value in the keyboarddatepicker to 6 months hence....
{this.DropdownControl(lookups.PracticeLocations, true, Person.CPPEPracticeLocation, event => this.HandleChangePerson(event, 'Location'))}
</div>
HandleChangePerson (event, propertyName) {
if (propertyName == 'Location') {
// Get date 6 months from today
const todayDate = new Date().toISOString().slice(0, 10);
const newExpiryDate = moment(todayDate).add(6, 'M').format('D/MM/YYYY')
// TODO: code here to change the keyboarddatepicker value.
}
I've tried using state and plain js to change the value but because it is already bound it doesn't change the value
I've looked up 'two way binding' but can't seem to find anything that references using a model.

How to add Add button to enter dynamic value in Angular 2/4/6/8 Multiselect Dropdown?

I am trying to add dynamic add button angular2 multiselect. Any one has done this dynamic addition of user entered value by selecting Plus button. I have tried with addNewItemOnFilter: true, I'm not able to see any + button.
I am putting (onAddFilterNewItem)="onAddItem($event)" for using angular2-multiSelect.
In settings, I am having
addNewItemOnFilter: true in the settings file.
Still I am not getting an extra 'ADD' button to add extra field. Any help I would appreciate.

There You have dynamic multiselect buttons.
Updated as you want input inside.
Template:
<div *ngIf="buttons" class="btn-group">
<button *ngFor="let button of buttons" (click)="addDynaminMultiseletButton()">
{{button}} <input type="text" (click)="setInput($event)">
</button>
</div>
Component:
buttons = ['Another button']
input: string
constructor() { }
addDynaminMultiseletButton() {
this.buttons.push("" + this.input)
}
setInput(event: any) {
this.input = event.target.value
}
You can store them in database:
buttons$ = Observable<any[]>
constructor(private db: SomeDatabase){}
ngOnInit() {
this.buttons = this.db.collection('fancyButtons').valueChanges()
}
addDynaminMultiseletButton() {
this.db.collection('fancyButtons').add({ fancyButton: 'fancyButton' })
}
Remember to subscribe when you want to display async buttons:
Template:
<div *ngIf="buttons$ | async as buttons " class="btn-group">
<button *ngFor="let button of buttons" (click)="addDynaminMultiseletButton()">+</button>
</div>
Have a nice day and good luck with programming! Remember to assign at least one element in array so there will be at least one button on screen.

Save state of ng-change local scope in Datepicker

I have come across what seems like a very simple issue, but I cannot figure out how to fix it. I posted this question originally, but it seems the issue is with the scope.
So basically, this is what is happening:
I have a datepicker inside a form. When the user selects a date, ng-change will trigger and it calls the function setDate(date).
In debug mode, I confirmed that the selected data indeed is passed to the function.
Inside the function, $scope.simStartDate variable is assigned this value and I can see its value changing.
However, when I later go to submit the form, $scope.simStartDate is back with its original initialized value.
I have put a breakpoint at the initialization $scope.simStartDate = new Date(), but it does not hit. Meaning that the variable is not initialized again.
I have tried using a $scope variable in the ng-model, but still the same issue.
This makes me think that ng-change creates a local scope and updates a local variable, which I cannot access later. Is my understanding correct? If not how can I fix this?
This is my HTML:
<div class="row" ng-controller="DashboardParamsFormCtrl">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">Simulation start date</label>
<p class="input-group">
<input type="text" class="form-control"
uib-datepicker-popup="{{format}}"
datepicker-options="options"
ng-model="date"
ng-change="setDate(date)"
is-open="opened" ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
show-button-bar="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
This is the JS:
angular.module('BlurAdmin.pages.dashboard')
.controller('DashboardParamsFormCtrl', DashboardParamsFormCtrl);
/** #ngInject */
function DashboardParamsFormCtrl(baConfig, layoutPaths, baUtil, $scope)
{
$scope.ParamsFormBtnClicked = function()
{
console.log("Date: " + $scope.simStartDate);
}
$scope.open = open;
$scope.opened = false;
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.options = {
showWeeks: false
};
function open() {
$scope.opened = true;
}
$scope.simStartDate = new Date();
$scope.date = new Date();
$scope.setDate = function(startDate)
{
$scope.simStartDate = startDate;
}
}
})();
Thank you.

your passing new date(); without value, it will get current date. you should pass ng-model value inside new date();
like this.
$scope.simStartDate = new Date(date);
$scope.date = new Date(date);
hope this link will help you too plnkr

Getting Date Formatted and Printed to Screen in Angular 2 App

I am trying to get the date pipe I'm using in my Angular app to parse out correctly when using it in the template within an input. Initially, before formatting the date, the code looked like this:
<input class="app-input" [readonly]="!hasAdminAccess"
[(ngModel)]="staff.profile.hireDate" placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>
The closest I've gotten with the date pipe is this:
<input class="app-input"
{{ staff.profile.hireDate | date:'shortDate' }} placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>
But what that prints to the view is this (literally this):
> <input class="app-input" 3/18/2014 placeholder="None"
> [field-status]="getPropertyStatus('profile.hireDate')"/>
Now, you'll notice that the correctly formatted date is there (and the date transformation is happening successfully, to make it this:
3/18/2014
However, I don't want the rest (obviously). How can I rework the syntax here so as to get just the date to print? I've stared at it and tried a few tweaks, but as of yet haven't been able to get it to work.

You can use the get and set functions in typescript and ngModelChanged property to modify the ngModel after it has been set.
Component Template :
<input class="app-input" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)"/>
Component Class :
import { Component } from '#angular/core';
import { DatePipe } from '#angular/common';
#Component({
selector: 'my-app',
template: `
<div>
<button (click)="setDate()">Set Date</button>
<input class="app-input" readonly="true" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)" placeholder="None"/>
</div>
`,
})
export class App {
name:string;
staff: any;
myDate: any;
private _hireDate;
dateChanged(value) {
this.hireDate = this.datePipe.transform(value, 'shortDate');
}
set hireDate(value) {
this._hireDate = this.datePipe.transform(value, 'shortDate');
}
get hireDate() {
return this._hireDate;
}
setDate() {
this.hireDate = '10-03-1993';
}
constructor(private datePipe: DatePipe) {
}
}
The value of the input will be set whenever the input changes, so it might cause a UX issue, as the user would not be able to enter his prefered date. A workaround would be to call the date changed function whenever the user has entered his date. (For eg. via a button click).
I believe the set and get functions work only for class variables, in your case you have a object property. Modifying the set function as shown below would work.
set hireDate(value) {
this._hireDate = this.datePipe.transform(value, 'shortDate');
this.staff.profile.hireDate = this._hireDate;
}
I have also added a plunkr here.

AngularJS doesn't update ng-model after jQuery event on Django admin date widget

In my current project I'm using this calendar.js javascript library together AngularJS.
I'm bind calendar.js widget and AngularJS ng-model to my input field in this way:
<input class="vDateField" type="text" ng-model="date" ng-init="date='{{ form.date.value | default_if_none:"" }}'"
vDateField is the class that bing calendars and {{ }} are backend template engine tags.
My problem is when I select the date with calendarjs picker, my input fied is updated but ng-model "date" doesn't.
Is there any solutions without modify calendarjs widget??
Here the rendered input tag:
<div>
<label class="required" for="id_date">Data contratto</label>
<input class="vDateField ng-pristine ng-valid ng-touched" type="text" ng-model="date" ng-init="date=''" name="date" placeholder="02/02/2015">
<span class="datetimeshortcuts"> Oggi | <img src="/static/admin/img/icon_calendar.gif" alt="Calendario"></span>
</div>
Here the javascript sources of the picker. DateTimeShortCuts.js contains the code for display mini link to setup current date time to my input field and a mini calendar icon to open up calendar widget.
I register the widget by adding class="vDateField" to my input tag as shown below.
DateTimeShortCuts.js
calendar.js

Had this same problem, solved it like this (example with jquery datepicker)
$('#myDateInput').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateText) {
updateDate(dateText);
},
onClose: function (dateText) {
updateDate(dateText);
}
});
function updateDate(dateText) {
var date = angular.element('#myDateInput').val();
angular.element('#myDateInput').val(date);
if (dateText) {
$scope.object.date = dateText;
}
$scope.object.dateReadable = date;
$scope.safeApply(function (childScope) { });
}
// safely apply changes to the $scope
$scope.safeApply = function (fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && (typeof (fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
Set date on page load
$("#myDateInput").datepicker("setDate", $scope.dateReadable);
HTML
<div class="form-group">
<label for="date" class="control-label">Date:</label>
<input type="date" name="date" id="myDateInput" class="form-control" />
</div>
The important thing here is that I use SafeApply to apply the changes to the $scope. Hope the example helps even tough it's a working sample for me.
Why do I have to do this? Well angular isn't aware of what happens outside its $scope, in this case jQUery. So we will have to tell it manually.
EDIT:
It might be a bit confusing with date and dateReadable but ignore the details and look at the safeApply that binds the changes to the $scope.

It will be helpful if you ask your question in more detail. However have you tried ng-init="date='{{ form.date.value | default_if_none:"" }}'" before input element?

I've solved with this directive and by set $('widget_element').trigger('change') on a callback function of 3d-part widget.
In this case, the widget is default Django Admin date widget.
contract_form_app.directive('vDateField', [function() {
return {
require: "ngModel",
restrict: "A",
link: function(scope, element, attrs, ngModelCtrl) {
element.addClass("vDateField");
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
django.jQuery('input').on('change', function() {
updateModel(element.val());
});
}
};
}]);