Breeze/Angular: date input directive not working/strange behaviour - angularjs

I'm trying to get this directive (https://github.com/eight04/angular-datetime) to work in my project. It works alright in the following plunk:
http://plnkr.co/edit/DawLbi?p=preview
But when I plug in the same code (below) into my larger scale project, it doesn't work and I have no idea why and where to search.
<input type="text" datetime="dd.MM.yyyy" ng-model="vm.firstDate" class="form-control" data-z-validate />
What happens: The input displays the formatted date correctly, but when I click on the year (or some other component) and try to change it using the number keys (enter a new year), it clears out the whole field (upon entering the first digit)! Using the up/down arrow keys works.
The problem happens only when I use the data-model on a breeze-entity. If I just put a simple js Date object on my controller and link to that one, it works.
I also tried extending my breeze entity like so:
function registerRechnungRec(metadataStore) {
metadataStore.registerEntityTypeCtor(g14EntityNames.rechnung, RechnungRec, postCtorInitializer);
function RechnungRec() {
this.datumExt = moment().toDate(); // doesn't work
}
function postCtorInitializer(rechnung) {
// this works, but not tracked by breeze then
rechnung.datumExtDate = moment(rechnung.datum).toDate();
}
// also no luck with that one:
// http://stackoverflow.com/questions/26982624/angular-and-breeze-edit-date-object
//addDateWrapperPropertyExt(RechnungRec, 'datum', 'datumExtDate');
}
A normal input with type date works just fine for entering/selecting the date. But I need to do some momentjs formatting afterwards to save the date correctly to the database then before I call entityManager.save(). Also, I don't really need the whole date picker component, a simple date input is all we need.
So how do I find out what's going wrong where?
Or is there another suggested date input directive/component, or an easier way to just have a text input field that allows me to input a date (no time) or a null date?

Related

AngularJS - memorizing chosen values in form after returing from some special state (view)

I build some form analogously to:
http://tutorials.jenkov.com/angularjs/forms.html
It means that I also use ng-model as chosen value. These values are retrieved from database - there are multiselect options.
<form>
<input type="text" name="firstName" ng-model="myCtrl.firstName"> First name <br/>
<input type="text" name="lastName" ng-model="myForm.lastName"> Last name <br/>
</form>
Controller {
constructor() {
this.firstName = getFirstNameFromDatabase();
}
}
It is sketch of my code - I wouldn't like to show it here.
It is working ok - values are retrieved from database and displayed as proposition in form.
My issue is following:
Let's assume that someone type in this form "abc". Then, someone click button next (it direct to another state, user is directed to another view - lets denote it X).
User can return from X view with back button. I would like to display "abc" (so my app should memorize chosen values).
However, if user type value "abc" and return to menu (or another else state (view) - different from next button) - in this case value shouldn't be memorized.
Can you give me some clues ?
Since you're actually switching pages in your application, you're going to have to put their content in some sort of persistent storage. A couple ideas pop into my head.
Temporary Browser Storage / Cookies
Server-side storage in a Database or Cache
Either way, you'll need to store the data whenever the user manipules the values. And when they switch pages, choose whether to clear the data or not based on whether it's your special view.
Or another idea is to use an angular function to change the url (rather than a simple anchor). Then in that function you can persist the data before switching to your view. But if they go to a different page, it won't get saved. This only works if they navigate based on your page's links.
Usually this sort of thing is accomplished using a single page which includes both your original view and the next view. You can swap out the content using JS so the user doesn't know the difference. So that's still an option too.

access angularjs form field that contains a number

