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
Related
Can I change year in calendar from A.D. to B.E. in primefaces 3.5
I once used JQuery datepicker with BE calendar and i used https://code.google.com/p/jquery-ui-datepicker-extension-buddhist-era/
and because primefaces does use JQuery datepicker try to include this extension after jquery and add in your page:
<script type="text/javascript">
$(document).ready(function(){
$( ".datepicker").datepicker({
isBE: true,
autoConversionField: true
});
});
</script>
This should do the trick.
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.
So, I'm pretty new to javascript and jquery. I was using the jquery ui to make an accordion navigation bar. It worked fine when I just had the heightStyle set, but then I tried to add collapsible: true and it changed from an accordion to just headers and unordered list.
<script type="text/javascript" >
$(function() {
$( "#accordion" ).accordion({
collapsible: true
heightStyle: "content"
});
});
</script>
You're missing a comma between the properties of the options object. This causes a syntax error in your Javascript, preventing the code from running, thus leaving the markup unchanged as you describe.
The correct syntax would be:
<script type="text/javascript" >
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
});
</script>
Also, note you can usually debug JS errors in your browser's errors console. In Chrome and Firefox for example, the debug console can be launched with Ctrl+Shift+J or if you're using a Mac with Cmd+Shift+J.
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.
In my web site, I have two date inputs,
<label>From : </label><input class="datepicker" id="from" name="from" value="<?php echo $from;?>" size=11 type="text">
<label>To : </label><input class="datepicker" id="to" name="to" value="<?php echo $to ;?>" size=11 type="text">
And in the javascript part, I have the following code
$(function() {
$( ".datepicker" ).datepicker({ altFormat: 'yy-mm-dd' });
//getter
var altFormat = $( ".datepicker" ).datepicker( "option", "altFormat" );
//setter
$( ".datepicker" ).datepicker( "option", "altFormat", 'yy-mm-dd' );
});
But when I select the date, it still returns a date with 04/04/2012 format instead of yy-mm-dd.
How should I solve this problem ?
Thanks
Lol, here we go again. first of all:
altFormat: The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
dateFormat: The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see theformatDatefunction.
See Working jsFiddle Here
You might also want to see an answer i gave a few minutes ago here, with more fiddles.