I am trying to add a calender control in knockout editable grid I have added a calender in my needed Column when the grid rendered the first row added was attached with the calender but all the dynamically added rows I add (generated with the same id) not attached with the Calender.
So what should i do ?
<td><input type="text" id="Calender" class='span11 required' data-bind="value: Date" /></td>
i'm using the following example:
http://jsfiddle.net/rniemeyer/7RDc3/
you have to do a date custom binding, if you dont want to write your own, there is a good datepicker here that is ready to work with ko. docs are not very clear but just see source code and you will there is all you need.
this is how you use it:
<input type="text" class="form-control input-sm borderless-control" placeholder="Seleccione Fecha"
data-bind="datepicker: $data.date, datepickerOptions: { format: 'LL' }" />
You will need moment js too wich is a really good library to work with dates
hope it helps!
Related
So I have this filter using Django Filter:
class AssignmentFilter(FilterSet):
assignment_date = filters.DateFromToRangeFilter()
This built in class of Django Filter generates a form with these two inputs:
<input type="text" name="assignment_date_after" id="id_assignment_date_0">
<input type="text" name="assignment_date_before" id="id_assignment_date_1">
So there you pick the two dates and based on that it will get you the filtered QuerySet. All working well.
However I would like to use this usefull DateRangePicker:
https://www.daterangepicker.com/
This gets activated like this:
<input type="text" name="dates" class="form-control">
<script>
$('input[name="dates"]').daterangepicker();
</script>
However as you can see, this is only one field where the range between the dates will be set. But Django Filter works with an start input field and end input field.
How can I modify this so that I can use the nice widget that belongs to input[name="dates"].
Maybe a solution is to process it with JavaScript after a GET request. The function will then take the start date and inject it into the id_assignment_date_0 field. And take the end date and inject it to the id_assignment_date_1 field. Both the field id_assignment_date_0 and id_assignment_date_1 will be visually hidden then in the form. It seems quite hacky though.
Does anyone have a clever solution for this?
According to this example, you can accomplish what you want like this:
<input type="text" id="datePicker" name="dates" class="form-control">
<input type="hidden" name="assignment_date_after" id="id_assignment_date_0">
<input type="hidden" name="assignment_date_before" id="id_assignment_date_1">
<script>
$(function() {
$('input[name="dates"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
$('#id_assignment_date_0').val(start)
$('#id_assignment_date_1').val(end)
});
$('#datePicker').removeAttr('name');
});
</script>
Although, the format might differ from what you need. You can also change the format with something like below:
$('#id_assignment_date_0').val(start.format('YYYY-MM-DD'))
I'm using date-range picker of ngx bootstrap and it is working totally fine. But I want to use it for month-range picker.Is there any way I can customise and use it that way?
I've tried passing property like this [bsConfig]="{ dateInputFormat: 'YYYY-MM' }" and omitting date from it but while selecting I still need to select date.
<input class="form-control" name="dob" placeholder="Date of Birth" type="text" bsDatepicker [(bsValue)]="bsValue" [bsConfig]="{ dateInputFormat: 'YYYY-MM' }">
People who are still struggling with it can set min view mode of datepicker using minMode property
For the month range picker, in this case, minMode is set to 'month'.
Refer to the official docs for working example and explanation.
https://valor-software.com/ngx-bootstrap/#/datepicker#min-mode
I"m new to AJAX requests and having these fire when a form input field is modified. I've managed to get this working well with a date input field, but have just added a 2nd form to the page which also has a date input field and now the script is firing when both fields are modified. I need to disable this so it doesn't fire on the 2nd input field.
Here's the first input field:
<td id="57944"><input type="text" id="985124" class="form-control datepicker" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
which fires this script when the date field is modified:
$(document).ready(function() {
$(".form-control.datepicker").change(function(){
I've just added this 2nd input field:
<td><input type="text" class="form-control datepicker" name="dateReceived" id="dateSigned" data-date-format="dd/mm/yyyy" placeholder="Date Signed"></td>
which is also firing the same script. I can see that both have:
class="form-control datepicker"
which is presumably the reason the script is firing for both, but I'm not sure how to change the 2nd input so that it won't fire the script (or change the $(".form-control.datepicker").change(function(){ part of the script so that it only fires when the first input is modified).
you can have a look at the eq selector .form-control.datepicker:eq(0)
that will only select the first element.
You can also try with name selector
$("input[name='dateShipped']").
change(function(){});
If you are using event's for same class the event will trigger for both, either you can use
$(".form-control.datepicker:eq(0)").change(function(){});
or
$(".form-control.datepicker:first-child").change(function(){});
I would recommend adding a class to the date fields for which you want to trigger the event. Then, make your class selector more specific when you wire up the event. This will make your code more scalable than using :eq() since you won't have to figure out which index is which control when you go to add more inputs.
<td id="57944"><input type="text" id="985124" class="form-control datepicker fire-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
$(document).ready(function() {
$(".form-control.datepicker.fire-event").change(function(event){
// handle event
});
});
Conversely, you could use the .not() selector function if you would rather add a specific class to items you don't want firing a change event:
<td id="57944"><input type="text" id="985124" class="form-control datepicker no-change-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
$(document).ready(function() {
$(".form-control.datepicker").not(".no-change-event").change(function(event){
// handle event
});
});
I'm trying to generate form fields dinamically with INSPINIA appearence, specifically INSPINIA datepicker. You can check this fields on: http://wrapbootstrap.com/preview/WB0R5L90S
First of all, I have at least one form generated with Symfony using the following code on the Type class.
{{ form_widget(form.date_from, { 'attr': {'class': 'datepicker form-control'}}) }}
This works fine, and generate the following html:
<input type="text" required="required" class="datepicker form-control" value="01-01-2017" aria-required="true">
Then, when I try to copy the entire form using JS and put the same code (cloning the form), the inspinia datepicker doesn't appears, only appears the standard text form.
It is posible to generate this datepicker using JavaScript?
Finally I fixed the problem, seems that Inspinia datepicker is based on jQuery datepicker, so.. I only need to call datepicker() function to get the code working as I expected.
More info about jQuery datepicker here: https://jqueryui.com/datepicker/
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