We Keep Coding

VueJS Datepicker change the position day and month

I am using this datepicker - vuejs-datepicker. Current date format is MM.DD.YYYY, but I need it in DD.MM.YYYY format. For this I used the following customFormatter function.
customDatepickerFormatter: function (date) {
return moment(date).format("DD.MM.YYYY");
},
However, the input for example 21.09.2022 is rejected because vuejs datepicker interprets the date as 09.21.2022 which is obviously not a valid date. Can you help me fix this?

Here is how I would integrate a simple but friendly formater supporting EU formatting.
<template>
<section>
<div>
Input your date (DD MM YYYY format)
<input type="text" v-model.lazy="date" /> <!-- updating on focus lost -->
</div>
<p>result: {{ formatted }}</p>
</section>
</template>
<script>
import { format } from "date-fns";
export default {
data() {
return {
date: "20 11 2020",
};
},
computed: {
formatted() {
let [day, month, year] = this.date.split(/\D/) // safe for the separation
return format(new Date(year, month - 1, day), "PPP") // month - 1 offset is to make it simpler to compute
},
},
};
</script>
This is how it looks
Otherwise it looks like this package could also be a nice fit for you apparently: https://vuejscomponent.com/vuejs-datepicker-europedateformat

Changing the format of date after picking from datepicker after SAPUI5

I have a datepicker from which I want to extract the date and display in a label. Currently the date is getting displayed in the format MM/DD/YYYY but I want it in the format MMM dd, yyyy (Nov 17, 2017). Below is the code :
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
date.setText(screenDate);
XML :
<HBox alignItems="Center" renderType="Bare">
<Label text="Date of Screening" width="50%"/>
<DatePicker class="sapUiLargeMarginBegin" width="50%" id="screeningDate"/>
</HBox>

In addition to Naveen's answer here's the solution with your existing code:
screenDate=view.byId("screeningDate").getValue();
var date = view.byId("__date");
// Make date object out of screenDate
var dateObject = new Date(screenDate);
// SAPUI5 date formatter
var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "MMM dd,YYYY" });
// Format the date
var dateFormatted = dateFormat.format(dateObject);
date.setText(dateFormatted);

FYI, By getting view controls and updating the property in it is not good. It will be good if you have a model.
Solution for your problem is below,
<Label text="{
path: '/date',
type: 'sap.ui.model.type.Date',
formatOptions: {
style: 'medium',
pattern: 'MMM dd, yyyy'
}}"/>
<DatePicker dateValue="{/date}"/>
And in the controller I have a JSONModel as below,
onInit : function() {
this.model = new JSONModel({
date : new Date(0)
});
this.getView().setModel(this.model);
}

Display 'Today' instead of date

I am using angular and moment.js to display dates in my app. If the user chooses a date other than today I want the format to be '12:00 PM Sat 21st Nov' which I have working when the user clicks a day from my calendar with amDateFormat
the following:
$scope.setDate = function(day){
var myDate = day.date;
$scope.date = moment($scope.date).set(
{
'year': myDate.year(),
'month': myDate.month(),
'date': myDate.date()
}).toDate();
}
<div> {{ date | amDateFormat:'h:mm A ddd Do MMM'}}</div>
If the date chosen is today how do I display the date to be '12:00 PM Today' instead?

I am not familiar with angular. However you can use moment calendar for today date.
From the doc you can tweak the calendar like this:
moment.locale('en', {
calendar : {
sameDay : 'LT [Today]'
}
});
And then call moment().calendar();
Here is a snippet with an alternative way of doing it assuming you are using a version that is at least 2.10.5:
var divTime = $('#time');
var time = moment().calendar(null, {
sameDay: 'LT [Today]'
});
divTime.text(time);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="time">

Date formatting AngularJS to display only the day and month

I am completed newbie to Angular. So I have date value for created_at. which is
2008-04-25 00:00:00
I want to get only the day similarly month in English. I have tried the following to make sample to get Year alone. But the filter not seems to be working. What am I doing wrong?
<h2>Recent Study</h2>
<ul ng-repeat="x in names">
<li>
<div class="date">
<span class="day">{{ x.created_at | date : 'yyyy' }}</span>
<span class="month">Jul</span>
</div>
<p>{{ x.study_description }}</p>
</li>
</ul>

