When I create a post, in the front matter I have to insert layout, title, date etc. My concern is regarding date front matter. It is very inconvenient to insert date time and time offset in date field manually.
I'm not able to figure out how to do this automatically. I want the front matter date to update automatically with system time.
The date variable in front matter is an optional variable that you can set to be able to override the date that you set when you title your post according what Jekyll is looking for (i.e. 2019-12-14-post-title.md). It should only refer to the date the post was originally made, and not the current system date. Except for certain edge cases, you really shouldn't have to define date in the front matter.
You can use Liquid templating to post the current time to a page by passing the "now" keyword to date in your liquid template as follows:
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
to get the the output:
This page was last updated at 2019-12-14 17:48.
However this method has a big drawback for Jekyll usage, because it will refer to the current date when the page was last generated from the template and not when the page is being visited by the user.
The best way to access the current system time is likely to use javascript instead. This is fairly easy depending on your familiarity with the language, but essentially you can make a Date object and then output the info you are looking to display. Here is a quick snippet I made that shows a couple methods that act on the Date object to output different values such as the date, time, and year:
<!DOCTYPE html>
<html>
<body>
<h3>The toDateString() method converts a date to a date string:</h3>
<p id="demo1"></p>
<h3>The toLocaleTimeString() method outputs formatted time:</h3>
<p id="demo2"></p>
<h3>The getFullYear() method outputs the year:</h3>
<p id="demo3"></p>
<script>
// create date object
var d = new Date();
// use toDateString() to output formatted date
document.getElementById("demo1").innerHTML = d.toDateString();
// use toLocaleTimeString() to output formatted time
document.getElementById("demo2").innerHTML = d.toLocaleTimeString();
// use getFullYear() to output year
document.getElementById("demo3").innerHTML = d.getFullYear();
</script>
</body>
</html>
W3schools has a good rundown of the Date object and how to format output if you need more examples and reference on usage.
If you need to know how to use Javascript with Jekyll there is a helpful post on Jekyll Talk that will help.
First of all, you do not HAVE to insert 'layout, title, date etc'. You can use Front Matter defaults for them. This only makes sense for the layout as the title can or should be default, nor the date.
The date MUST be set in your filename and can be overridden in the Front Matter. Please note that this is ONLY true for the built-in collection posts. If you use a custom collection you do not need a date at all.
However, if you choose to use posts nevertheless and you want to add the date automatically, there is only one real option: Use a CMS that automates this input, like Forestry.io or CloudCannon.
Related
I have the following code in a template:
<?= $this->Form->date('selected_date', ['required' => true]) ?>
This displays a lovely new dynamic date picker, but with the US format "mm/dd/yyyy". What I want is "dd/mm/YYYY"
In app.php I've set the APP_DEFAULT_LOCALE to en-GB.
In AppController.php I've set the following:
I18n::setLocale('en-GB');
Time::setDefaultLocale('en-GB'); // For any mutable DateTime
FrozenTime::setDefaultLocale('en-GB'); // For any immutable DateTime
Date::setDefaultLocale('en-GB'); // For any mutable Date
FrozenDate::setDefaultLocale('en-GB'); // For any immutable Date
How do I change the format? I can't find anything in the docs or online.
You can't change it, at least there's no reliable, cross browser/device compatible way, the control is rendered by the browser, and the current state of things is that browsers use the locale the browser currently runs in to format the control.
If you want something solid, then you'll have to use a custom JavaScript datepicker. If you want to walk on the edge, look into web components.
See also Is there any way to change input type="date" format?.
I'm trying to use Adobe DTM to pass the date to a prop variable but haven't had much success. The final output should be a prop report in Adobe that'll provide me traffic data for specific dates (5/11/16, 6/15/15 etc). The ultimate goal for setting the dates as a prop is to be able to classify a range of dates based on various business needs.
Could anyone point me in the right direction for getting this done? I am assuming I'll have to add a line of code in the s.code file that'll define s.prop5 = ...
Thanks
Based on your comments, it sounds like you are just looking to pop something with the current date stamp with "MM-DD-YYYY" format.
As Gigazelle mentioned, you can create a Data Element to return the value, and then reference it for setting your prop. However, throwing a data layer into the mix may be overkill for you, depending on your needs/limitations.
Data layers are meant for exposing data that DTM can't feasibly/reliably automate on its own via built-in features or hosting an autonomous js snippet.
The only reason you might want to consider having your site push it to a data layer, is if you want to generate the date via server-side coding to ensure the date is generated within the same timezone setting for all visitors. If you generate it client-side, it will be generated according to the visitor's browser/system settings. Since visitors are from all over the world in different timezones, the data may not be as consistent (even if you add additional code to change the timezone offset, it still may not be 100% based on browser version/security settings, or visitors who alter their browser/system date/timezone settings).
So, if you want to ensure the best accuracy, then I suggest you output the value via server-side code, and put into a data layer. How you do that depends on your server and what language you have at your disposal for your web pages being served up. Here is a very basic example using PHP:
<script>
var dataLayer = {
currentDate : '<?php echo date('m-d-Y'); ?>'
}
</script>
This will have the server generate the date stamp and output a js object called dataLayer with a property currentDate you can reference. You can create a Data Element as Type "JS Object" and for Path, put dataLayer.currentDate, and then reference your Data Element elsewhere (see below).
If that's too much trouble for you or if you want to keep it pure client-side/DTM and are okay with the potentially lower consistency...
Within DTM, go to Rules > Data Elements, and click Create New Data Element.
Name it "currentDate" (no quotes).
For Type, choose "Custom Script", and click Open Editor, and add the following:
var t=new Date(),d,m,y;
d=t.getDate();
d=d<10?'0'+d:d;
m=t.getMonth()+1;
m=m<10?'0'+m:m;
y=t.getFullYear();
return m+'-'+d+'-'+y;
Click Save and Close and Save Data Element.
Now you can reference the data element to pop prop5. How you do it depends on how you've setup Adobe Analytics within DTM. For example, if you set it up as a tool and only want it to pop on initial page view, you can open your AA tool config, go to the Global Variables dropdown, and set prop5 there. You reference it as %currentDate%
You can do the same %currentDate% syntax in a Page Load Rule or other rule or any other place that uses DTM's built-in fields.
Alternatively, if you need to reference it within javascript code (e.g. if you are setting prop5 within s.doPlugins or some other Custom Script box, you can reference the data element like this:
s.prop5 = _satellite.getVar('currentDate');
Set a JS variable on your site (such as within a data layer) that outputs the date in the format you wish to collect it in. Something like var d = Date();
In DTM, go to Rules > Data Elements and create a data element that maps to the JS variable you created on your site
If you want prop5 to be defined on every page, click the gear icon and map prop5 to your data element name by using %DataElementName% (whatever you named your data element in step 2, wrapped in percent signs). If you don't want it defined on every page, go to Rules and create a page load rule, event based rule or direct call rule depending on when you want the variable to trigger. Under the Adobe Analytics section of the rule, map prop5 to %DataElementName% .
This will allow you to collect dates as values, which can then be used in classifications.
I have a website which uses smarty templates.
I have a table in my db called posts that has various columns, one being "date_added". I managed to have that displayed on the posts by editing one of the Smarty templates for "posts" however, the date format is YYYY-MM-DD.
Is there any easy way for me to change this? Perhaps with jQuery?
Ideally, I want to only show the abbreviated month, with the day positioned next it. This is for a blog style post, but this isn't WordPress.
Right now the smartytemplate the shows the date_added reads like this:
{$posts[i].date_added|stripslashes|nl2br}
Where posts is the table and date_added is a column in that table.
An exact example can be seen here in the top right corner of each post.
http://www.elegantthemes.com/preview/LightBright/
Does anyone have a good suggestion of how I can achieve the desired request?
If you are looking for a javascript solution, you can take a look at the incredible JS Library MomentJS. It is very lightweight and does numerous date and time formats.
http://momentjs.com/
Just include the minified script file in your HTML .
For your exact case, you would use momentJS as such:
First create the momentJS date object:
var moment_date = moment(date_from_database, "YYYY-MM-DD");
Then to display the date as you want:
var date_string = moment_date.format("MMM DD"); // ex. = "Mar 03"
More documentation here: http://momentjs.com/docs/#/displaying/
Then you can use your DOM manipulation library (JQuery for example) to place that string somewhere in your HTML
Good luck
- K
I am using time tag to define a time—seemed like the right approach ;-)
My problem however is the value I want to place within the time tag is NOW: the present. I get this validation error:
The text content of element time was not in the required format:
The literal did not satisfy the time-datetime format."
Looking at the spec, it doesn't seem possible to define 'NOW'. That's a nuisance. Any ideas on how to approach this?
You cannot. The time element in HTML5 is defined as markup for specific moments or periods or durations of time or for time offsets, not for all concepts related to time.
You can write e.g. <time datetime="2013-04-06T13:53">now</time>, thereby associating a fixed moment of time with the text content “now”. I don’t see how this could be useful, and the usefulness of the time element in general is questionable (it looks like markup for markup’s sake), but things like this are all you can do to “define ‘NOW’” with time.
I'm using this markup for now:
<time datetime="2013">Present</time>
No more errors, and it's symatic. It's just a shame there is no accepted variable for NOW.
Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>