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>
Related
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.
I have a problem with Datebox plugin- When I open it, today's date is not highlighted, futhermore. I set "calHighToday" option to true but it keeps on without highlighting today's date.
<input name="fechaPartido" id="fechaPartido" type="date" data-role="datebox" data-options='{"mode": "calbox", "calHighToday":true,"overrideCalStartDay": 1}'
I set up the datebox plugin with:
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox.mode.calbox.min.js"></script><<
<script src="js/jquery.mobile.datebox.i18n.es-ES.utf8.js"></script>
and the css with:
<link rel="stylesheet" href="js/jqm-datebox.min.css" />
I downloaded the current version of the plugin from http://dev.jtsage.com/jQM-DateBox/demos/install.html.
Can anyone help me?
Here is the fiddle
jsfiddle.net/manuelfc/d5wP2/
Is has to be something related with my custom theme, since, when I remove it, everything works ok.
You can check it in external files.
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
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.
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.