You need to convert the date to seconds, and use a custome filter:
app.filter('toSec', function($filter) {
return function(input) {
var result = new Date(input).getTime();
return result || '';
};
});
and use it in your HTML like this:
{{ '2008-04-25 00:00:00' | toSec | date:'EEEE'}}
result:
Friday
Angular gives you the option to create a Custome Filter
Here's a working example that achieves what you need using a custome filter.

created_at's formatting isn't compatible.
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
Cited from https://docs.angularjs.org/api/ng/filter/date
for example "2008-04-25T00:00:00" would work.

I hope your getting the input as time stamp ,in your code just change the filter to get the only day
<h2>Recent Study</h2>
<ul ng-repeat="x in names">
<li>
<div class="date">
<!-- getting only day -->
<span class="day">{{ x.created_at | date:'dd '}}</span>
<!-- getting month name and day only -->
<span class="month">{{ x.created_at | date:'MMM-dd '}}</span>
</div>
<p>{{ x.study_description }}</p>
</li>
</ul>
here date:'dd ' gives Day in month, padded (01-31) and
date:'MMM-dd ' gives Month in year (Jan-Dec) and above day in month.

I have found the answer. The problem is simple. We should convert the mysql date time to javascript date time then only you can format it in javascript.
so my format is:2008-04-25 00:00:00
app.filter('format', function () {
return function (item) {
var t = item.split(/[- :]/);
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
var time=d.getTime();
return time;
};
});
I have converted the mysql to javascript and then to millisecond then applied my filter its working.This may be not efficient. Its working in great manner. Hope this helps someone.
so my html:
<li ng-repeat="x in names">
<div class="date">
<span class="day">{{ x.created_at | format | date:'d'}}</span>
<span class="month">{{ x.created_at | format | date:'MMM'}}</span>
</div>
<p>{{ x.study_description | makeUppercase}}</p>
</li>
Its working fine. #Nishanth answer is giving me undefined. I have upvoted it since its seems working fine for some people. The date format support vary on browser tools too.

Date object in meteor and autoform

I have problem with input Date validation on Meteor, AutoForm and Simple-schema .
If its turn on Chrome auto date picker , validation can't recognize Date format or type like is in schema (type: Date) or from input (type="date") "08/19/2014"
If its turn off Chrome date picker, and when i use bootstrap3-datepicker and with moment js set format to "2014-08-19" like they wrote, I have same Date validation problem.
What kind date format can be correct validated in schema with type: Date ?
Which date picker is best to give me correct date format and type and can you please give me an example because in meteor-autoform-example i saw same problem.
Example:
.js
schema: {
'orderDate': {
type: Date,
label: "OrderDate",
optional: true
}
.html
{{>afQuickField name="orderDate" type="date" }}
or with {{#autoForm}}
<div class="form-group {{#if afFieldIsInvalid name='orderDate'}}has-error{{/if}}">
{{> afFieldLabel name='orderDate'}}
<span class="help-block">*Requered</span>
{{> afFieldInput name='orderDate' id="OrderDate"}}
{{#if afFieldIsInvalid name='orderDate'}}
<span class="help-block">{{{afFieldMessage name='orderDate'}}}</span>
{{/if}}
</div>
or with bootstrap3-datepicker
<input type="date" id="orderPickerDate" class="form-control" />
Thank you.

The date format is a combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.
You can specify this format on data-date-format, but a better place to add format is in the schema:
some_date: {
type: Date,
autoform: {
type: "bootstrap-datepicker",
datePickerOptions: {
autoclose: true,
format: 'dd M yyyy'
}
}
},
For example, dd M yyyy give you 27 Apr 2017.
I found the documentation at http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

Just looking at the documentation for the original bootstrap-datepicker that I think aldeed's package just wraps, I think you'd want something like:
{{> afQuickField name='orderDate' type="bootstrap-datepicker" data-date-format="dd MM yyyy"}}
or
{{> afFieldInput name='orderDate' type="bootstrap-datepicker" data-date-format="dd MM yyyy"}}
Specify the date format you want with the data-date-format attribute.