CODEWITHSUNDEEP
phpjqueryajaxjsgrid
Igor Matheus
Igor Matheus

Reputation: 11

How to insert a date field JSGrid?

I'm using this code to create a simple CRUD using Jsgrid and php, but the page isn't loading when i change the type field to date. I watched almost the entire youtube and I didn't find anything about.

I dont even know what to do

Can somebody help me?

index.php:

    <body>  
        <div class="container">  
   <br />
   <div class="table-responsive">  
    <h3 align="center">Inline Table Insert Update Delete in PHP using jsGrid</h3><br />
    <div id="grid_table"></div>
   </div>  
  </div>


  <script type="text/javascript" src="js.js"></script>
    </body>

js.js

var db = {

    loadData: function(filter){
        return $.ajax({
         type: "GET",
         url: "fetch_data.php",
         data: filter
        });
       },
       insertItem: function(item){
        return $.ajax({
         type: "POST",
         url: "fetch_data.php",
         data: item
        });
       },
       updateItem: function(item){
        return $.ajax({
         type: "PUT",
         url: "fetch_data.php",
         data: item
        });
       },
       deleteItem: function(item){
        return $.ajax({
         type: "DELETE",
         url: "fetch_data.php",
         data: item
        });
       }

};

var MyDateField = function (config) {
    jsGrid.Field.call(this, config);
};

MyDateField.prototype = new jsGrid.Field({

    sorter: function (date1, date2) {
        return new Date(date1) - new Date(date2);
    },

    itemTemplate: function (value) {
        return new Date(value).toDateString();
    },

    insertTemplate: function (value) {
        return this._insertPicker = $("<input class='date-picker'>").datetimepicker();
    },

    editTemplate: function (value) {
        return this._editPicker = $("<input class='date-picker'>").datetimepicker();
    },

    insertValue: function () {
        return this._insertPicker.data("DateTimePicker").useCurrent();
    },

    editValue: function () {
        return this._editPicker.data("DateTimePicker").useCurrent();
    }
});

jsGrid.fields.date = MyDateField;

    $('#grid_table').jsGrid({

     width: "100%",
     height: "600px",

     filtering: true,
     inserting:true,
     editing: true,
     sorting: true,
     paging: true,
     autoload: true,
     pageSize: 10,
     pageButtonCount: 9,
     deleteConfirm: "Do you really want to delete data?",

     
     controller: db,

     fields: [
      {
       name: "id",
    type: "hidden",
    css: 'hide'
      },
      {
    title:"Load Number",
    name: "loadnumber", 
    type: "text", 
    width: 150, 
    validate: "required"
      },
      {
    title:"Broker MC",
    name: "brokermc", 
    type: "text", 
    width: 150, 
    validate: "required"
      },
      {
    title:"Broker",
    name: "brok3r", 
    type: "text", 
    width: 50, 
    validate: function(value)
    {
     if(value > 0)
     {
      return true;
     }
    }
      },
      {
    title:"Driver",
    name: "driver", 
    type: "text", 
    width: 150, 
    validate: "required"
      },
      {
    title:"Load Date",
    name: "loaddate", 
    type: "date"
      },
      {
       type: "control"
      }
     ]

    });

i tried to rename to "MyDateField", the page loads but the item field disappears, how can i fix it?

Upvotes: 1

Views: 187

Answers (0)

Related Questions