I have a list of form fields that are generated as the result of an ng-repeat . As such I use the {{$index}} of the repeat loop to name the fields, i.e. ` which leads to:
<input name="myInput0">
<input name="myInput1">
<input name="myInput2">
...
etc. Now I'm trying to access the fields' $valid attribute from the form in the standard angularjs way i.e. myForm.myInput{{$index}}.$valid which resolves to e.g. myForm.myInput0.$valid which I understand won't work because it's accessing a variable and numbers won't be allowed.
However I then tried to access it with myForm['myInput{{$index}}'].$valid, e.g. myForm['myInput0'].$valid which I thought might work but still doesn't. Is there any way possible to access the form field when it contains a numeral? (or other illegal char like a hyphen)?
e: I'm using angularjs 1.2 which might explain why this isn't working. Does anyone know of a workaround for pre 1.3 angular?
The correct expression will look like myForm['myInput' + $index].$valid
I can think of two ways of workaround.
First option:
Put a ng-change on each input and validates it there manually.
Second option:
Retrieve all input elements, interate over each and validates manually
You can get them with this
var inputs = $document[0].querySelectorAll('#rankingForm input');

angular: uib-datepicker locale is not set dynamically

Consider the following setup: I have a form with a angular-bootstrap datepicker (uib-datepicker-directive), which I want to serve with different languages, such that dates are shown in different formats.
I am changing the locale dynamically with the angular-dynamic-locale-module, by using information from the state parameters.
A date object is printed with correct language-specific format using the angular date filter: {{vm.date | date:'fullDate'}}
Unfortunately the formatting for the datepicker is not working immediately. When loading the page and call a set-locale function it needs a click into the datepicker to adjust the format of the month and click to the month and back to additionally adjust the translations for the weekdays.
I have created a plunkr to demonstrate the behaviour.
http://plnkr.co/edit/2HA8LI5SzUqx2jSmUdjn?p=preview
Does anyone know this behaviour? And if so, is there a way to fix this, preferably without messing up the datepicker directive?
Thanx in advance, micoud

restrict uibDatepicker pop up to accept only digits and '-'

I have a requirement that I need to let user only enter digits and - into date picker and prevent user from entering other characters, how can I achieve this?
for example I want prevent user from entering text like asasdfas in input field for datepicker.
I used this code in parseDate function inside uibDatepicker code but view doesn't get updated.
var regex = /[^0-9\-]/g;
viewValue = viewValue.replace(regex, '');
here is a plunk to play around: http://plnkr.co/edit/AKFhTG162Ck5Blt0ZBH7?p=preview
Changing the input type to date restricts the user from inputting any extra text.
<input type="date" />
The problem is that enables the HTML5 default date picker. I have added a little css to hide that part but you would need to check it other browsers. I was unable to remove the arrows and again I will leave you to do it.
Hope it helps. I forked your PLUNK HERE

ng-maxlength preventing a valid value from being databound to input field

I have the following field in a form:
<input type="text" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />
The form is to edit an existing record. No matter what value is in the existing record, the field fails validation and the databind becomes undefined. Some example values that exist on the records are 1, 2.5, 12.5, 99.25, 4.0. I believe every one of these should pass both the pattern and maxlength validations, but it isn't working. I've checked the model and the values are present when loading the form.
When I remove the ng-maxlength directive and just have the ng-pattern, it works fine and those values pass validation. If I remove ng-pattern and just have max-length, it fails. It also doesn't matter if the INPUT is of type text or number. If ng-maxlength is present, it fails. Browser also does not make a difference (tested Chrome, IE & Firefox). I have also verified that it is the maxlength error in the error list.
I am also using ng-maxlength with almost every other field on this particular form, and they also work just fine. And if I type the exact values listed above after form load when ng-maxlength is present validates fine at that point. But that's not a reasonable workflow to make the client type the values over again every time they load the form.
I don't understand it as I use this same pattern in other forms within the app and they work fine. I can get by with just ng-pattern on this particular field, but I would much rather figure out why, in this one case, it won't validate properly on load.
I'm using AngularJS 1.2.14, with JQuery 1.9.1.
I figured it out. It was actually the INPUT type after all. After further testing, I realized my initial test of that variation was incorrect. Changing the INPUT type to NUMBER fixed the validation issues.
<input type="number" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />

Resources