I am using ExtJS 2.1 and I have the following problem, I hate a 'datefield'. Now the date has to be entered in the format 'MM/DD/YYYY'. The problem is if the user enters something like '21/17' or '16/05' it gets converted to a valid date. (21/17 gets converted to 9/17/2015 and 16/05 gets converted to 4/05/2015). How do I override this behavior? I tried writing my own validator but that didn't help either, even if my validator returns 'false' the conversion still happens. Here is the code below:
var d = new Ext.form.DateField({
el: el.dom,
id: id,
format: 'm/d/Y',
hideTrigger: false,
allowBlank: true,
disabled: isDisabled,
validator: testForShortDate,
validateOnBlur: true,
minLength:6,
//validationEvent: false, //string or boolean
invalidText: 'Enter date as MM/DD/YYYY',
menuListeners: Ext.applyIf({
select: function (m, d) {
Ext.form.DateField.prototype.menuListeners.select.apply(this, arguments);
this.focus.defer(100, this);
onDateSelect(m, d, this);
}
})
});
d.render();
d
function testForShortDate(date) {
if (date.split("/").length != 3) {
console.log(date.split("/").length);
return false;
}
return true;
Can anyone help?
There are alternative date formats which ExtJS will try to use if the datefield's value cannot be parsed using the configured format. These formats can be defined using the altFormats property.
By default the value is:
m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d
which explains why something like 21/17 gets converted to 9/17/2015, as the format m/d is used here (the "21st" month of 2014 is really the 9th of 2015).
If you want to disable this altogether, just set the property to an empty string:
altFormats: ''
Related
Is there any function to get the input that was provided to moment()
In the example below, inputDate becomes null.
var date = moment("invalid date");
if(!data.isValid()){
return { message: "Invalid date", inputDate: date }
}
I can access the input using internals i.e. date._i but was wondering if there's any function that would return the input provided to moment constructor.
You can use creationData()
After a moment object is created, all of the inputs can be accessed with creationData() method:
moment("2013-01-02", "YYYY-MM-DD", true).creationData() === {
input: "2013-01-02",
format: "YYYY-MM-DD",
locale: Locale obj,
isUTC: false,
strict: true
}
Here a live example:
var date = moment("invalid date", moment.ISO_8601);
console.log(date.creationData().input);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
As a side note:
I've used moment.ISO_8601 in my snippet to prevent Deprecation Warning, as shown here.
Something quite similar was asked (but not a duplicate) was asked here.
As the title suggests, I have trouble with the rangeSelector input when setting the global useUTC option to false, i.e. the following setting:
Highcharts.setOptions({
global: {
useUTC: false
}
});
I have two fiddles for demostrating this issue.
Fiddle 1 - Date & hour formatting (works)
Fiddle 1 uses date & time as date formatting option, i.e.
inputDateFormat: "%Y-%m-%d %H:%M:%S",
inputEditDateFormat: "%Y-%m-%d %H:%M:%S"
which is working fine. If you, for example, choose 2010-09-22 00:00:00 as input, it will output From: 2010-09-22 00:00:00+02:00 (since I'm in GMT+2).
Fiddle 2 - Only date formatting (does not work)
Fiddle 2 uses only the date as date formatting option, i.e.
inputDateFormat: "%Y-%m-%d",
inputEditDateFormat: "%Y-%m-%d"
Choosing 2010-09-22 in this example should produce the same output as the example in Fiddle 1 but outputs From: 2010-09-22 02:00:00+02:00. I'm not sure how to proceed from here. I suppose writing a custom fallback function for the date parsing would be an option but my guess is that I'm missing something else here.
Update 1
Based on this this github topic (mentioned in the comments), I wrote this custom inputDateParser function:
inputDateParser: function (value) {
var temp_date;
if (defaultOptions.global.useUTC) {
temp_date = moment.utc(value);
}
else {
temp_date = moment(value);
}
return temp_date.valueOf();
}
(..which requires storing the global options into a variable)
var defaultOptions = Highcharts.setOptions({
global: {
useUTC: false
}
});
Working fiddle
I try to sort dates like "Di, 29.03.2016" but this doesnt work because the Sorter doesnt have a AddParser for this format.
I know that the numbers should replace like dd/mm/yyyy,
but how should i replace "Di, " ?
Since I can't tell what language you're targeting ("Di" is the abbreviation for December in several languages), I think it might be easiest to use a date library like sugar or datejs to parse those dates for you.
Make sure to set the locale before the following code.
Sugar (demo):
Date.setLocale('es'); // Spanish
$.tablesorter.addParser({
id: 'sugar',
is: function() {
return false;
},
format: function(s) {
var date = Date.create ? Date.create(s) : s ? new Date(s) : s;
return date instanceof Date && isFinite(date) ? date.getTime() : s;
},
type: 'numeric'
});
DateJS (demo):
// make sure to load the desired locale file
// full list: https://github.com/datejs/Datejs/tree/master/build
$.tablesorter.addParser({
id: 'datejs',
is: function() {
return false;
},
format: function(s) {
var date = Date.parse ? Date.parse(s) : s ? new Date(s) : s;
return date instanceof Date && isFinite(date) ? date.getTime() : s;
},
type: 'numeric'
});
Note: The above two demos are using my fork of tablesorter & copied from this file, but these parsers will work in the original tablesorter (v2.0.5).
Note 2: There is also a parser for jQuery Globalize (demo), but it is a bit more complicated to set up and use, so I didn't include it here; and the globalize parser may not work properly with the original version of tablesorter.
I've been using tablesorter a lot in my website like this
$(".tablesorter").tablesorter({
widgets: ['zebra'],
dateFormat: 'uk',
});
But i've a problem with date in the format : MM/YYYY (it's when I don't have the day I prefer showing 12/2005 than 00/12/2005).
This format does not work with tablesorter dateFormat uk. How to make it working ?
And the difficulty is that I can have in the same table differents formats like this :
Date - Title
11/2005 - Movie 1
12/11/2005 - Movie 2
2006 - Movie 3
Thank you.
You could add a custom parser:
$.tablesorter.addParser({
id: 'rough-date',
is: function() {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format to look like an ISO 8601 date (2005-11-12).
// Month-only dates will be formatted 2005-11.
return s.split('/').reverse().join('-');
},
type: 'text' // sort as strings
});
And then use it like this (where 0 is the column number that contains the date):
$(".tablesorter").tablesorter({
headers: {
0: {
sorter:'rough-date'
}
}
});
Here's a JSFiddle.
I have been trying to find a clear explanation for a significant amount of time now but I just can't seem to understand how this method works. Below is the official documentation from the Jquery UI API. It may be clear to others but I find it a bit vague. I simply want to take an array of dates and disable them. I am able to make all dates not selectable but not the ones I want.
beforeShowDayType: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.
This is my (incomplete) code so far.
$(document).ready(function() {
var array = ["2014-01-03","2014-01-13","2014-01-23"];
$('#fromDate').datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) {
{
return [false, "", "Booked out"];
} else {
return [true, "", "available"];
}
}
});
});
Try this:
beforeShowDay: function(date) {
if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array) > -1)
{
return [false,"","Booked out"];
}
else
{
return [true,'',"available"];
}
}