I have a set of unique requirements. I need to be able to show an entire year with hte jquery ui datepicker and then when the user picks a date, change the background color of that date and add a record to a database. This seems to work well until many dates are selected, then it seems to bog down. Is there a way for jquery ui datepicker to only render the selected cell instead of the whole calendar when a date is selected? Is there another calendar I should use for this tasik?
Have you try this:
<label>Multiple Month DatePicker: </label>
<input id="date" />
<script type="text/javascript">
$(function() {
var dt = {
numberOfMonths: 12
};
$("#date").datepicker(dt);
});
</script>
Related
I'm trying to get a slider to work in with JQuery Mobile 1.4.2.
What I would like to do is to use the slidestop event to update a value elsewhere. However, the slidestop event does not fire. I created a test file and tested in Safari and Firefox. Nothing happens when I stop sliding the slider. Could someone please tell me what tutorial I missed?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<title>Concertzender</title>
</head>
<body>
<label for="slider-step">Input slider:</label>
<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="10" />
</body>
<script>
$( "#slider-step" ).on('slidestop',function( event ) { alert("slidestop event fired"); });
</script>
</html>
EDIT:
I tried the answer suggested below, but I have a slightly more complicated setup than the example above and, therefore, it doesn't work out.
I am trying to avoid the page structure of JQuery Mobile and just use it for the slider. The thing is, when I change to another page, a pagecreate or pageshow is not present, so I cannot wait for those events. What I want is to create a new slider (or rather replace an empty div with another already existing div and then change the id of the formerly empty div's input id. So what I am left with is a unique newly ID'ed input (with corresponding label).
How would I go about and use the slidestop to interact with the new slider? I tried this:
$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});
But that gives me two sliders in Safari, of which one does the slidestop and the other is unresponsive. In iOS, however, I get one slider that slides, but does not fire a slidestop event. Omitting the first line gives me an unresponsive slider in Safari and one that doesn't fire in iOS.
So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?
You need to wrap all events/bindings in pagecreate.
$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});
Demo
I'm using standard JQM date picker with input tag like this
<input type="date" data-clear-btn="false" id="dp" value="2006-09-14">
on request here is jsfiddle example: http://jsfiddle.net/GardenOfEmuna/47VUw/
Now I want to display value in a trigger button and open datepicker upon clicking on it.
Has anyone idea how to open datepicker with a trigger button?
You are not using a jqm datepicker, since there is none. You are using the native browser datepicker control and you can't trigger it as proved in this thread
Possible solution:
I've created a jsFiddle, it uses the datepicker from jquery ui with a wrapper class as shown in the jqm documentation (link)
html
<div data-role="page" id="foo">
<div data-role="content">
<input id='myDatePicker' type="text" data-role="date">
<button id='myButton' class="ui-btn">Button</button>
</div>
</div>
js
$(document).on('pageinit',function(){
$('#myButton').click(function() {
$('#myDatePicker').datepicker( "show" );
});
});
resources
jquery.mobile-1.4.2.min.css
jquery-1.9.1.min.js
jquery.mobile-1.4.2.min.js
jquery.ui.datepicker.js
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.
I've been looking every where, and the tutorial doesn't seem to work when I use it. I saw something like getfullmonth, getfullyears etc. ... anyway, I'm using this code:
My js:
<script>
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.init = function() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", {PAGES:1});
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>
And this is my HTML:
<input type="text" value="I WANT TO PUT THE SELECTED DATE HERE" id="datechoix" class="n-input2" name="datechoix" readonly="readonly" />
<div id="cal1Container" style="margin-top:15px;"></div>
Anyone got a good tutorial or a complete answer maybe?
You have to listen to the select-date-event. It fires if a user selects a date and holds the date information as arguments.
See this example:
http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/button/btn_example09.html
How does one disable g:datePicker when the page loads?
The code is supposed disable the datePicker when a variable (isCurrent) is true.
<g:if test="${!isCurrent}">
<g:datePicker name="endDate" precision="month" value="${projectInstance?.endDate}" years="${2005..2050}"/>
</g:if>
<g:else>
<g:datePicker name="endDate" precision="month" value="${projectInstance?.endDate}" years="${2005..2050}" disabled="disabled"/>
</g:else>
Don't create the date picker in your <g:else>. Just create a hidden input. If you want it to look the same as a disabled date picker, you can build it without input elements so it will be display-only.
you can also computer wheater or not you want to disable the date picker in the backing controller and pass it into the date picker tag.
view.gsp
<g:datePicker disabled="${diabled}" .... />
controllerView.groovy
def view = {
disabled = true
if (isCurrent)
disabled = false
[disabled, disabled]
}
the javascript call above works nicely as well
disabled="disabled" is the attribute of select not datepicker. Datepicker won't pass along that attribute to your select tags. However, what you can do is to disable your selects using javascript. For example if you are using jQuery you can do something like this:
note: in my example, isCurrent is string change yours accordingly. Put this in the html body after the datepicker tag.
<script type="text/javascript">
if ("${isCurrent}"=='true'){
alert("${isCurrent}");
$("#endDate_month").attr('disabled','disabled')
$("#endDate_year").attr('disabled','disabled')
}
</script>
or just use the select tag directly.