How do I remove the day of the week from the output of the date picker?
Remove Day of the Week from Date Picker
How do I remove the day of the week from the output of the date picker?
What do you mean "the output"? Do you mean remove it from the UI?
I have added a column that uses the date editor. I have the date editor set with the following values:
editor: new yg.DateEditor({format: 'MM/dd/yyyy', minValue: '01/01/06'})
Once the date picker appears, I select a date (e.g. 10/04/2006) and the grid shows the date formatted just like above. However once I tab off the cell the date format changes to Thu Oct 05 2006 00:00:00 GMT-0400 (Eastern Daylight Time). How do I set the grid so the date reflects the format set above?
There's an editor and a renderer, both are defined independently. Renders handle formating values in cells (when not in editing mode) and obviously editors are for editing.
Here's the JS file for the editor grid example:
http://www.jackslocum.com/blog/examp...tor-example.js
There is a function defined in the local scope:
Add the column definition looks like this:Code:var formatDate = function(value){ return value.dateFormat('M d, Y'); };
Notice the renderer config option. This defines the function to call to provide custom formatting of the cells value.Code:{ header: "Available", width: 95, renderer: formatDate, editor: new yg.DateEditor({ format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6], disabledDaysText: 'Plants are not available on the weekends', disabledDates : ['^07', '04/15', '12/02/06'], disabledDatesText : 'The plants are pollinating on %0, choose a different date.'}) }
Both date formats could be the same, in the example I just wanted to show they didn't have to be.
formatDate dependencies
Jack,
Thanks for the help. I started using the formatDate code listed above in my grid but I am getting a javascript error saying ""value.dateFormat is not a function". I am including the date-util.js script in my web page.
Here is the code from my page:
Am I missing anything?[/code]Code:<html> <head> <title>GTD - Denis Mayer</title> <link> <style> #editor-grid .ygrid-col-3{ text-align:right; } </style><link> <script></script> <script></script> <script></script> <script></script> <script></script> </head> <body> Tasks</p> <div></div> <script></script> </body> </html>
Need to add a line to formatDate
Jack,
I found the problem. The formatDate function needs an additional line in order to work correctly:
Original formatDate Code:
New CodeCode:var formatDate = function(value){ return value.dateFormat('M d, Y'); };
When I ran the original code I was getting a javascript error saying that "dateFormat doesnt exist". By declaring a date variable set to value parameter the issue goes away.Code:var formatDate = function(value){ var d = new Date(value); return d.dateFormat('m/d/Y'); };
[/code]
The forum seems to have stripped all your code.
You don't need to include the date-util.js script, there is a small library included by default in yutil.js, which is part of yui-ext-core.js (and in yui-ext.js too if you are including everything).
How are you loading your data? Is it from an array, an XMLDataModel, ... ? The "dateFormat" function is defined on all Date objects. My guess is that it the internal data isn't a date object. For example, if you are using XML, you should parse the date using a preprocessor function. This way it's sorted, edited and rendered from the same date object instead of being parsed repetitively. Since you are using an editor, it's also logical that you would like changes reflected in your XML document. This is where you can provide a postProcessor function to convert the date back to a string before it is stored back in the XML file.
If you look at the script in the link I included in my last message, it is doing just that:
A post processor would be the same, only in reverse:Code:var parseDate = function(value){ return new Date(Date.parse(value)); }; ... dataModel.addPreprocessor(3, parseDate);
Manually doing this is kind of a pain and in a future version it would make sense to introduce data types that do this for you automatically.Code:var formatXmlDate = function(value){ return value.format('m/d/y'); }; ... dataModel.addPostprocessor(3, formatXmlDate);
I am using PHP, MySQL and the yahoo-ext grid.
The grid is calling a php file to get the rows in JSON format. So naturally, I'm using the JSONDataModel to load the grid.
When I do that, the dates are coming back as strings which is why I'm casting them to a date.
Same thing with the JSONDataModel, add the preprocessor function some you don't parse them every time you do something with it.
Posting Permissions
Reply With Quote