I am using a mootools datepicker & I am working on a french page. My date picker works. I choose a date & it saves to database. If you refresh the page where the new date should appear, it will only appear if the month does not contain an accent. ie. 21/Avr/2011 will appear but if i had choosen 21/Fév/2011 then todays date would appear instead.
This is the datepicker js code
Code:
var DatePicker = new Class({
Implements: Options,
// working date, which we will keep modifying to render the calendars
d: '',
// just so that we need not request it over and over
today: '',
// current user-choice in date object format
choice: {},
// size of body, used to animate the sliding
bodysize: {},
// to check availability of next/previous buttons
limit: {},
// element references:
attachTo: null, // selector for target inputs
picker: null, // main datepicker container
slider: null, // slider that contains both oldContents and newContents, used to animate between 2 different views
oldContents: null, // used in animating from-view to new-view
newContents: null, // used in animating from-view to new-view
input: null, // original input element (used for input/output)
visual: null, // visible input (used for rendering)
options: {
pickerClass: 'datepicker',
days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
dayShort: 2,
monthShort: 3,
startDay: 0, // Sunday (0) through Saturday (6) - be aware that this may affect your layout, since the days on the right might have a different margin
timePicker: false,
yearPicker: true,
yearsPerPage: 20,
format: 'd/M/Y',
allowEmpty: true,
inputOutputFormat: 'U', // default to unix timestamp
animationDuration: 400,
useFadeInOut: !Browser.Engine.trident, // dont animate fade-in/fade-out for IE
startView: 'month', // allowed values: {time, month, year, decades}
positionOffset: { x: 0, y: 0 },
minDate: null, // { date: '[date-string]', format: '[date-string-interpretation-format]' }
maxDate: null, // same as minDate
debug: false,
toggleElements: null,
// and some event hooks:
onShow: $empty, // triggered when the datepicker pops up
onClose: $empty, // triggered after the datepicker is closed (destroyed)
onSelect: $empty // triggered when a date is selected
},
initialize: function(attachTo, options) {
this.attachTo = attachTo;
this.setOptions(options).attach();
if ($chk(this.options.minDate)) this.options.minDate = this.unformat(this.options.minDate.date, this.options.minDate.format);
if ($chk(this.options.maxDate)) this.options.maxDate = this.unformat(this.options.maxDate.date, this.options.maxDate.format);
document.addEvent('mousedown', this.close.bind(this));
},
attach: function() {
// toggle the datepicker through a separate element?
if ($chk(this.options.toggleElements)) {
var togglers = $$(this.options.toggleElements);
document.addEvents({
'keydown': function(e) {
if (e.key == "tab") {
this.close(null, true);
}
}.bind(this)
});
};
// attach functionality to the inputs
$$(this.attachTo).each(function(item, index) {
// never double attach
if (item.retrieve('datepicker')) return;
// determine starting value(s)
if ($chk(item.get('value'))) {
var init_clone_val = this.format(new Date(this.unformat(item.get('value'), this.options.inputOutputFormat)), this.options.format);
} else if (!this.options.allowEmpty) {
var init_clone_val = this.format(new Date(), this.options.format);
} else {
var init_clone_val = '';
}
// create clone
var display = item.getStyle('display');
var clone = item
.setStyle('display', this.options.debug ? display : 'none')
.store('datepicker', true) // to prevent double attachment...
.clone()
.store('datepicker', true) // ...even for the clone (!)
.removeProperty('name') // secure clean (form)submission
.setStyle('display', display)
.set('value', init_clone_val)
.inject(item, 'after');
// events
if ($chk(this.options.toggleElements)) {
togglers[index]
.setStyle('cursor', 'pointer')
.addEvents({
'click': function(e) {
this.onFocus(item, clone);
}.bind(this)
});
clone.addEvents({
'blur': function() {
item.set('value', clone.get('value'));
}
});
} else {
clone.addEvents({
'keydown': function(e) {
if (this.options.allowEmpty && (e.key == "delete" || e.key == "backspace")) {
item.set('value', '');
e.target.set('value', '');
this.close(null, true);
} else if (e.key == "tab") {
this.close(null, true);
} else {
e.stop();
}
}.bind(this),
'focus': function(e) {
this.onFocus(item, clone);
}.bind(this)
});
}
}.bind(this));
},
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" media="screen"type="text/css" href="styles/datepicker_vista.css">
<script language = "javascript" type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script language = "javascript" type="text/javascript" src="jslib/mootools-1.2-more.js"></script>
<script language = "javascript" type="text/javascript" src="jslib/DatePicker.js" charset="utf-8"></script>
window.addEvent('load', function() {
new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista',inputOutputFormat: 'd/M/Y',allowEmpty: false
});
});</script>
</head>
<body>
<?php
//Gets info from database
$sql="SELECT * FROM $tableName
ORDER BY cat_id";
$qry = mysql_query($sql);
if (mysql_num_rows($qry) > 0) {
while ($rs = mysql_fetch_assoc($qry)) {
$date = $rs['date'];
//does not output dates with accents (Fév,Déc, Aoû) instead puts todays date
<input name="date" type="text" value="'.$date.'" class="date demo_vista" rel="'.$school.'" id="'.$cat_id.'" rel2="'.$_SESSION['yr'].'" />
//will output date with accent
echo $date;
}
}
?>
</body>
Philip M - That was my last resort. I was trying to keep the french in tact as that is what my client was hoping for. I was just hoping someone would know a fix.
Kor - I was hoping this was the simple fix I was looking for. Unfortunately when i change it, all the accents on my page turn to crazy symbols and the date remains as today's date even though the database contains a different date (with an accent).
Before you post, read our: 
Mootools Datepicker ignores accents
