Disable click after date is over

mstudio

I using "dataTable" to show travel dates where the layout is for right to left
Dates | Cycle | Status | Ordering button
the ordering button is calling javascript that populate form with some values.
the question is how I can disable the click on the button after the date is over, can I check some text of the cell and if this equal to some text then the button is active and if it is equal to other text it is inactive? or better to check the dates?

Bindrid2

If I understand your question right, using render ( https://datatables.net/reference/option/columns.render ) , something like

(note: I used moment for this ( http://momentjs.com/docs/#/query/is-after/ )

$("#tbl").DataTable({
    columns:[{data:"Dates"}, 
        {data:"Cycle"},
        {data:"Status"},
        {data:null, render:function(data, type, row, meta){
         
             if(row.Status === "Closed" || moment(row.Dates).isAfter(Date.now()){

                  return "<button type='button' disabled='true'>Add</button>";
              }
              else {
                      return "<button type='button'>Add</button>";
               }
}]
 });

mstudio

Thanks, I will try it, "moment" is part of "datatables" or I need to add it?
I using dates range something like this "04/05/2018-09/05/2018".
I can just check the status and change the order button?
I do not understand where is the part setting the button, how this is work?
There is way to test this?

allan

"moment" is part of "datatables" or I need to add it?

MomentJS is a date time library that is not included in DataTables. You'd need to add it if you want to make use of its abilities through the plug-ins available for DataTables.

I can just check the status and change the order button?

If that is what you want to do, yes. However from your original question it sounds like you want to control each button in the column, which is what @Bindrid2's solution does.

Allan

mstudio

Can you help to do it on this example page:
http://80.244.168.168/tours/jeep-tour-in-the-mountainous-greece-and-villages-of-zagorija/
The table is on the third tab from the right (titled: מחירים ותאריכים)
I want to disable and green button and change it color when the dates are passed

mstudio

Still need help, new URL is
https://israel4x4.com/tours/jeep-trip-to-romania-the-carpathian-mountains-of-transylvania/

mstudio

I checked to code, there was some error of missing closing of brackets.
The code remove the data of Status column but I want to keep it, I want to enable or disable the order button.
I getting undefined for 'row.Status' and for 'row.Dates' when I checked with alert.
if the order of

 columns:[{data:"Dates"},
        {data:"Cycle"},
        {data:"Status"},

matters?
I using Hebrew so the order of the table is

Ordering button | Status | Cycle | Dates

It is the third tab from the right labeled "מחירים ותאריכים"