When I am using bootstrap datepicker i need to set start state on
01/01/1930.But Format only allows when i gave count of days format.
startDate: '-31578d', (working)
But Its not working when I use direct date format. Anyone plzzz help me
startDate: '01/01/1930', (not working)
you have to add the format parameter along the startDate,
format: 'mm/dd/yyyy',
startDate:..
But Already I written code,
.datepicker({
showOnFocus: true,
showOn: "button",
format: 'mm/dd/yyyy',
startDate: '-31582d',
endDate: '+0d',
autoclose: true
})
Related
The default output format of ngx-bootstrap datepicker is not ISO format as documented.
I would welcome this format but the actual format that I get is:
Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)
Stackblitz Example
I know there are ways to post process the format but this format seems weird for a default output format. Does anyone have experience with this?
In vanilla JavaScript there is a 'Date' object, the default output of which gives you the line you are seeing:
Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)
In physical memory, your Date object is actually being stored as the number of milliseconds since "January 1, 1970, 00:00:00" which using our above line is actually "1596410220000" milliseconds.
You can read the full specifications for the 'Date' object here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates
Meanwhile, to answer your question more specifically, your date picker is not giving the output you listed but instead applying its date to a 'Date' object (newDate). You are then setting another 'Date' object (updatedDate) to be equal to the Date object assigned by your date-picker (newDate).
This is done here:
onValueChange(newDate: Date) {
this.updatedDate = newDate;
}
So in memory your updatedDate is now represented as "1596410220000" milliseconds. When you output that 'Date' object to your HTML your browser is going to use the default output for the 'Date' object, giving you:
Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)
So there are two solutions that you can use if you want to get that Date into a different format.
First you can call a method on your newDate to return a different formatted string. For example, if we wanted to output it as the ISO string that you were looking for originally we change this:
export class AppComponent implements OnInit {
myDateValue: Date;
updatedDate: Date;
ngOnInit() {
this.myDateValue = new Date();
}
onValueChange(newDate: Date) {
this.updatedDate = newDate;
}
To this:
export class AppComponent implements OnInit {
myDateValue: Date;
updatedDate: String;
ngOnInit() {
this.myDateValue = new Date();
}
onValueChange(newDate: Date) {
this.updatedDate = newDate.toISOString();
}
First we changed "updatedDate" to be a string object and we called the method "toISOString()" on our "newDate" (which is the Date returned from our date-picker). This gives us the ISO formatted string, which for our example is:
2020-08-02T23:17:00.000Z
The other option is to simply apply formatting to your date in your angular DatePipe. For example, if we change this:
</div>
Updated Date: {{updatedDate}}
</div>
To this:
</div>
Updated Date: {{updatedDate | date:"shortTime"}}
</div>
We would be applying the shortTime format which is "h:mm a" or for our example:
7:17 PM
You can read the full list of angular date formats here: https://angular.io/api/common/DatePipe
To summarize:
Vanilla JavaScript (not angular or ngx-bootstrap) is controlling the output format for the "Date" object here. While the output looks weird, the variable itself is not stored in that format but in milliseconds (UNIX epoch time). You can call methods on a Date object to get various formats (including ISO, UTC, etc) or you can format from angular by passing a format command along the datepipe.
I get the error message Uncaught TypeError: Cannot read property 'group' of undefined when formatting a date in my UI5 code. I have tried using pattern and oDate.parse() but that doesn't return the date in MM/DD/yyyy HH:mm:ss format.
Here is the function that is doing the formatting
getSomeDate: function (sDate) {
var oDate = DateFormat.getDateTimeInstance({
format: "MM/DD/yyyy HH:mm:ss",
source: {
pattern: 'YYYYMMDDhhmmss'
}
});
return oDate.format(sDate);
},
The expected result is date in the format MM/DD/yyyy HH:mm:ss.
Expected date format : MM/DD/yyyy HH:mm:ss.
Source date format: new Date() object
getSomeDate: function (sDate) {
var oDate = DateFormat.getDateTimeInstance({
pattern: 'MM/dd/yyyy hh:mm:ss
});
return oDate.format(sDate);
}
If you directly want to try this out in console, you can use below code.
function getSomeDate(sDate) {
var oDate = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: 'MM/dd/yyyy hh:mm:ss'
});
console.log(oDate.format(sDate));
}
getSomeDate(new Date());
If you want to format a date string you should use a DateTime type.
getSomeDate: function (sDate) {
var oType = new sap.ui.model.type.DateTime({
pattern: "MM/dd/yyyy hh:mm:ss",
source: {
pattern: "yyyyMMddhhmmss"
}
});
return oType.formatValue(sDate, "String");
},
if you want to use a specific pattern for formatting a date, you should use the "pattern" property. This will format your date according to the defined pattern.
The format property only allows pattern symbols. If you use a symbol that is not a valid pattern; you'll get the error "Cannot read property 'group' of undefined".
From the spec:
The format string does contain pattern symbols (e.g. yMMMd or Hms) and will be converted into the pattern in the used locale, which matches the wanted symbols best.
The symbols must be in canonical order, that is: Era (G), Year (y/Y), Quarter (q/Q), Month (M/L), Week (w/W), Day-Of-Week (E/c), Day (d/D), Hour (h/H/k/K), Minute (m), Second (s), Timezone (z/Z/v/V/O/X/x).
So if you use format the "system" tries to format the passed date according to current user settings. Using pattern will strictly follow your defined pattern.
Regards
I'm looking to modify the createdAt column date-time format which is being generated by default using sequelize Date.
From Default Date-Time format: 2018-08-14T14:59:13.334Z to this format: 14th August, 2018 2:59PM
How can I achieve this?
Migrations:
createdAt: {
allowNull: false,
type: Sequelize.DATE
},
I'm using the following instantiation code for Flatpickr.
$("#entry_date_time").flatpickr({
enableTime: true,
altInput: true,
defaultDate: moment().format("YYYY-MM-DD HH:MM:SS"),
dateFormat: "YYYY-MM-DD HH:MM:SS",
minuteIncrement: 1
});
The issue I'm having is that moment().format("YYYY-MM-DD HH:MM:SS"); gives me the right data but the output of $("#entry_date_time").val() is equal to
2017201720172017-JanJan-SatSat 0000:JanJan:0000
instead of the expected format I provided.
Any ideas as to what could be causing this would be great, thanks for any help!
Flatpickr has its own formating tokens that are different from the ones supported by moment. But the good thing is you can use parseDate and formatDate config options to support custom formatting tokens.
/* A custom datestring parser */
parseDate: (date: string, format: string) => Date;
/* Allows using a custom date formatting function instead of the built-in. Generally unnecessary. */
formatDate: (date: Date, format: string, locale: Locale) => string;
Example with moment.js compatible tokens
https://jsfiddle.net/armujahid/pwqhznj0/
const fp = flatpickr(".date", {
altInput: true,
dateFormat: "YYYY-MM-DD",
altFormat: "DD-MM-YYYY",
allowInput: true,
parseDate: (datestr, format) => {
return moment(datestr, format, true).toDate();
},
formatDate: (date, format, locale) => {
// locale can also be used
return moment(date).format(format);
}
});
Reference: my comment at https://github.com/flatpickr/flatpickr/issues/1549#issuecomment-537939826
Update: this snippet has also been added in official docs
Based on the output, and looking at the flatpickr docs for date and time, it seems that only single characters are expected in the format instead of multiple ? For example, the 4 Y's would explain the year being repeated 4 times, the month twice, etc.
The dateFormat that you need should probably be:
dateFormat: "Y-M-D H:i"
...however, I do NOT see a formatting option for the seconds portion of the time by flatpickr?
Update on the seconds:
There is a flatpickr feature request for the seconds capability.
Platform is Sencha Touch 2.1.1. I am using a datPicker in a form panel as follows:
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'dateOfEvaluation',
label: 'Date of evaluation',
dateFormat: 'm/d/Y',
value: new Date(),
picker: {
yearFrom: 2013
}
},
which is being saved to as a date type in my model:
{name: 'dateOfEvaluation', type: 'date'},
If there is a value in the store it gets rendered via an itemTpl via the follwing method:
onSelectSiteGeneral: function(view, index, target, record, event) {
console.log('Selected a SiteGeneral from the list');
var siteGeneralForm = Ext.Viewport.down('siteGeneralForm');
if(!siteGeneralForm){
siteGeneralForm = Ext.widget('siteGeneralForm');
}
siteGeneralForm.setRecord(record);
siteGeneralForm.showBy(target);
}
This all works fine and dandy.
The problem is with records that do not have dates saved in them. In localStorage for a date type, the null/empty value seems to be 0, which gets displayed on my above form as '12/31/1969.' I know I could write a handler to have this display as the current date, but am sure how to proceed (I cannot use a default value: new Date(), btw, since this does not work with a value already in the data store being rendered to the form). I know I would have to add n-days to zero to get the current date, but am unsure how to get this to rerender in my form.
Any suggestions for how to get the 0th date to show up as a more realistic date, such as the current date (I will stress that default dates do not seem to work when using the above method, onSelectSiteGeneral). Grazie!