I am using django-bootstrap-datepicker-plus package, and I am trying to display an alert when the date is changed. However, jquery does not seem to detect any changes to the date.
Following this question Detect change to selected date with bootstrap-datepicker only works when I add the JQuery UI CDN to my code, which causes a problem as two datepickers appear. Is there a way to get JQuery to detect a change in django-bootstrap-datepicker without adding JQuery UI code?
forms.py
from django import forms
from bootstrap_datepicker_plus.widgets import DatePickerInput
class ExampleForm(forms.Form):
DOB = forms.DateField(required=False, label="Date of Birth",
input_formats=['%d/%m/%Y'],
widget=DatePickerInput(format='%d/%m/%Y')
)
Html
<div class="col-12 col-md-6 mb-0 p-1">
{{ form.DOB|as_crispy_field }}
</div>
Rendered HTML
There is a lot of JS packages with similar [date,time]picker functionality. django-bootstrap-datepicker-plus uses eonasdan picker, according to the docs. They use different event names. Eonasdan implementation prefixes all events with dp. namespace, as stated here, so the following should work:
$('#id_DOB').on('dp.change', ev => myHandler(ev));
Related
I have been searching for an easy way to make a month/year picker for an ASP.NET Core application I'm making. I found this fantastic one on jsfiddle. It uses the following resources:
bootstrap-datepicker.min.js
datepicker.min.css
bootstrap.min.js
bootstrap.min.css
Here is the code:
var startDate = new Date();
var fechaFin = new Date();
var FromEndDate = new Date();
var ToEndDate = new Date();
$('.from').datepicker({
autoclose: true,
minViewMode: 1,
format: 'mm/yyyy'
}).on('changeDate', function(selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
$('.to').datepicker('setStartDate', startDate);
});
$('.to').datepicker({
autoclose: true,
minViewMode: 1,
format: 'mm/yyyy'
}).on('changeDate', function(selected) {
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('.from').datepicker('setEndDate', FromEndDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 input-sm from" placeholder="CheckIn">
</div>
<div class="form-group">
<label>First check out:</label>
<input type="text" class="form-control form-control-2 input-sm to" placeholder="CheckOut">
</div>
<br/>
<div class="form-group">
<label>Second check in:</label>
<input type="text" class="form-control form-control-1 input-sm from" placeholder="CheckIn">
</div>
<div class="form-group">
<label>Second check out:</label>
<input type="text" class="form-control form-control-2 input-sm to" placeholder="CheckOut">
</div>
I have made this work in my project in Visual Studio, however, it doesn't seem to be able to find the classes "form-control-1" (and 2) and "from" and so it gives me a little squiggly line indicating so.
I started looking through all the css files included and I cannot find a reference to those classes in any file. If I remove them, the month selector does not work. Can someone help me understand where that functionality is coming from? Does anyone know where those classes are defined?
The from and to are not being used for styling, they are being used in the code that you posted. $('.from').datepicker() $('.to').datepicker().
You can safely delete the form-control-1 and form-control-2 classes.
Those classes can be fuctional classes, not attached to any styling but used to select or manipulate the elements.
Thats probably why you wont find anything. Search through the js files and you will find something.
Since removing the class breaks the functionality, it's probably being referenced from JS. It may be that the JS is calculating the name of the class, something like "form-control " + i for example.
Your best bet to see where this is defined is to use the browser inspector. For example, in Chrome, right-click the page and choose "inspect" to get this UI, which shows you each css class and where they are declared or re-declared in the css hierarchy.
When using Javascript it can be very useful to use CSS classes which are not attached to any styling, but are instead used as semantic references for jQuery selectors to use later.
This can be very useful when trying to attach multiple semantic meanings to an element. You can have one element can have many semantic tags. I use this in complex components to be able to dynamically tag elements that I can later manipulate or check the class name. This is especially useful if you are generating elements from a server-side language and trying to tag them semantically so that they can be manipulated later from Javascript/jQuery. It think it is much easier to add a dynamic class string from the server side than to put in data attributes.
One example of this that I use is for validation information to be attached to an element. I generate the elements in a server-side class (including what type of validation it should have) which outputs a CSS class string, then when I submit the form in Javascript, I get all elements with specific classnames and check if their contents match the validation type.
The code sample you posted does a similar thing, where it wants to use a jQuery plugin on all elements with a certain class. Instead of direct styling, it uses them as semantic markers that those elements should be transformed in a certain way to be datepickers (which are documented here: https://jqueryui.com/datepicker/). Code for jQueryUI uses this a lot to be able to simplify which elements should be used-- and it can be easier to add new elements that are datepickers, since you simply add a class to the new one instead of having to add a new jQuery reference to it (especially if you don't know exactly how many of them there will be on the page when you write the Javscipt code).
If you are ever in a similar instance and looking for a different way to store data on elements without inadvertent effects and it is pure Javascript without server side rendering, data-* attributes in HTML5 are a way to do it (and a simple library could be developed to add them to elements from a server side language). Just use jQuery selectors with jQuery("[data-mytagname=someValue]") to select.
A word of caution that if you use classes like this as semantic tags, I would be careful to avoid commonly used class names, since you could inadvertently get extra styling when a co-worker (or yourself) decides to use that in an element. ;)
I have an ASP.net MVC project. All of my DropDownListFor's display as 2 boxes instead of 1. This is what the view looks like currently:
This is what the view SHOULD look like:
Here is the code from the view:
<div class="col-xs-12 col-sm-6 col-md-4 ">
<div class="form-group select-280">
#Html.LabelFor(model => model.HoleID)
<br />
#Html.DropDownListFor(model => model.HoleID, (List<SelectListItem>)ViewData["HoleList"], new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.HoleID)
</div>
</div>
Javascript from the view to make the DropDownListFor Searchable (Select2):
$(document).ready(function () {
$("#HoleID").select2();
}
Why are all of my DropDownListFor's displaying as duplicates, and how can I correct this bug?
EDIT
Removing the .select2() fixes the bug and removes the duplicate dropdown... however that makes the remaining dropdown not searchable. how can I fix this while still maintaining the search functionality?
I've experienced this using Kendo, and it's all around the form-control. The issue is the dropdown gets transformed into something more dynamic; the original SELECT element might actually get hidden in the UI. Select2 is probably using multiple elements to represent the select, and the original form-control class gets applied to both elements, and forces them to show, instead of show and hide. Or the form-control class is forcing the original select to show.
I had to stop using form-control, and then create a special class just for kendo controls just to not cause one of the elements to always show...
The way to figure that all out is inspect the markup. You'll see the form-control class getting passed down to the internal elements.
This was determined to be a server error via the Visual Studio publish process. The bootstrap select2 files were not existing correctly in the server.
I am new in materialize CSS framework and I am looking for searchable select.
I have added select component but now I want it to be searchable so that user can search value from dropdown options and select the value.
Thanks in advance
Another solution to this problem is to set minLength:0 when using Autocomplete - this essentially triggers the dropdown options on focus, and allows for searching or selecting.
The HTML:
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
The JS:
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
minLength: 0,
});
Codepen here.
I have been searching for this option for quite a while. After digging deeper into materialize Git Hub threads found this answer from LeMinaw
he got everything nailed out. but he was using a custom materialize file and also it wasn't working on the mobile. So, I have modified the code to fix mobile issue. Please use import the following script file after you imported the Materialize.js file MaterilizeSelect.js.
and format your select as following
<div class="input-field col s6">
<select data-id="26" id="MySelct" serachname="myselectsearch" searchable="your placeholder for seach box">
<option value="some1">Some One</option>
<option value="SeamSeam">SeamSeam</option>
<option value="toott">Toott</option>
<option value="Flat">Flat</option>
</select>
<label for="roof_type">My Select</label>
</div>
serachname --> A meaning fullname for search box
searchable --> placeholder your search box(label)
Hope this helps. Once again thanks to LeMinaw
There is an open issue on github.
LeMinaw's solution:
Improvements :
No need to modify Materialize JS files Grabs keyboard focus nicely No
need for annoying JQuery Renders correctly for any widget width Demo
The code is avalaible in this gist :
https://gist.github.com/LeMinaw/52675dae35531999e22f670fb66d389b
To use it, just load this JS file and add searchable="placeholder" to
your select element.
Materialize's search option just isn't great. You could work with these to try to "fix" it, but you're better off just utilizing a better select javascript package, like Select2, which does all this easily. https://select2.org/getting-started/installation
I use materialize for lots of things, but always strengthen it with Select2 (and some other form UI libraries).
I have this piece of html code in my application (the ng-app and ng-controller values are defined before):
<div>
<label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
<input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
<img ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>
My AngularJS controller looks like this:
function ProjectSearchCtrl($scope) {
$scope.startDate = '';
$scope.hasStartDate = function () {
return $scope.startDate != '';
};
$scope.clearStartDate = function () {
$scope.startDate = '';
};
$scope.dateOptions = {
dateFormat: "yy-mm-dd",
showOn: "focus"
};
}
This works perfectly: I have a datepicker set up correctly thanks to AngularUI, the AngularJS binding works...
But if I change the showOn value to "button" or "both" (the two possible options which will actually show the datepicker button), everything after the input (containing the ui-date attribute) stops working: ng-show, ng-click... The controller doesn't even get called.
Versions (all is up-to-date):
jQuery 1.7.2
angularJS 1.0.0
angularUI 0.1.0
Chrome 20
Please take a look at this line in the Select2 directive. This is a note to ANYONE writing a directive / implementing a plugin in AngularJS (not just AngularUI):
Any plugin that injects a new DOM element immediately after the linked element runs the risk of disrupting the compiler. The reason is because the way AngularJS works, it caches the index of each DOM element at compile time, and then makes a second pass upon linking. When you inject new DOM, you offset the index of all siblings immediately after the directive.
For this reason, I've been forced to wrap both TinyMCE and Select2 in a setTimeout so that the DOM is injected after the linking is done. Note that I don't bother using $timeout because I really don't need/want $apply() to fire just to turn on the plugin, as there are already callbacks in place that do this when the plugin changes the data.
I'll look into making sure this is uniform across AngularUI. Unfortunately, there appears to be no elegant solution to this problem in AngularJS at this time, however it's a problem I've been thinking about for some time and am constantly looking for a better solution towards.
Read this Google Groups post for more information about compiling vs linking: https://groups.google.com/forum/?fromgroups#!searchin/angular/compile$20link/angular/RuWn5W3Q5I0/KJhcQJ_RNsIJ
You can also open a bug ticket on the AngularUI project in the future.
As suggested by Pete BD in his comment on the question, there is some kind of bug/unwanted behaviour in the way that jQueryUI and angularJS interact. A workaround is to wrap the input control in a div.
<div class="date">
<label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
<div>
<input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
</div>
<img class="clear" ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>
Now I can use showOn "both" or "button".
This is fixed in the latest release!
I am trying to implement JQuery Autocomplete plugin using Django.
I've been able to wire the thing together and I can actually see the result back in the HTML template.
My problem is that the JQuery Autocomplete CSS doesn't seem to work.
The results I get are not well-formatted/styled, have no background and you cannot even select them.
What is it that I am missing?
I have these three files in my media folder the same folder:
autocomplete.js
dimensions.js
autocomplete.css
In my html template I have the following function:
$(function(){
setAutoComplete("tags", "tagResults", "/taglookup/?query=");
});
My textfield looks like this;
<input type="text" name="tags" value="">
Where do I put the tagResults in my HTML template document? Every time I try to introduce a DIV with id="tagResults", JQuery throws an error.
Any ideas?