I'm using the jQuery datepicker from jqueryui.com and I have a problem changing the calendar to Swedish, I have this code:
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.datepicker.regional['sv']);
$("#StartDate").datepicker();
$('#StartDate').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
</script>
Still it shows as an English calendar.
What might be missing?
Maybe you don't have a language file:
Language files are here: https://github.com/jquery/jquery-ui/tree/master/ui/i18n
A new localization should be created
in a separate JavaScript file named
ui.datepicker-.js. Within a
document.ready event it should add a
new entry into the
$.datepicker.regional array, indexed
by the language code, with the
following attributes:
http://api.jqueryui.com/datepicker/
This is for the dutch people.
$.datepicker.regional['nl'] = {clearText: 'Effacer', clearStatus: '',
closeText: 'sluiten', closeStatus: 'Onveranderd sluiten ',
prevText: '<vorige', prevStatus: 'Zie de vorige maand',
nextText: 'volgende>', nextStatus: 'Zie de volgende maand',
currentText: 'Huidige', currentStatus: 'Bekijk de huidige maand',
monthNames: ['januari','februari','maart','april','mei','juni',
'juli','augustus','september','oktober','november','december'],
monthNamesShort: ['jan','feb','mrt','apr','mei','jun',
'jul','aug','sep','okt','nov','dec'],
monthStatus: 'Bekijk een andere maand', yearStatus: 'Bekijk nog een jaar',
weekHeader: 'Sm', weekStatus: '',
dayNames: ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],
dayNamesShort: ['zo', 'ma','di','wo','do','vr','za'],
dayNamesMin: ['zo', 'ma','di','wo','do','vr','za'],
dayStatus: 'Gebruik DD als de eerste dag van de week', dateStatus: 'Kies DD, MM d',
dateFormat: 'dd/mm/yy', firstDay: 1,
initStatus: 'Kies een datum', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['nl']);
You need to do something like this,
$.datepicker.regional['fr'] = {clearText: 'Effacer', clearStatus: '',
closeText: 'Fermer', closeStatus: 'Fermer sans modifier',
prevText: '<Préc', prevStatus: 'Voir le mois précédent',
nextText: 'Suiv>', nextStatus: 'Voir le mois suivant',
currentText: 'Courant', currentStatus: 'Voir le mois courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
'Jul','Aoû','Sep','Oct','Nov','Déc'],
monthStatus: 'Voir un autre mois', yearStatus: 'Voir un autre année',
weekHeader: 'Sm', weekStatus: '',
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
dayStatus: 'Utiliser DD comme premier jour de la semaine', dateStatus: 'Choisir le DD, MM d',
dateFormat: 'dd/mm/yy', firstDay: 0,
initStatus: 'Choisir la date', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['fr']);
for sv data follow the following link
http://code.google.com/p/logicss/source/browse/trunk/media/jquery/jquery.ui.i18n.all.min.js?r=41
You need the following line:
<script src="../jquery/development-bundle/ui/i18n/jquery.ui.datepicker-sv.js"></script>
Adjust the path depending on where you put the jquery-files.
Here is example how you can do localization by yourself.
jQuery(function($) {
$('input.datetimepicker').datepicker({
duration: '',
changeMonth: false,
changeYear: false,
yearRange: '2010:2020',
showTime: false,
time24h: true
});
$.datepicker.regional['cs'] = {
closeText: 'Zavřít',
prevText: '<Dříve',
nextText: 'Později>',
currentText: 'Nyní',
monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
'září', 'říjen', 'listopad', 'prosinec'
],
monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
weekHeader: 'Týd',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['cs']);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="datepicker-cs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log("test");
$("#test").datepicker({
dateFormat: "dd.m.yy",
minDate: 0,
showOtherMonths: true,
firstDay: 1
});
});
</script>
</head>
<body>
<h1>Here is your datepicker</h1>
<input id="test" type="text" />
</body>
</html>
Include language file source in your head script of the HTML body.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
Example on JSFiddle
A quick Update, for the text "Today", the right names are:
todayText: 'Huidige', todayStatus: 'Bekijk de huidige maand',
Try Adding this
$('input[name="daterangepicker"]').daterangepicker({
"locale": {
"firstDay" :1 // 0 Tuesday - 6 - Monday between
}});
It must be completed within the locale object of the defined daterangepicker.
detailed information can be found here.
In 2020, just do
$.datetimepicker.setLocale('en');
Of course, replace 'en' with the correct language ('sv', 'fr', ...)
Include js files of datepicker and language (locales)
'resource/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
'resource/bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.sv.min.js',
In the options of the datepicker, set the language as below:
$('.datepicker').datepicker({'language' : 'sv'});
Related
I implemented in my app a JQ Datepicker calendar on its default version, but I cannot understand how to show in the input field always the date the today date to be precise. Now when I open the page where is the datepicker, the input field is blank until I select the date I need.
What I would like to see is that the date is always visible on the input filed if that possible.
My Datepicker:
//Date Picker
$("*[data-behavior~=shipping-date-input]").datepicker({
onSelect: function() {
digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
altField: "#recorded-at-alt",
dateFormat: "yy-mm-dd",
minDate: "-1Y",
maxDate: "+1Y"
});
Screenshot of what I mean as you see the input is blank in his initial state:
To populate the value of the text field, you can use $.datepicker.formatDate( format, date, options ) feature. here is an example:
$(function() {
var dtFt = "yy-mm-dd";
$("#datepicker").datepicker({
onSelect: function() {
/*digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
*/
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
//altField: "#recorded-at-alt",
dateFormat: dtFt,
minDate: "-1Y",
maxDate: "+1Y"
}).val($.datepicker.formatDate(dtFt, new Date()));
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
As you can see, we populate the text field value, $("#datepicker").val();.
Hope that helps.
When I activate the jQuery UI I would like to have a default value, both for 'to' and 'from' that is today's date, and how should I do it based on the code below?
'http://jsbin.com/ceyuhudajo/edit?html,output'
$(function() {
$( "#from").datepicker({
showWeek: true,
firstDay: 1,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
showWeek: true,
firstDay: 1,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Thanks!
You should delete:
defaultDate: "+1w"
which sets the default date to be one week ahead.
On this part of code of the Chosen component (http://harvesthq.github.io/chosen/), i translated to portuguese, and have this characters "ç" and "ã".
AbstractChosen.default_multiple_text = "Selecione algumas opções";
AbstractChosen.default_single_text = "Selecione uma opção";
AbstractChosen.default_no_result_text = "Desculpe, mas nem uma opção foi encontrada os termos digitados.";
The browser are rendering a "?"
I tried to use the html codes for this characters, but don't work.
You can try to import chosen.js file adding charset tag like below;
<script type="text/javascript"
src="http://harvesthq.github.io/chosen/chosen.jquery.js"
charset="utf-8">
</script>
I just put this to work:
<script>
$(document).ready(function () {
$(document).tooltip();
$(".chosen-select").chosen({
allow_single_deselect: true,
disable_search_threshold: 10,
no_results_text: 'Nada encontrado!',
placeholder_text_single: 'Selecione uma opção',
placeholder_text_multiple: 'Selecione as opções',
width: "200px"
});
$('.chosen-results').css({ "max-height": "100px" });
});
</script>
I am trying to get the Datepicker Calendar Icon to appear next to the input textbox. However, using 'id=datepicker' I can only get it to appear next to the Departure Date's textbox, but not next to the Return Date's textbox. This is because I am using 'id' twice, however when I switch it to 'class=datepicker' the Icon disappears from both.
<html>
...
<head>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/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() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
});
</script>
...
</head>
<body>
...
<strong>Departure date</strong><span>*</span>:
<input type="text" id="datepicker" name="departuredate"/>
<strong>Return date</strong><span>*</span>:
<input type="text" id="datepicker" name="returndate"/>
...
...
Do not:
Include the same JavaScript (either minified or not) multiple times in the one page.
Assign the same ID to multiple elements in the one page.
If you do the following (note the different IDs):
<strong>Departure date</strong><span>*</span>:
<input type="text" id="dDatepicker" class="datepicker" name="departuredate"/>
<strong>Return date</strong><span>*</span>:
<input type="text" id="rDatepicker" class="datepicker" name="returndate"/>
Then this will work:
$(function() {
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
});
Fiddle here.
Edit
You may also need to check your CSS, as the datepicker class may be overridden. Maybe try including onlynone jquery-ui.css to test.
If it is just a case of the calendar icon not rendering, then you need to specify the correct path to the calendar.gif file. So say you can see the file in your browser when you go to http://mysite.com/path/to/images/calendar.gif
You then need to set up datepicker like so:
$(function() {
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "/path/to/images/calendar.gif",
buttonImageOnly: true
});
});
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true
});
});
</script>
I am using JQuery's UI datepicker: http://jqueryui.com/demos/datepicker/
implemented here:
http://www.clients.eirestudio.net/old/
I want to use a link as the trigger but I can't get it to work.
Here is my code:
// JQuery UI
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy'
});
<p class="clearfix hidden">
<input id="" class="input float datepicker" type="input" name="" value="" />
<a class="calendar ui-icon ui-icon-calendar">Date</a>
<span class="mid-info">To</span>
<input id="" class="input datepicker" type="input" name="" value="" />
<a class="calendar" href="#">Date</a>
</p>
Any ideas?
You could do something like I did in this fiddle
HTML:
Toggle
JS:
var $dp = $("<input type='text' />").hide().datepicker({
onSelect: function(dateText, inst) {
$("body").append("<div>Selected "+dateText+"</div>");
}
}).appendTo('body');
$("#toggleDP").button().click(function(e) {
if ($dp.datepicker('widget').is(':hidden')) {
$dp.show().datepicker('show').hide();
$dp.datepicker("widget").position({
my: "left top",
at: "right top",
of: this
});
} else {
$dp.hide();
}
//e.preventDefault();
});
I just solved this very easily in my app -- if you have your datepicker open with a text field, you can use this solution too. I added a $('#date_field').focus() link to the icon. Click the icon, the text field gets focus and that triggers the datepicker to open. Voila.
Try using:
Text here
<input type="hidden" id="inputID"/>
...
<script type="text/javascript">
$(document).ready(
function()
{
$('#inputID').datepicker();
}
);
</script>
This might help somebody else.
I ended up getting it to work with JQuery UI.
Code below:
$(".date-pick").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'http://www.example.com/elements/images/calendar.png',
buttonImageOnly: true
});
and I changed the datepicker id to date-pick class
Based on #camilokawerin answer, I did this and I find it the easieast and cleanest solution:
HTML:
Click <div id="datepicker" style="display:none"></div>
JS:
$("#datepicker").datepicker();
$('#selec').click(function(){
$('#datepicker').toggle();
});
From jqueryui, it seems like you should add showOn and maybe (don't know if it's required) buttonImage:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'images/calendar.gif', // adapt this to your image
buttonImageOnly: true
});
With inline datepicker is pretty easier to do this. Check my JSFiddle.
HTML
Pick a date
JS
var dpToggler = $('a.datepicker').button(),
dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);
dpToggler.on('click', function(e) {
e.preventDefault();
if (dp.is(':hidden')) {
dp.show().position({
my: 'left top',
at: 'right top',
of: this
});
} else {
dp.hide();
}
});