I have this code and it's working fine. The mindate and maxdate are defined dynamically where the selected date from the dropdown will be the maxdate and the mindate will be 14 days before the maxdate. But when I go back to the dropdown and re-select a second time, the mindate and maxdate is locked from the first selection from the dropdown.
<select id="dropdown" name="dropdown">
<option value="12/08/2012">
<option value="12/22/2012">
<option value="01/05/2013">
</select>
<input type="text" id="start_date" name="xdate">
<script>
$(function () {
$('select[name="dropdown"]').change(function () {
var bits = $(this).val().split('/');
var end = new Date(bits[2], bits[0] - 1, bits[1]);
var start = new Date(end.getTime());
start.setDate(start.getDate() - 13);
$('#start_date').multiDatesPicker({minDate:start, maxDate:end});
});
});
</script>
How can the mindate and maxdate change dynamically after selecting another range the second time? Am I missing something? Thanks! :)
To change the settings for a datepicker that has already been initialized, use:
$('#start_date').multiDatesPicker('option', {minDate:start, maxDate:end});
Related
Good afternoon everyone,
I am implementing Google Charts API in my Django project. I would like to draw two different charts, a pie chart and a table chart. I am able to display the Pie chart without problems. However, I am having trouble with the table chart. I am passing a tuple to the data.setCell() method. When I do that the table chart does not render.
Hereunder is the code that I wrote:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Company Name');
data.addColumn('number', '52 week high');
data.addColumn('number', '52 week low');
data.addRows(5);
{% for company in data_cell|safe %}
data.setCell(company);
{% endfor %}
// data.setCell(0, 0, 'John');
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '50%', height: '50%'});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
data_cell is a variable that contains a list of tuples and it is part of the context dictionary in my views.py file. As follows you can find an example; ('Facebook', 384.33, 244.61)
I have tried looping through the list of tuples without the safe method and it does not work.
Any hints?
instead of using setCell, try the addRow method...
data.addRow(company);
setCell requires three arguments --> row index, column index, and value.
you cannot pass all in one variable.
I am using the following code for datepicke in my template.
{^{datepicker fromValue readonly="true" class="myclass"/}}
{^{datepicker toValue ^_minDate=fromValue class="myclass" readonly icon="show"/}}
I tried to achieve following things.
I want to make the datepicker field readonly. For the above code it is not happening.
How to show the calendar icon within the text box. currently its not happening. icon=show...I tried it . I didn't see anywhere.
In my case I have to show the toDate and FromDate at same time. If user first selects the toValue and come back to from value , how to restrict his max date. Currently it is not restricting user.So I can able to select from date which is greater than todate.
Thanks in advance.
For a readonly datepicker, it needs to be on a div, and have _disabled=true. If it is not a div the setting _disabled=true will disable the input, so the datepicker won't show.
{^{datepicker startDate elem="div" _disabled=true/}}
For providing an icon:
{^{datepicker startDate
_showOn= "button"
_buttonImage="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
_buttonImageOnly= true
_buttonText= "Select date"
/}}
For start and end date, see http://www.jsviews.com/#samples/tag-controls/datepicker/simple
{^{datepicker startDate
^_maxDate=endDate
/}}
{^{datepicker endDate
^_minDate=startDate
/}}
From the menu I have
<cfset temp =valuelist(GetDeptNum.csedept_name)>
<cfset ChangedElement = ListGetAt(temp, 2)>
<cfset TempToo = ListSetAt(temp, 2, ",")>
<cfdump var=#TempToo#>
<li class="fullChild"><a id="corporate" href="phonelistsearch_test.cfm?corporate" onclick="changeClass('corporate')" >Corporate</a><a class="opener"></a>
<ul>
<cfloop From = "1" To = "#ListLen(temptoo)#" INDEX = "Counter">
<cfoutput><li> #ListGetAt(temptoo, Counter)#
</cfoutput>
</cfloop>
</ul>
</li>
I have a table which I use a filter to search the table, working, see http://jsfiddle.net/45grrk3m/ .
How would I link it to a table so when I click on the plus sign I can choose different choices
and it will only filter those rows in that csedept_name I click?
Both tables GetUsers and GetDeptNum share the csedept_id collumn.
So from the menu dropdown I get the name right now which works GetDeptNum.csedept_name,
but not sure how I can make the connection between the menu and table.
You need to think about how you're generating the table.
Each option in your table should be a hyperlink back to the page (or ajax....) which passes the option selected. Your SQL query would then refine the search, and the table is recreated using the refined resulty
In the display numberOfMonths: 3, when I click on a date in the second month, it is sliding left. Is there a possiblity to disable this effect?
You would want to use the default functionality for the JQuery UI Date Picker. Link below. Basically take away the animations code.
http://jqueryui.com/datepicker/#default
Delete the code that looks similiar to this:
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
I have found that on github.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/issues/9, the "slide effect" is enabled, but when you go out of the 3 selected months, it is worse than before: at each date you add, you come back to the 3 selected months.
onSelect:function (dateText, inst) {
var newDate = new Date();
inst.drawMonth = newDate.getMonth();
inst.drawYear = newDate.getFullYear();
inst.currentMonth = newDate.getMonth();
inst.currentYear = newDate.getFullYear();
}
This piece of code put the the top-left month to be always the same on each select (in this case the current month).
So still searching...
A simple issue, but I can't seem to find the answer.
I've limited the date range in jQuery Datepicker:
$( "#MyDatepicker" ).datepicker( "option", "minDate", new Date())
Is there a way to remove all restrictions for date range?
Try this $( "#MyDatepicker" ).datepicker( "option", "minDate", null).
From JQuery documentation about datepicker minDate option
Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
Using this jQuery datepick, what about
$(selector).datepick();