I am trying to use Date picker in a frame (main page is composed of 2 frames) and when I click in the textbox the calendar appers in the same frame, drops down with scroll so that it is invisibile (you need to scroll to see it). I want to make it to drop over all the frames. The code I use is the following:
$(function() {
$('#datepicker').datepicker({minDate: '0', maxDate: '+1Y+6M', onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$('#datepicker2').datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}});
$('#datepicker2').datepicker({minDate: '0', maxDate: '+1Y+6M', onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
}});
});
All comments will be very appreciated.
<script type="text/javascript" language="javascript">
//datetimepicker
$(function () {
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd M yy',
showAnim: 'slideDown'
});
});
</script>
<asp:TextBox ID="txtentrydate" CssClass="datepicker" runat="server" Width="200px"></asp:TextBox>
this code for desired textbox calender
Related
i have used jquery-ui datepicker in my application. I want to count a week number with date type "dd-mm-yy" but it giving me a wrong week number i realize that it uses "mm-dd-yy" date type to calculate week number.
i have used bellow code :
<input type="text" class="calendar">
<input type="text" class="week">
$(function() {
$(".calendar").datepicker({dateFormat: "dd/mm/yy",
showWeek: true,
onSelect: function(dateText, inst) {
dateFormat: "'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)),
$(".week").val('Week:' + $.datepicker.iso8601Week(new Date(dateText)));
}
});
$(".calendar").datepicker("setDate", new Date());
});
here is a also a JSFiddle for it
Use inst to get selectedYear, selectedMonth and selectedDay and construct a Date from those values instead of the dateText.
Here is the code:
$(function() {
$(".calendar").datepicker({
dateFormat: "dd/mm/yy",
showWeek: true,
onSelect: function(dateText, inst) {
var newDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
dateFormat: "'Week Number '" + $.datepicker.iso8601Week(newDate),
$(".week").val('Week:' + $.datepicker.iso8601Week(newDate));
}
});
$(".calendar").datepicker("setDate", new Date());
});
Here is the updated JSFiddle.
add this link to JSFiddle resources
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.js
now run this code only
$(document).ready(function(){
var weekday = moment("12-25-1995", "MM-DD-YYYY").week();
alert(weekday);
});
I'm looking for sample code for using a Google Sheet as the source data and make a fairly simple line chart using Google Visualization.
I noticed that the new Google Sheets don't include a script in the "Share Chart" function, they offer a IFRAME and the width/height doesn't work. So, I'm looking to do it with Google Visualizations.
Here is my sample chart.
Thank you for the help.
Edited...
Here is my spreadsheet.
Here is my HTML file.
<html>
<head>
<script type="text/javascript">
function drawChart() {
var query = new google.visualization.Query('http://docs.google.com/spreadsheet/tq?key=14MXilv-uhEAUxDzVB7qVCCmQYqkmWvqqaBOXeBsS04k&gid=0');
query.setQuery('SELECT A, B, C, D, E');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.querySelector('linechart'));
chart.draw(data, {
height: 400,
width: 600
});
});
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawChart
});
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id="linechart"></span>
</body>
</html>
It doesn't draw. I've tried various selection in the spreadsheet like avoiding column A, no go. What am I doing wrong?
Here's some example code to get you started:
function drawChart() {
var query = new google.visualization.Query('http://docs.google.com/spreadsheet/tq?key={spreadsheet key}&gid=0');
query.setQuery('SELECT A, B, C');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600
});
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
You would need to replace the {spreadsheet key} in the URL with your own spreadsheet key (eg: 'http://docs.google.com/spreadsheet/tq?key=1234567890&gid=0') and change the query to select the appropriate columns from your spreadsheet.
In your page's HTML, you need to have a container div that matches the ID used when creating the chart ('chart_div' in this case):
<div id="chart_div"></div>
I have a problem with my datepicker. When I focus the text field it shows properly, but when I click anywhere else in the screen (to make it dissapear), then if I focus again the text field without previously selecting another element, the datepicker doesn't show.
Here is the code:
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var day = $("#datepicker").datepicker('getDate').getDate();
var month = $("#datepicker").datepicker('getDate').getMonth() + 1;
var year = $("#datepicker").datepicker('getDate').getFullYear();
$(this).datepicker('setDate', new Date(year, month, day));
}
});
});
The problem is in your onClose function. When you call $("#datepicker").datepicker('getDate').getdate(), you run the possibility of calling getDate() on null.
The following should fix the problem, hope it works for you =)
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var getdate = $('#datepicker').datepicker('getDate');
if(getdate) {
var day = getdate.getDate();
var month = getdate.getMonth() + 1;
var year = getdate.getFullYear();
$('#datepicker').datepicker('setDate', new Date(year, month, day));
}
}
});
});
Edit: here's the jsfiddle if you need a working proof of concept: http://jsfiddle.net/jcolicchio/fpS2Q/
var birthDate;
$(function() {
var currentDate = new Date();
$("#BirthDate").datepicker({
dateFormat: "mm/dd/yy",
showOn: "button",
buttonImage: "../Images/cal.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
maxDate: currentDate,
yearRange: "-90:+10",
onSelect: function(dateText, inst) { birthDate = dateText;}
});
});
$(function() {
var currentDate = new Date();
$("#MaritalStatusDate").datepicker({
dateFormat: "mm/dd/yy",
showOn: "button",
buttonImage: "../Images/cal.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
minDate: birthDate,
maxDate: currentDate,
yearRange: "-90:+10"
});
});
In the above code I am trying to disable $("#MaritalStatusDate") dates based on the date selected in $("#BirthDate"). I am using the onSelect event in BirthDate to identify the selected date and I'm storing the value in a variable which is globally declared. Using the variable I have set the minDate in $("#MaritalStatusDate"). But the dates are not getting disabled based on minDate value. Do I need to change the date format while assigning the value to the variable? Can anyone please help me in doing this?
You can simply set the minDate for $('#MaritalStatusDate') in onSelect event.
$("#BirthDate").datepicker({
...
onSelect: function(dateText, inst) {
$('#MaritalStatusDate').datepicker('option', 'minDate', dateText);
}
});
See this in action: http://jsfiddle.net/william/2q7TN/.
I'm trying to trigger the creation of a new BarChart with Google's Chart API when a user clicks on a particular bar. I think I understand the concepts, and wanted to at least get the getSelection() function to work and display what bar the user clicked on. But everytime, when you click on the bar, it just freezes with the display and no java alert. Any thoughts?
Here's the code:
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var visualization = new google.visualization.BarChart(document.getElementById('acctmeta'));
var json_data = new google.visualization.DataTable({{acctmeta_json}});
visualization.draw(json_data, {width: 850, height: 600, title: 'Collection Level Populated Metadata Fields',
chartArea: {width:"50%"},
vAxis: {title: 'Collection Title/ID', titleTextStyle: {color: 'green'}},
hAxis: {logScale:false, title:'Fields Populated', titleTextStyle: {color: 'green'}}
});
// Add our selection handler.
google.visualization.events.addListener(visualization, 'select', selectHandler);
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
alert(data.getValue(chart.getSelection()[0].row, 0));
}
} //end of draw chart function
</script>
Just wondering, should the line
alert(data.getValue(chart.getSelection()[0].row, 0));
be
alert(data.getValue(visualization.getSelection()[0].row, 0));
?
Here is a working example of mine. I had to set data and chart as global variables:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
var data;
var chart;
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Where');
data.addColumn('number', 'What');
data.addRows([['ABC',87],['ERT',70],['KLJ',38],['UPP',-67],['SSD',27],['UKG',42],['NUS',60],['WEB',96]]);
var options = {'title':'my chart','width':'600','height':'400','is3D':'true'};
chart = new google.visualization.ColumnChart(document.getElementById('test3_chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler2);
}
function selectHandler2() {
var selection = chart.getSelection();
alert('That\'s column no. '+selection[0].row);
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id=test3_chart>Please wait...</div>
</body>
</html>