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.
Related
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.
I'm using ASP.net MVC4 with jquery mobile.
i'm trying to change the transition page effect setting $.mobile.defaultPageTransition to 'none' in 'mobileinit' bind, but nothing happens and the default transition (slide) persists!
I even tried alter jquery.mobile-1.0.js directly and nothing changes too.
anyone have any tips?
Are you binding to mobileinit in the correct place?
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
});
</script>
<script src="jquery-mobile.js"></script>
Notice jQuery Core gets loaded first, then we bind to the mobileinit event, then the jQuery Mobile JS file is loaded.
Docs: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/globalconfig.html
Here is a demo: http://jsfiddle.net/JczRj/
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>