I have two input fields:
<input name="check_in" type="date" class="checkin"> and
<input name="check_out" type="date" class="checkout"
I want to link them so when i pick a date from check_in field i can only pick the current day or a later day (earlier days disabled). After that I have to choose a day in the check_out field and i can only choose the day chosen in check_in or a later day (Other days have to be disabled)
I have been trying several solutions and code snippets but with no result
If you are using Bootstrap datepicker, then you can assign the start date of check_out to the date on check_in. Something like
$('.checkin').datepicker({
startDate: 'd' //this means today
});
$('.checkout').datepicker({
startDate: $('.checkin').val(); //Not sure of this but you get the idea
});
Alternative, just use the daterage option, which has everything implemented already:
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
And Javascript that goes with
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
More here: https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range
This will give you exactly what you need out of the box.
Related
I am using the double-binding of the clrDate, which allows me to load a Javascript Date object. However, I need to trigger an event every time the user changes the date, either types in a new one or uses the calendar.
I've tried (click), (change), (ngModelChange), (blur) - but for some reason none of them seem to trigger.
<label for="modelDate" class="clr-control-label" >Model Date:</label>
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >
How should I capture the change within the Date Picker?
You can do it in two ways.
2-way Binding
In this stackblitz, notice that before the date picker is interaced with, if you click the button then the value of date1 is undefined. After you select a date and click the button it has the value set in the date picker. This is typical 2-way binding in Angular.
<section>
<button class="btn btn-primary" (click)="logDate1()">
Log Date Value for 2-way binding
</button>
<label for="date1" class="clr-control-label" > Date1:</label>
<input type="date" [(clrDate)]="date1" />
</section>
De-sugarized Syntax
This might be what you are after. It's almost the same as the above example but we seperate or de-sugarize the 2-way binding so that it gets set with [clrDate]=date2. Notice that it fires an event clrDateChange that can be tied into with the logChnage($event). That will get fired whenever the internal value of the date picker changes (e.g user selects a date) and you can do whatever you want with it's value in the logChange function. This is 2-way binding de-sugarized.
<section>
<h4>De-sugarized syntax</h4>
<label for="date2" class="clr-control-label" > Date1:</label>
<input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>
I am putting a slider on my web form for users to enter how much they would like to rate a certain thing.
I am using Vue.js and I am not sure how to set up a v-model on this and how to get user's entered value.
<div v-else class="form-group">
<form action="">
<label for="formControlRange">Please drag the slider to decide how much you want to rate between 1 and 10</label>
<input type="range" class="form-control-range" id="formControlRange">
</form>
<div>
You just have to add the v-model attribute to your range input:
<input type="range" class="form-control-range" id="formControlRange" v-model="value">
And define value (however you want to name it) in your component.
...
data: {
value: 50 //initial value
}
Example: http://jsfiddle.net/q0Lmv196/
I created a edit view for a EF Model and have a problem with the datepicker.
Whenever i try to edit a `dataset, the edit view don't show me the old date values.
This is my Edit.cshtml Code:
<div class="form-group">
<label asp-for="BestellungsDatum" class="control-label"></label>
<input asp-for="BestellungsDatum" type="date" class="form- control" value="#Model.BestellungsDatum" />
<span asp-validation-for="BestellungsDatum" class="text-danger"></span>
</div>
This is what it looks like, but there have to be the old value at this position:
When i change the input to type="text", the value is shown but there is no datepicker.. Any solutions on this?
type="date" generates the browsers HTML-5 datepicker if supported. The specifications require that the value be formatted in ISO format (yyyy-MM-dd) which is then displayed in accordance with the browsers culture.
Add the asp-format to format the value, and remove the value attribute (Tag Helpers correctly generate the value attribute for correct 2-way model binding and you should never attempt to add it yourself)
<input asp-for="BestellungsDatum" type="date" asp-format="{0:yyyy-MM-dd}" class="form-control" />
Note the HTML-5 datepicker is not supported in IE, and only in recent versions of FireFox. If you want a consistent UI, then consider using a jQuery datepicker instead.
Just like to add an addition to the accepted answer:
<input asp-for="BestellungsDatum" type="date" class="form-control" />
Rather than adding asp-format to the view, add DataFormatString to the data Model or ViewModel, so you don't have to add it to every view that uses it:
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime BestellungsDatum { get; set; }
I would like to know without using any plugin/library, is it possible to format bootstrap date input format.
My webservice will return ISO.DATE pattern = "yyyy-MM-dd", and bootstrap displays it in MM/DD/YYYY format. I want to change it to DD/MM/YYYY format.
Is it possible to do ? I googled and every one seem to be using some library. Since my requirement is simple, I do not want to use any library. Or do you think a library is required.
Any help is appreciated.
<div class="form-group">
<label for=displayFrom class="col-md-3 control-label"> Date </label>
<div class="col-md-4">
<form:input type="date" class="form-control" path="displayFrom" id="displayFrom"
placeholder="display From"/>
</div>
<div class="col-md-5 iserror">
<form:errors path="displayFrom"></form:errors>
</div>
</div>
You are using HTML5's date input which uses the YYYY-MM-DD format, which is unchangeable right now. Chrome and Opera uses the local computer's locale to set the format of the input, Firefox and IE uses the default YYYY-MM-DD.
Building a CMS with node, mongoDB & angularjs. I have an edit form with inputs that I want to bind to the $scope so their values are populated with existing data. Ex:
<form ng-submit="editArticle(article._id, article)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="article.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
This appropriately fills in the input values with the current data from my mongo database. However, I would like to bind to a new form scope, so it doesn't try to pass in every value in the article scope, just the new scope within the form. (Article scope currently consists of every field in the article document in Mongo. If I pass all of this data in, I get an error about invalid schema because it is trying to pass in the __v field as well.)
So ideally I want to do this:
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="form.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="form.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
So on submit, it only passes form.hed and form.dek to my database. However, now these input fields are blank because they're not bound to the original article data. The user would have to re-fill in each of the fields with the original values. Is there a way to bind to multiple models orrrr bind to a current model, but on submit only send the updated form data?
EDIT:
It looks like I have to add the ng-change attribute to each field, to populate the input fields with the original scope, then on change, set the form scope equal to the changed value. Eg.
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-change(form.article = article.hed) ng-model="article.hed" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-change(form.dek = article.dek) ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
Not sure how thrilled I am about this solution, but it works. If anyone knows a more efficient way to accomplish this please let me know!
Do a copy of the original object (or part of it) upon receiving it from DB and bind your from to it.
Coping objects before edit is a very good pattern since it allows you to easily provide additional functionality like revert edits and disable save buttons if no edit was made.