We Keep Coding

How to use custom DateRangePicker widget with Django Filter's DateFromToRangeFilter

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'))

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

javascript - open link when user changes date in date picker

I am using a twitter bootstrap datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
What I am trying to do is use the input value (e.g. 15-02-2012 ) to load a page, when the user changes the date.
The input box uses this code...
<div class="input-append date" data-date="12-02-2012" data-date-format="dd- mm-yyyy">
<input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
<span class="add-on"><i class="icon-th"></i></span>
And the JavaScript to reload the page is this...
<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>
The problem is when the date is changed in the date picker (input id = dp3), nothing happens, the page does not reload. But when I tried attaching myFunction() to another text box, it does work, and it is able to grab the value in the datepicker (dp3).
So the problem is that JavaScript is not recognising the change in value of the datepicker (id=dp3). Does anyone know why this is the case?

I see you took the code from the example n°3 of your link, but you switched the id to the wrong tag.
Here --.
V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
If you leave the id on the input tag and keep the original JS code, the .datepicker() method will be called on the wrong element (the input): it is meant to be called on the parent div.
Then, on your jQuery, you should bind the changeDate event of your date-picker, and not the onChange of the input tag itself.
You could try something like this (using jQuery) :
$('#dp3').datepicker().on('changeDate', function() {
//Retrieve the date located on the data of your datepicker
var datevalue = $('#dp3').data("date");
//You can take the value from the input as well if you want
//The input tag doesn't really need an ID to be retrieved (see comments)
//var datevalue = $('#dp3 input').val();
window.open(datevalue,"_self");
});
Edit : here is a working fiddle with minor changes.

Prepend object using jquery and disappear

I am writing a javascript file using jquery in order to inject the input box on the html page. However, when I inject the input on the page and within a few second the input box disappear. I am wondering why is that happen.
function injectArea(data) {
$('#test').prepend('<input type="text" class="input-block-level" placeholder=" " value="hi">');
}
P.S. I m using twitter bootstrap. not sure if that causes the problem.
when i call the function i do this:
$(document).ready(function(){
$(#button).click(injectArea);
});
This is my html:
<form class="form">
<button id ="button" class="btn btn-large btn-primary">Update Profile</button>
</form>

This fiddle shows that there is nothing wrong with prepend or the way you are using it. The issue must come from elsewhere. My guess is that you may have an AJAX callback that fires a few seconds after you call it which is overriding the change you are making to #test.
Fiddle:
http://jsfiddle.net/jy43A/
Update:
You said:
For some reason my page refresh itself.
#button is a <button> tag. Clicking on it will submit the form and refresh the page (if it targets the current page). use preventDefault(); to stop the submit default action:
function injectArea(data) {
data.preventDefault();
$('#test').prepend('<input type="text" class="input-block-level" placeholder=" " value="hi">');
}
You can see that the text box appears, then the page refreshes. This will look different in your case, but it will probably be along the same lines as this:
The effect WITHOUT preventDefault():
http://jsfiddle.net/jy43A/3/
And this works:
The effect WITH preventDefault():
http://jsfiddle.net/jy43A/2/
More info:
preventDefault info:
http://api.jquery.com/event.preventDefault/

Are you sure you're using the right method?
prepend:
<div id="a"></div>
$("#a").prepend("<span>");
<div id="a">
<span></span>
</div>
insertBefore:
<div id="a"></div>
$("#a").insertBefore("<span>");
<span></span>
<div id="a"></div>

How input and remove field with javascript?

i would like to create two buttons, one where the user can press it and then appears a drop drown and a input text field and another to remove this one, if the user wishes.
I already searched it in Google but can't find it.
Best regards,
Valter Henrique.

[working demo here: http://jsfiddle.net/GNnSw/1/][1]
your html
<div id="box" style="display:none;">
<select>
<option value="test">Test</option>
</select>
<input type="text" value="" id="text1" />
<input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />
in jQuery:
$('#show').live('click', function(){
$('#box').show();
});
$('#hide').live('click', function(){
$('#box').hide();
});
http://jsfiddle.net/GNnSw/4/

using jquery it would take something like:
<button onclick="$('form').show();">press it</button>
<form>
//input elements
</form>
Search harder in google btw.

Do it with jQuery.
HTML
<button id="buttonid" value="Click on me!">
jQuery
$("#buttonid").click(function(){
var $input = '<input id="inputid" type="text" value="value">';
// make the input field
var $select = '<select id="selectid"></select>';
// make the select
var $opt1 = '<option name="one">one</option>';
var $opt2 = '<option name="two">two</option>';
// make two options
$select.append($opt1).append($opt2);
// append to select the options
$(this).after('<form action="url" method="POST"></form>').append($input).append($select);
// append input and the select after the button
});
Oh yeah. :) Btw you need jquery library.

Create a "placeholder" for your fields:
<div id="placeholder"></div>
Add the buttons / links:
<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>
And this to your javascript-file:
function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}
function remove() {
document.getElementById('placeholder').innerHTML = "";
}

I guess the best way of achieving flexible and user friendly HTML layout it by using external JavaScript library, such as jQuery or mootools. The reason is - in traditional web frameworks after you send HTML content to web browser, server cannot manipulate with it. Also, I guess good principle is to use Java only for serving content, and using client-side framework to do all the magic with User Interface.
Moreover, You will find plenty of examples how to work with those libraries like this one.
If you would really like to stick to plain Java, since you might know anything about JavaScript, I suggest checking out Google Web Toolkit and Vaadin. You can write Java code almost without any restrictions, and it will be "converted" (compiled) to JavaScript automatically. But that decision should be considered deeply, since learning GWT or Vaading might be more time consuming and not always applicable.