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);
});
Related
$(tdForDatePicker).datepicker({
numberOfMonths: [1, 1],
dateFormat: "mm/dd/yy",
defaultDate: myMinDateBegin,
minDate: {date1:'01/03/2014', date2:'06/18/2014'},
maxDate: {date1:'01/141/2014', date2: '06/30/2014'},
onSelect: function () {
$(this).focusin();
}
});
This is an example of what i am trying to do. The user has two ranges to work with mindate: '01/03/2014' maxdate: '01/14/2014' and mindate: '06/18/2014' with maxdate: of '06/30/2014'. multiDatesPicker does not work as I want in this part of my app. How can I make datepicker to give user two mindate and two maxdate options. My search in stackoverflow has not found this unique functionality.
Update: Found this solution on jQuery datepicker, custom range quirk
This is my present code:
ranges = [{ start: moment(new Date('01/03/2014')).format("MM/DD/YYYY"), end: moment(new Date('01/14/2014')).format("MM/DD/YYYY") },
{ start: moment(new Date('06/18/2014')).format("MM/DD/YYYY"), end: moment(new Date('06/30/2014')).format("MM/DD/YYYY") }];
myMinDateBegin = ranges[0].start;
myMaxDateBegin = ranges[ranges.length - 1].end;
console.log('minDateBeginOnEdit', myMinDateBegin + " " + myMaxDateBegin);
$(tdForDatePicker).datepicker({
numberOfMonths: [1, 1],
dateFormat: "mm/dd/yy",
beforeShowDay: function(date) {
$.each(ranges, function (index) {
if(date >= ranges[index].start && date <= ranges[index].end){
return [true, ''];
}
})
return [false, ''];
},
minDate: myMinDateBegin,
maxDate: myMaxDateBegin,
defaultDate: myMinDateBegin,
onSelect: function () {
$(this).focusin();
}
})
The console reveals dates as 01/03/2014 and 06/30/2014. The datepicker has all dates greyed out.
This holds the solution jQuery ui: multiple ranges for date picker?
My Code
var beGdate1start = new Date('01/03/2014');
var beGdate1end = new Date('01/14/2014');
var beGdate2start = new Date('06/18/2014');
var beGdate2end = new Date('06/30/2014');
$(tdForDatePicker).datepicker({
numberOfMonths: 1,
dateFormat: "mm/dd/yy",
beforeShowDay: function (date) {
return [(date >= beGdate1start && date <= beGdate1end || date >= beGdate2start && date <= beGdate2end), ''];
},
minDate: beGdate1start,
maxDate: beGdate2end,
//defaultDate: ranges[0].start,
onSelect: function () {
$(this).focusin();
}
})
The link gives a fiddle to play with. Thanks.
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 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
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/.