Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>
If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date
Related
I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';
I'm currently using the JavaScript built in date-time. The max/min constraints, however, seem to only apply when the user uses the graphical arrows to change the values. For example, if I change the day in this code using the arrows, and try to increase the day past 06-14, it will automatically reset to 06-07. However, if I set the day manually using my keyboard, I can set it to any number, disregarding the max/min (i.e. I can set the date to 06-01 if I type in 1). Is there any way to fix this?
<label for="meeting-time">Choose a time for your appointment: </label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
All html5 validation works with form on submit. If you want to validate by own, apply on submit callback function. using novalidate attribute in form
<form action="#">
<label for="meeting-time">Choose a time for your appointment: </label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
<button type="submit">Submit</button>
</form>
You will need to convert the manual input to a js Datetime object first.
const yourDate = new Date(*userinput*);
How can I compare two date fields using Parsley JS?
How can get the start date, while changing the end-date dynamically?
<input type="text" id="start-date"/>
<input type="text" id="end-date"/>
Is't simple (ParsleyJS)
data-parsley-equalto="#anotherfield"
from documentation:
Validates that the value is identical to another field's value (useful for password confirmation check).
<input type="text" data-parsley-equalto="#end-date" id="start-date"/>
<input type="text" data-parsley-equalto="#start-date" id="end-date"/>
I had an input field with type="datetime" where it has min-date condition as todays date.The flow is, if the date is valid,then submit button is enabled or else it will be in disabled state.Its working fine.
But now if the user selects the date which is invalid(old date),the date will be displayed in text box but the button will be disabled.
I want to use ng-change such that if user selects invalid date(old date),on-change event should make the text field as empty and want to display error message..How can we get this ng-change working
Html:
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.newClient.DateInput" required="true"
ng-change="$ctrl.checkdate">
controller:
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
};
Can someone help.Thanks
You can use angular-pikaday, it's easier to manage dates with this lib, so the user can select the date and you can manage it after the selection on a calendar. With pikaday you can set the min selectable date, so you can delete your checkdate function.
Read also How can we make all the past dates in the calendar unselectable? . Maybe it's another solution :)
A more user friendly solution is using datetime-local and min attribute which does not let the user to select a date before that.
Example:
<input type="datetime-local" id="exampleInput" name="input"
ng-model="example.value" min="2017-01-01T00:00:00" />
Working Plunkr
I have a decimal number input field on a modal form in which I want make sure the user inputs a value less than another base value in my application like below.
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
But somehow the ng-max does not seem to trigger this validation and set the input box invalid. What could I be missing?
I would like to keep the type to be text so the up and down arrows are not displayed. And user can enter 4 or 5 digit numbers with decimal places.
Maybe the question should be what else can I use instead of ng-max that the value is validated against the base number.
Sample plunker
http://plnkr.co/edit/9SAgqkjOlqUEHXhcyaqB?p=preview
Try changing the input type to number instead of text.
The max and min attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
<input name="mainInput" type="number" size="10" ng-model="data.baseNumber" ng-max="3" required/>
To see the style changes add CSS rule
.ng-invalid{
border: 1px solid red;
}
Plunnkr
Your program has one error also with that.
TypeError: Cannot read property '$valid' of undefined
match the name of the form, you did mismach as numberForm, modalForm
Aslo make the field as number as type
Should be
<input name="modalInput" type="number" class="form-control" size="10" ng-model="data.myNumber" required max="data.baseNumber" />
If you want to keep type="text" I think you can not use ng-max to validate text type. So you can create an event for the input ng-change="change()"
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" required ng-change="change()" />
The change() function to check max value for you when user enter
$scope.change = function(value) {
if (value> maxValue){// Do something here}
};