I'm trying to format a date and place each item (month, day and year) inside a div or span. I'm using a SaaS platform which provide a date like so:
2015-03-07 22:54:00
What I try to do is format this date into 3 separate items and place them in a div like so:
<span class="day">07</span>
<span class="month">March</span>
<span class="year">2015</span>
Therefore I need to strip everything behind a - and call it inside a div like so:
<span class="day">{{ article.date | split('-')[2] }}</span>
<span class="month">{{ article.date | split('-')[1] }}</span>
<span class="year">{{ article.date | split('-')[0] }}</span>
This gives me an output like:
<span class="day">07 22:54:00</span>
<span class="month">03</span>
<span class="year">2015</span>
Where I get stuck is to remove the time after the day and change the month into a textual representation.
I know it can be done with PHP date functions but I can't get that to work. The problem I'm facing is that the date needs to be stripped after each -.
Is there anybody who can help me with that?
You can use the date() function, and then the date filter
NB: they are 2 really different things!!!
{% set dateTime = date(article.date) %}
<span class="day">{{ dateTime | date('d') }}</span>
<span class="month">{{ dateTime | date('F') }}</span>
<span class="year">{{ dateTime | date('Y') }}</span>
First, the date() function converts your string dates to a DateTime object.
Then, the date filter makes you do the equivalent of the DateTime::format PHP function, so you can use a separate notation for the desidered output.
If you need to translate the name of the month to a locale, you can pipe the trans filter, but it must be enabled first.
Related
So I am using ng-bootstraps datepicker to display some user data for each day. I use custom day template to apply certain CSS classes
<ng-template #customDay let-date>
<div
class="custom-day"
[ngClass]="evaluatePresenceType(date)"
>
{{ date.day }}
</div>
</ng-template>
The thing is this method is being called many times for each day which is less than optimal.
Is there a way to apply CSS class to every day just once, when the datepicker is being rendered and not every time I click anywhere?
When you want to use a custom template day to give some class to "specials days" you has two approach:
Use [ngClass] or [class.myClass]="function(date)" as you
indicate
Use DayTemplateData (see the docs)
Well, the doc is not very clear. The idea is to have a function,e.g.
data=(date: NgbDate, current?: {year: number, month: number})=>
{
//see that futhermore the "date" you has an object
//current with two properties: "year" and "month" that is showing
return this.calendar.getWeekday(date)>=6?'square':null
}
Then you use
<input class="form-control" [dayTemplateData]="data"
[dayTemplate]="customDay" ...>
And your template day pass the "data" using let-data=data
<ng-template #customDay let-date let-data="data" ...>
<span class="custom-day" [ngClass]="data" ...>
{{ date.day }}
</span>
</ng-template>
See that if you only want to apply an unique class your function can return true or null and use [class.myClass]="data"
In the stackblitz, I use the two approach and use two counters to show the improve of this another approach
I changed thousands separator to ' instead of ,.
Now when I try to remove the currency symbol, the thousand separator also be removed.
I have tried those code:
<span t-field="l.price_subtotal" t-field-options="{'widget':'False'}"/>
and
<span t-field="l.price_subtotal"
t-field-options="{"widget": "False"}"/>
Can you help me to display the price as 1'542 without currency
Thank you
Please try these
<span t-esc="'{:,.2f}'.format(l.price_subtotal)" >
You can use this <span t-esc="float(object.field_name)"/>
Just write
<span t-field="l.price_subtotal" widget="monetary"/>
I have this piece of code inside Twig loops that will render beautiful color to every first letter of key=>value
<i class="avatar avatar-color-95 avatar-letter-c">{{ firstletter(message.firstname)}}</i>
But I want this to display color in dynamic way, different colors depending the length of the value
{% for message in pagination %}
{% set namecount = message.firstname | length %}
{#{ dump(namecount)}#}//outputs number(length)
<div class="container avatar">
<i class="avatar avatar-color-12 avatar-letter-c">{{ firstletter(message.firstname)}}</i>
{% endfor %}
I want to do it like this
<i class="avatar avatar-color-{{ namecount }} avatar-letter-{{firstletter(message.firstname)}}">
How do you do it? I tried to put qoutes between
"{{namecount}}"
and
"{{firstletter(message.firstname)}}
But it doesnt work. I cant find any docs for this in Twig docs,.How do you do it?
From the comments section...
You could just use <i class="avatar avatar-color-{{ message.firstname|length }} avatar-letter-{{ message.firstname|slice(0, 2) }}">.
Unless you are going to be using the variable again there's not much point in setting a variable rather than calling the filter/function inline.
I've got a string and I want to
isolate the first word for styling with style1 and
display the rest of the string with style2 without the first word.
Something like that :
<span class="style1">{{ string|firstword() }}</span>
<span class="style2">{{ string|restofstring() }}</span>
Is it possible ? Thank you in advance.
I believe you can achieve this by using the split command in Twig. To split you need to identify the separator between two words. Assume your words are separated using a space. Then you can get the first and second words like this.
{{ "Monday Tuesday" | split(' ')[0] }}
Will return the "Monday"
{{ "Monday Tuesday" | split(' ')[1] }}
Will return the "Tuesday"
More about split :- http://twig.sensiolabs.org/doc/filters/split.html
Hope this helps,
Cheers!
I found it ! With split() and attribute() TWIG functions.
{% set array = article.titre|split(' ', 2) %}
<span class="style1">{{ attribute(array, 0) }}</span><!-- First word -->
<span class="style2">{{ attribute(array, 1) }}</span><!-- Rest of string -->
Thanks to Anjana Silva who give me the begginning of the idea.
As an alternative to the array syntax, you might find the first filter to be more idiomatic:
{{ "Hello Twig"|split(' ')|first }}
i have 2 fields (fieldA and fieldB)
what i want :
- if the fieldA contains something then the fieldB should not be displayed
what i try :
<span tal:replace="here/getFieldA" />
<span tal:omit-tag="here/getFieldA" tal:replace="here/getFieldB" />
so it doesn't work
thanks for your help
What you are looking for is tal:condition, possibly combined with the not: and exists: prefixes:
<span tal:replace="here/getFieldA" />
<span tal:condition="not:exists:here/getFieldA" tal:replace="here/getFieldB" />
Alternatively, you can use the | operator, which acts like an if operator, testing existence of the first element. If it doesn't exist, it'll use the next expression, and so on:
<span tal:replace="here/getFieldA | here/getFieldB" />
The tal:omit-tag attribute means something very different. If it's expression evaluates to True, then the tag, and only the tag itself, is omitted from the output. This is best illustrated with an example:
<span tal:omit-tag="">
<i>This part will be retained</i>
</span>
Rendering that piece of pagetemplate results in:
<i>This part will be retained</i>
The surrounding <span> tag was omitted, but the contents were preserved.
Try
<span tal:condition="here/getFieldA" tal:replace="here/getFieldB" />
The Zope Page Templates Reference http://docs.zope.org/zope2/zope2book/AppendixC.html
This is a refinement of the original answer, based on the comments:
<tal:block
tal:define="zone here/getZoneintervention;
thezone python:', '.join(zone);
dep here/getDepartements;
thedep python:', '.join(dep)">
<span tal:condition="zone" tal:replace="thezone" />
<span tal:condition="not:zone" tal:replace="thedep" />
</tal:block>