I'm having an issue with the jqueryui datepicker, I have an inline datepicker on a div with numberOfMonths=3, showOtherMonths=true, and when a month have 6 weeks the month next to it have 6 week too even if it shouldn't, this extra week belong to the next month, here is an image of what i'm talking about:
extraweek image
This is my datepicker code:
jQuery("#datepicker").datepicker({
dateFormat: "dd/mm/yy",
numberOfMonths: 3,
showCurrentAtPos: 1,
firstDay: 1,
showWeek: true,
showOtherMonths: true,
selectOtherMonths: true,
defaultDate: '20/05/2016',
});
#datepicker{
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="datepicker"></div>
I would like to know if someone had already dealed with this because I didn't find any info on this issue, i've tried to delete the extra tr week once the datepicker is loaded but I prefer to seek a better solution.
Thanks a lot for any response.
Related
I try to make a scheduler using fullcalendar. I cannot find a tutorial that use vb.net. So i follow this tutorial A complete web diary system for jQuery and C# MVC by converting c# code into vb.net. But i have problem to display the calendar. I have added fullcalendar.js to my scripts folder and fullcalendar.css into content folder. But the result shows nothing. A blank page. This is my html code:
<div class="row">
<div id='calendar' style="width:65%"></div>
<script>
$(document).ready(function () {
$('#calendar').fullcalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
});
})
</script>
You need to include the CSS and JS on the page. Just adding them to the folders is probably not enough.
Include them in _Layout.cshtml (which makes them available on all pages)
Include them in the current view (this page only)
Example:
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
Also you have an unclosed <div class="row">
I am trying to add a Zabuto Calendar to my site. Is there a way to set the min and max date, similar to how the jQuery Datepicker works?
For instance, with the jQuery datepicker you can set it to have a min and max date and any date not in between those two dates is grayed out and disabled.
$("#datepicker").datepicker("option", "minDate", date);
$("#datepicker").datepicker("option", "maxDate", date2);
I can't find any documentation for the Zabuto Calendar that would have similar functionality.
Is this able to be done?
Although my answer is late, but I faced the problem and I didn't find a source in the web answering this question. Only add show_next attribute with the number of months to be shown in advance.
$("#my-calendar").zabuto_calendar({
action: function() { myDateFunction(); },
show_previous: 1, // Will show 1 month back
show_next: 3, // Will show 3 months in advance
});
According to the official website, you can limit months navigation with both show_previous and show_next parameters.
// initialize the calendar on ready
$("#my-calendar").zabuto_calendar({
today: true,
cell_border: true,
weekstartson: 0,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
},
// limit months navigation to a specific range
show_previous: 2,
show_next: 2
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-calendar"></div>
I am using the jQuery UI datepicker to display the datepicker for my mobile application. I am re using the CSS and JS files from http://jqueryui.com/datepicker/. My requirement is, when the datepicker popup it should hide the background screen and user should not have any control over the main screen until he/she chooses the date. It should work on all mobile devices. Can anybody provide the solution for this?
This is my sample HTML page that have created to test the similar functionality.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function focusTextBox(){
var a=2;
var tb = document.getElementById('datepicker');
if(a==2){
$(document).ready(function() {
$( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+18M +0D", showOtherMonths: true,
selectOtherMonths: true, dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],showButtonPanel: true });
});
}else{
$(document).ready(function() {
$( "#datepicker" ).datepicker({ minDate: 1, maxDate: "+18M +0D" });
});
}
tb.focus();
}
</script>
</head>
<body>
</br>
</br>
<input type="radio" id="myradio" name="radiobt" onClick="javascript:focusTextBox();">
<p>Date: <input type="text" id="datepicker" readonly="readonly" /></p>
</body>
</html>
You should consider using something else.
I've used mobiscroll on a project of mine. It's targeting mobile devices.
It has tons of features. What you want is called a modal display
on mobiscroll. Check it out here http://demo.mobiscroll.com/datetime/time
Select "Modal" on the "Display" selector and scroll down to see a live demo.
UPDATE
The Date & Time Scroller, Select, Image & Text and Treelist Scrollers
are under the MIT License and are free to use
from here
UPDATE 2
Jquery mobile and jquery ui don't work well in general. Since you want to solve this with datepicker from jquery ui, you either have to find a way to put the dynamic datepicker div into a dialog or when the datepicker is shown, disable the page by having a div the size of the page which will absorb all the clicks outside the datepicker and disable the functionality that exits the datepicker when click outside of it. It's a lot of work I think.
Is there any way to allow the user to select the year on the datepicker? In its default state, one has to leaf through the months to get to a different year.
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeYear: true
});
});
</script>
See this example
We have a date field that we're accepting a month and year for. However, whenever the user selects the field the jQuery UI Datepicker defaults to the current month and year, and clears out whatever they've entered.
I've switched the formatting in a test case to mm/dd/yy and the Datepicker behaves correctly, so I'm fairly confident the basic code is correct.
Any suggestions on how this can be worked around?
Example code below:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
<input type="text" id="asdf" value="07/2006" />
<script type="text/javascript">
$('#asdf').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/yy',
showButtonPanel: true
});
</script>
</body>
</html>
EDIT: To be a bit clearer, compare the Datepicker's date in the following case, where we supply a day in the input's value, and change the dateFormat option:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
<input type="text" id="asdf" value="07/01/2006" />
<script type="text/javascript">
$('#asdf').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
showButtonPanel: true
});
</script>
</body>
</html>
I thought I understood your question right the first time but the other guy got me confused. The problem seems to be that datepicker doesn't see the format mm/yy as a real datetime format, so it's confused when trying to look up the current date, meaning you have to do something kind of funky as a workaround. I'm not saying this is the best way, but it's what I've worked out.
Do note that this uses Date.js
$('#asdf').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/yy',beforeShow: function(input, inst)
{ //getter
var defaultDate = $( "#asdf" ).datepicker( "option", "defaultDate" );
//setter
$( "#asdf" ).datepicker( "option", "defaultDate", Date.parseExact($("#asdf").val(), "M/yyyy"));
} });
It looks like it doesn't treat a month or year change as a 'select' operation, but does change the month/year when you click on a day. In other words, if you change the month and year but don't click on a day, it thinks you cancelled the operation.
You could try writing some code for the onChangeMonthYear event (docs) to read the selected month/year and close the calendar dialog yourself.