How do I set a custom format for the date the datepicker displays?
I'd like a long date format like 'November 4, 2017' or '4 Nov, 2017'. Something that's clear for multiple locals.
I've experimented with different properties of the options, but always end up with US short date format.
To display date in 'November 4, 2017' format use the following config:
this.bsConfig = Object.assign({}, {
dateInputFormat: 'LL',
locale: 'en-gb'
});
And assign it to the date picker in html component:
<input ... bsDatepicker [bsConfig]="bsConfig" />
Note there is an existing issue when patching form value. The link contains a possible workaround as well.
To display date '4, Nov 2017' in this format.
use this config in html.
[bsConfig]="{dateInputFormat: 'D MMMM YYYY '}"
It works for me.
Related
I'm using v-calendar, I want to pass the default date to url and use it to set as the default date of the calendar.
The problem I faced with, is that v-calendar always shows the current date by default.
For example today is 30-01-2023 but I want to show the Feb of 2021.
I pass the default date in url query params.
My current code is like this:
<v-calendar
class="custom-calendar max-w-full"
:masks="masks"
:attributes="filteredEvents"
disable-page-swipe
is-expanded
:from-page="new Date(props.occurrence + '-01T:00:00')"
v-bind="{
fromDate: $props.occurrence ? new Date(occurrence+'01T00:00') : null,
}"
v-model="selectedDate"
#update:from-page="navigationHandler($event)"
>
<template v-slot:day-content="{ day, attributes }">
<CalendarDay :day="day" :attributes="attributes" />
</template>
</v-calendar>
If my props.occurrence = '2022-12, still the $event.year and month returns the current year and month.
I want to change "August 2022" to "2022 August" but i can't find anything similar with this attribute in v-date-picker.
How to change format of this header
Vuetify Datepicker
You have a propery header-date-format that you can use to call your own method of formatting the headers
<v-date-picker
v-model="picker"
:header-date-format="customFormatHeader"
></v-date-picker>
customFormatHeader(isoDate) {
const currentDate = new Date(isoDate)
const month = currentDate.toLocaleString('default', {month: 'long' })
const year = currentDate.toLocaleString('default', { year: 'numeric' })
return year + month
}
I want to verify one of the metadata present in to div as :
<div ng-if="XXXXXXX" class="XXXXX" >
<div>March 01 2019, 10:00 am to</div>
<div>March 28 2019, 6:00 pm</div>
</div>
Need to verify presence of all these Keywords with '01', '28', '10:00 am', '6:00 pm' except Month and Year.
What can be effective way to verify it ?
The parent <div> will hold all the text. Locate it and check if it contains it
WebElement element = driver.findElement(By.className("XXXXX"));
String text = element.getText();
if (text.contains("01") && text.contains("28") && ...) {
assertTrue(true, "All keywords present");
}
I am using the below code to compare 2 dates on cshtml view with knockout binding.
data-bind="visible: (new Date(appointmentDate) - new Date() < 0) && isStart()"
It is working fine but that is including time as well while comparing. I don't want to include time in comparision only date.
I quick search on google pointed me to Formatting Date in Knockout Template this will allow us to get the date and compare it. Looking like
data-bind="visible: (
moment(new Date(appointmentDate)).format('MM/DD/YYYY') -
moment(new Date()) < 0) && isStart()"
I didn't try just let me know if works
Also momento allows you to calculate difference of dates
var dateB = moment('2014-11-11');
var dateC = moment('2014-10-11');
console.log('Difference is ', dateB.diff(dateC), 'milliseconds');
console.log('Difference is ', dateB.diff(dateC, 'days'), 'days');
console.log('Difference is ', dateB.diff(dateC, 'months'), 'months');
So basically we would do
data-bind="visible: (
moment(new Date(appointmentDate)).format('MM/DD/YYYY').diff(new Date().format('MM/DD/YYYY'),'days') < 0) && isStart()"
I have a dropdown list with dates, the values are as such:
<select name="DayDate" id="DayDate" data-val-date="The field DayDate must be a date." data-val="true" style="display: inline-block;" class="input-validation-error">
<option value="07/11/2013">donderdag 11 juli 2013</option>
<option value="07/10/2013">woensdag 10 juli 2013</option>
<option value="07/09/2013">dinsdag 9 juli 2013</option>
</select>
#Html.DropDownListFor(m => m.DayDate, Model.Days.Select(r => new SelectListItem
{
Text = r.Date.Value.ToString("D"),
Value = r.Date.Value.ToString("MM/dd/yyyy", CultureInfo.InvariantCulture)
}))
But when I submit I get as a date 7th of November, 7th of October or 7th of September!
The Thread culture is set to NL-nl and this has to remain this way.
So I thought of removing CultureInfo.InvariantCulture but then the model won't accept the date input data-val will be false, with this error: The field DayDate must be a date.
The following is set in the web.config
<globalization culture="nl-NL" uiCulture="nl-NL" />
How can I get the correct dates passed on?
Solved it by adding this piece of Javascript:
$.validator.methods.date = function (value, element) {
return true;
};