Disable click after date is over

Disable click after date is over

mstudiomstudio Posts: 14Questions: 2Answers: 0
edited July 2018 in Free community support

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?

Answers

  • Bindrid2Bindrid2 Posts: 79Questions: 4Answers: 12

    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>";
                   }
    }]
     });
    
    
    
  • mstudiomstudio Posts: 14Questions: 2Answers: 0

    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?

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    "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

  • mstudiomstudio Posts: 14Questions: 2Answers: 0

    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

  • mstudiomstudio Posts: 14Questions: 2Answers: 0
    edited October 2018

    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 "מחירים ותאריכים"

This discussion has been closed.