Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Help with DatePicker

  1. #1

    Default Help with DatePicker

    Hi

    I ve try to use your exemple in "editor-example.js" with my own data.

    But, when i try to edit the date, i don't have the datePicker but only a text editor?

    What's happened.

    My code

    Code:
    EditorExample = function(){
        var dataModel;
        var grid;
        var colModel;
        
    	var myData = [
    			['true','Remplacer', 4500, '12/12/2006'],
                ['true','Nettoyer', 4500, '12/12/2006'],
               ['true','Controler', 4500, '12/12/2006'],
               ['true','Niveaux', 4500, '12/12/2006']           
    		];
            dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);
    		
    		
        var formatMoney = function(value){
            value -= 0;
            value = (Math.round(value*100))/100;
            value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
            return "$" + value;  
        };
        
        var formatBoolean = function(value){
            return value ? 'Yes' : 'No';  
        };
        
        var formatDate = function(value){console.log(value);
            return new Date(Date.parse(value)).dateFormat('M d, Y');  
        };
        
        var parseDate = function(value){
            return new Date(Date.parse(value));  
        };
        
        return {
            init : function(){
                var yg = YAHOO.ext.grid;
                var cols = [{ 
                       header: "Common Name", 
                       width: 160, 
                       editor: new yg.TextEditor({allowBlank: false})
                    },{
                       header: "Light", 
                       width: 130
                    },{
                       header: "Price", 
                       width: 70, 
                       renderer: formatMoney, 
                       editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
                    },{
                       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.'})
                    }];
                colModel = new YAHOO.ext.grid.DefaultColumnModel(cols); 
        		colModel.defaultSortable = true;
        		
        		/*var schema = {
                    tagName: 'plant',
                    id: 'use-index',
                    fields: ['common', 'light', 'price', 'availability', 'indoor']
                };*/
                /*dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
                dataModel.addPreprocessor(2, parseFloat);
                dataModel.addPreprocessor(3, parseDate);
                dataModel.addPreprocessor(4, Boolean);
                dataModel.setDefaultSort(colModel, 0, "DESC");*/
        		
        		grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
        		// to use double click to edit:
        		//grid.getSelectionModel().clicksToActivateCell = 2;
        		grid.render();
        		
        		//dataModel.load('/blog/examples/plants.xml'); 
            },
            
            // filtering support, regex, function or text match
            filter : function(e){
                var mfilter = function(value){
                    return (value == 'Shade');
                }
                dataModel.filter({0: /^B.*/i, 1: mfilter});
            },
            
            // hide columns
            hide : function(e){
                colModel.setHidden(1, true);
            }
        };  
    }();
    
    YAHOO.util.Event.on(window, 'load', EditorExample.init, EditorExample, true);
    //YAHOO.util.Event.on(document, 'keypress', EditorExample.hide, EditorExample, true);
    Thanks

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    The DatePicker works with dates in the data model and you are feeding it strings. Notice in the original code the addPreprocessor call that parsed it into a Date object. Unfortunately, addPreprocessor is not available for straight array data (DefaultDataModel) so you will need to parse the dates manually.

  3. #3

    Default

    thanks Jack

    But can you give me an example of formating string into date to make datepicker working?

    thanks

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Your data looks like this:
    Code:
    var myData = [
             ['true','Remplacer', 4500, '12/12/2006'],
                ['true','Nettoyer', 4500, '12/12/2006'],
               ['true','Controler', 4500, '12/12/2006'],
               ['true','Niveaux', 4500, '12/12/2006']           
          ];
    So you could loop through:

    Code:
    for(var i = 0, len = myData.length; i < len; i++){
        myData[i][3] = new Date(Date.parse(myData[i][3]));
    }
    It's not pretty but it would work.

  5. #5

    Default

    Thanks a lot Jack

    I'll try it tonigth.

  6. #6

    Default

    It does not work.

    I have got the following error : dateVal.getMonth is not a function when i try to edit the date.

  7. #7

    Default

    It does not work.

    I have got the following error :
    Code:
    dateVal.getMonth is not a function
    when i try to edit the date.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    12

    Default

    I was also trying to use the example edit-grid.js. I also downloaded the plants.xml file. Other than changing the paths to the local files (including YUI and YUI-ext), I did not make any edits.

    Even when loading the plants.xml, I do not get the DatePicker in the date Available field. I noticed also that in the price field if I enter a value over max, I do not get the red squiggly line (it just doesn't accept the value).

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    The editor example is in the RC2 download. It has the right paths and includes everything you need. It will need to be on a server (localhost is fine) for XHR to load the XML file.

    If dateVal.getMonth is failing then you haven't parsed the dates. getMonth is defined on the Date object in JS.

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    12

    Default

    cool I got things sorted out -- not too surprisingly the problem was me doing something really stupid.

    I've been putting the grid in the cakePHP framework, so I had files in non-standard places and messed up the paths. Once I changed the paths in grid.css, editing works like a charm -- thanks.

    ok, I'm off to go screw-up the data paging example now :lol:

Page 1 of 2 12 LastLast

Similar Threads

  1. DatePicker example
    By corey.gilmore in forum Community Discussion
    Replies: 19
    Last Post: 15 Nov 2007, 10:31 PM
  2. DatePicker, DateField
    By edgars in forum Ext 2.x: Help & Discussion
    Replies: 15
    Last Post: 26 Mar 2007, 6:42 AM
  3. Inputs to DatePicker
    By alindsay55661 in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 3 Mar 2007, 4:23 PM
  4. [1.0a2 Rev 6] DatePicker bugs
    By Arikon in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 2 Mar 2007, 9:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •