The column dates are appearing as Sat 2/16, etc. instead of the UK format Sat 16/2. How do I change it?
default: 'en',
columnFormat: {
day: 'dddd d/M'
},
doesn't work.
You need to include the locale file and then set it in your calendar config
You can read everything about it here
You will need to load the locale JavaScript data file in order to use it. These files are included with the FullCalendar download in the locale/ directory. They must be loaded via a tag after the main FullCalendar library is loaded.
script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/locale-all.js'></script> <!-- this is a file including all the locales -->
<script>
$(function() {
$('#calendar').fullCalendar({
locale: 'es' // This is an acronym for the locale you want to select
});
});
Related
I'm looking for a way to translate the placeholder for a date picker in the input as soon as the user changes the language.
For example, the default (EN) format is dd/mm/yyyy, but if the user changes the language to french, this should be changed to jj/mm/aaaa. Currently I'm using the momentJS library but unfortunately, this doesn't support date translation, only the correct local format.
Is there a library/other way suitable for this?
Thank you
Using the default <input type="date">, the browser UI element is rendered. This is not something that you can directly control. You can add a helper for the browser to display a specific lang, eg <input type="date" lang="en-GB">, as this is a global attribute. That being said, the browsers will implement this differently, and I believe that as it currently stands, most browsers ignore this attribute and instead use the locale currently set by on the browser eg, Intl.DateTimeFormat().resolvedOptions().locale.
Eg:
<label for="datepicker">Select Date:</label>
<input type="date" id="datepicker" lang="fr-CA">
For me (using Chrome), this stays as my current locale (en-GB).
What can I do?
You cannot override your browser locale my javascript, it must be set through the browser config (eg, chrome://settings/languages) or through browser launch settings.
The easiest way to do this effectively would be to use a non browser UI date picker, eg, something like jQuery datepicker:
$(function() {
$("#datepicker").attr('placeholder', $.datepicker.regional["fr"].dateFormat)
$("#datepicker").datepicker($.datepicker.regional["fr"]);
$("#locale").on("change", function() {
const locale = $.datepicker.regional[$(this).val()]
$("#datepicker").attr('placeholder', locale.dateFormat)
$("#datepicker").datepicker("option", locale);
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-ar.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-fr.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-he.js"></script>
<script src="https://jqueryui.com/resources/demos/datepicker/i18n/datepicker-zh-TW.js"></script>
<p>Date: <input type="text" id="datepicker">
<select id="locale">
<option value="ar">Arabic ((العربية</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value>English</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="he">Hebrew ((עברית</option>
</select>
</p>
But even this is not perfect. I'm sure that are a lot better date pickers out there.
I'm having the exact same problem as you (see How do I get the localized date format for a given locale?).
I have yet to find a library that features date placeholder mappings as part of their locale data. As of now, I need to maintain a mapping for the languages I support in my application.
const datePlaceholderLocaleData = {
fr: { year: 'a', month: 'm', day: 'j' },
en: { year: 'y', month: 'm', day: 'd' }
}
I'll keep you informed if I find a better solution.
Try this Javascript snippet I left the part of language code change but I am pretty sure it will help however you set the langCode. I tried several langCode all of them worked.
const langcodes = ["es", "ca", "en" ,"nl", "fr", "de"];
Use this Array and map over if to generate langCode for testing purposes.
const myDate = new Date();
const langCode = document.documentElement.lang || navigator.language;
console.log(langCode)
const formatter = new Intl.DateTimeFormat(langCode);
console.log(formatter.format(myDate))
The toLocaleDateString() method returns a string with a language-sensitive representation of the date portion of the specified date in the user agent's timezone.
In a totally custom Wordpress page, written as a PHP snippet using Woody Snippets plugin, I need to use a jQuery datepicker to select a date.
I imported the necessary files correctly, and also called and set up the datepicker correctly. Yesterday, I attached the datepicker to a hidden input field, so that when I clicked on an icon, the calendar would float in place, and everything was fine, even the localization, although I hadn't taken any measures for the localization of the calendar (importing the i18n files etc)...
Today, I had to change the page's layout a bit, so I had to make the calendar show from the beginning (inline). According to the demo page, in order to put the datepicker inline, all you have to do is attach it to a div instead of an input field.
The datepicker indeed turned into an inline element, but the localization went away... The initial language is English, until I interact in any way with the calendar (go back or forth a month, or pick a date, etc). Once I do that, the localization turns into my site's language!
What's more crazy is that this situation continued even after I specifically imported and set up the localization.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js" integrity="sha512-zZ27MiE6yuwkKbHnJ/7ATQF/7l+Jwk5jSxgmLJ1SS5QJexaYswmP3OKBPDVMfM8TlSOudAKHTWH2UtS+0LDddw==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#frontpages-date-filter').datepicker($.extend({},
$.datepicker.regional['el'], {
dateFormat: 'yymmdd',
minDate: new Date({$min['y']}, {$min['m']}, {$min['d']}),
maxDate: new Date({$max['y']}, {$max['m']}, {$max['d']}),
onSelect: function(dateText) {
window.location.href = location.protocol + '//' + location.host + location.pathname + '?date=' + dateText;
}
}
));
});
</script>
Exactly the same code works fine right from the start in the following JSFiddle
From what I've searched so far, it most likely has to do with WP v4.6+ where localization is automatically added to jQuery, but no matter what I've tried, I haven't been able to make the inline datepicker load localized without having to interact with it in any way!
BTW, I had noticed the exact same behavior, and even had recorded a short video for the developers of ACF, thinking it had to do with their plugin, but they responded it wasn't due to their plugin, so as it was in the Admin side, I didn't bother losing time to debug it further. But this time, the page is in the public side, so it has to be fixed!
Any help will be very much appreciated. Thanks in advance.
This must have been a conflict in my site. TBH, I wasn't able to spot the conflict, but I was able to circumvent it by setting the necessary lang strings just before datepicker's initiation like so:
$(function() {
$.datepicker.regional['el'] = {
closeText: 'Κλείσιμο',
prevText: 'Προηγούμενος',
nextText: 'Επόμενος',
currentText: 'Σήμερα',
monthNames: ['Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'],
monthNamesShort: ['Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαι', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ', 'Οκτ', 'Νοε', 'Δεκ'],
dayNames: ['Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη', 'Παρασκευή', 'Σάββατο'],
dayNamesShort: ['Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'],
dayNamesMin: ['Κ', 'Δ', 'Τ', 'Τ', 'Π', 'Π', 'Σ'],
weekHeader: 'Εβδ',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['el']);
$('#frontpages-date-filter').datepicker();
});
I have created a module. In this a custom js file is added with requirejs-config.js, But to load the js file, I need to write the following lines on phtml,
<script type="text/javascript">
require(['jquery','customjs']});</script>
If I don't add the above line js is not adding .Can some body please tell is this the right approach or I am doing some thing wrong.
Require js code added at (Namespace\Modulename\view\frontend)
define([
'jquery',
'underscore',
'mage/template',
], function (
$,
_,
template
) {
//custom code
});
Yes this is the right approach. because you have created custom.js right . so that custom.js you need to call in your requirejs-config.js
But now when you want to use this actuall js functions and properties you need to pass below code
<script type="text/javascript">
require(['jquery','customjs']});</script>
What it mean actually , to load your customjs it requires jquery so first load the jquery then load your customjs and then you can pass the parameters.
require([ 'jquery', 'customjs'], function(){
alert("test");
});
so alert box will prompt when you add this in your template
Jfyi - in your requirejs-config.js you need to write like below code you dont'need to write extension of js file like.js as require js automatically render that . and lastly put the js file in web/js folder in your module
var config = {
"map": {
"*": {
"customjs": "Vendor_Modulename/js/custom"
}
}
};
Using ZURB Foundation Template, building with NPM.
I have the following code in my default.html layout page:
<script src="{{root}}assets/js/app.js"></script>
{{#ifpage 'admin'}}
<script src="{{root}}assets/js/single-page/admin.js"></script>
{{/ifpage}}
{{#ifpage 'dashboard'}}
<script src="{{root}}assets/js/single-page/dashboard.js"></script>
{{/ifpage}}
In gulpfile.js I have as a member of the 'javascript' PATHS array:
'!src/assets/js/single-page/**/*'
I then, do:
gulp.task('single-page', function() {
return gulp.src('src/assets/js/single-page/**/*')
.pipe(gulp.dest('dist/assets/js/single-page'))
.on('finish', browser.reload);
});
Then...
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'single-page', 'images', 'php', 'chart_data', 'copy'], 'styleguide', done);
});
And finally...
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/js/single-page/**/*.js'], ['single-page']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/assets/php/**/*'], ['php']);
gulp.watch(['src/assets/chart_data/**/*'], ['chart_data']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
My three pages are all PHP pages with the names index.php, admin.php, and dashboard.php. The js/single-page directory is being written to the dist folder and the two JS files are there.
The Panini conditional doesn't seem to be working so the admin-specific and dashboard-specific paths do not appear on their respective PHP pages.
Colin Marshall in his answer to How to add JavaScript just for one specific page? mentions a config.yml file and a gulpfile.babel.js file, neither of which are in my project's directory.
Any suggestions?
Thank you.
Simple fix after a bit of fiddling. Seems Panini 'page' var returned the full page name including .php. Once I checked for admin.php or dashboard.php all worked fine.
I can only imagine there's some code change I can make to return the page name without the file extension.
Is there a way to render a precompiled template that has no name on the client side in DustJs?
Because documentation only shows with a name:
<!-- precompiled templates -->
<script type="text/javascript" src="/lib/templates.js"></script>
<script type="text/javascript">
// The templates are already registered, so we are ready to render!
dust.render('hello', { world: "Saturn" }, function(err, out) {
document.getElementById('output').textContent = out;
})
</script>
EDIT : Ok it's probably too complicated to load a file, and I just noticed that when we compile without specifying name (in order to compile many template simultaneously), the path of the template is set as the default name. It is even editable with --pwd flag.
There is therefore always a name so the above function can operate.
It sounds like you would like to load templates by their path after they have been precompiled. Dust allows you to do this via AMD (require.js) compatibility.
http://www.dustjs.com/guides/setup/#amd
Once you've loaded require.js and set define.amd.dust = true, you can call dust.render with the path to a template and Dust will automatically load it for you.
Note that this requires that you compile your templates with the --amd flag.
<script src="r.js"></script>
<script type="text/javascript">
define.amd.dust = true;
require(["lib/dust-full"], function(dust) {
dust.render('path/to/your/template', function(err, out) { ... });
});
</script>
The Dust repository has an example of using AMD to load templates.