jQWidgets Forums

Tagged: datetimeinput, jqxdatetimeinput, valuechanged

This topic contains 18 replies, has 2 voices, and was last updated by akshatha 12 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Alert only when date changes (Im not interested in time here) Posts

March 15, 2013 at 6:35 am Alert only when date changes (Im not interested in time here) #17113

akshatha

Member

Hi,

I have designed UI using jqwidgetes2.5.5 lib, where user can modify data.

I want to display one confirm() [which says “Do you really want to change the data?”]box, when users tries to modify data.

This is working correct for other inputs, but when i click on date, I get confirm() box even when i dint changed date.

Please help me out to figure out this and I want confirm() box should come only if i change the date?

Thanks,
Akshata

March 15, 2013 at 7:03 am Alert only when date changes (Im not interested in time here) #17115

Dimitar

Participant

Hello Akshata,

Here is how to achieve your requirement:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // Create a jqxDateTimeInput
            $("#jqxWidget").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme, formatString: "f" });
            var oldV = $("#jqxWidget").jqxDateTimeInput('getDate');
            $('#jqxWidget').on('valuechanged', function (event) {
                var newV = event.args.date;
                var oldDate = oldV.getDate();
                var newDate = newV.getDate();
                var oldMonth = oldV.getMonth();
                var newMonth = newV.getMonth();
                var oldYear = oldV.getFullYear();
                var newYear = newV.getFullYear();
                if ((oldDate != newDate) || (oldMonth != newMonth) || (oldYear != newYear)) {
                    alert("Date changed.");
                };
                oldV = newV;
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 8:50 am Alert only when date changes (Im not interested in time here) #17273

akshatha

Member

Thanks for your reply, as this is UI all data coming dynamically. here im posting piece of code which may help you to understand,

column = [{text: ‘ID’, datafield: ‘InvestmentId’, editable: false },
{text: ‘AccountNumber’, datafield: ‘AccountNumber’, width: 130, cellclassname: ‘text_to_uppercase’ },
{text: ‘Amount’, datafield: ‘Amount’ },
{text: ‘SettlementDate’, datafield: ‘SettlementDate’, columntype: ‘datetimeinput’, cellsformat: ‘yyyy-MM-dd’,
validation: function (cell, value) {
if (value== ”) {
return { result: false, message: “SettlementDate cannot be empty!” };
}
return true;
}
}];

from here updaterow function is called where alert will come, it is not possible to store previous values to compare.. please help me out… m hitting my head to solve ths small issue from 2days.

Thanks,
AKSHATHA

March 18, 2013 at 10:00 am Alert only when date changes (Im not interested in time here) #17281

Dimitar

Participant

Hello AKSHATHA,

Here is a solution for jqxGrid’s datetimeinput editor:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var oldV;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      initeditor: function (row, cellvalue, editor) {
                          oldV = editor.jqxDateTimeInput('getDate');
                      },
                      validation: function (cell, value) {
                          var newV = value;
                          var oldDate = oldV.getDate();
                          var newDate = newV.getDate();
                          var oldMonth = oldV.getMonth();
                          var newMonth = newV.getMonth();
                          var oldYear = oldV.getFullYear();
                          var newYear = newV.getFullYear();
                          if ((oldDate != newDate) || (oldMonth != newMonth) || (oldYear != newYear)) {
                              return { result: false, message: "Date changed." };
                          };
                          return true;
                      }
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });
            // events
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
            margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 10:35 am Alert only when date changes (Im not interested in time here) #17284

akshatha

Member

thank you,
It is showing same error “Date dint changed” for both changing date and not changing it, plss help me out

if ((oldDate != newDate) || (oldMonth != newMonth) || (oldYear != newYear)) {
return { result: false, message: “Date changed.” };
};

if ((oldDate == newDate) || (oldMonth== newMonth) || (oldYear == newYear)) {
return { result: false, message: “Date dint changed.” };
};

Thanks,
Akshatha

March 18, 2013 at 11:12 am Alert only when date changes (Im not interested in time here) #17287

Dimitar

Participant

Hi Akshatha,

There is no need of the second check. If the date is the same (only the time is different), then there will be no alert and the function returns true.

                          if ((oldDate != newDate) || (oldMonth != newMonth) || (oldYear != newYear)) {
                              return { result: false, message: "Date changed." };
                          };
                          return true;

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 11:22 am Alert only when date changes (Im not interested in time here) #17288

akshatha

Member

im really sorry Dimitar, i’m getting alert when i dint changed date also.
this is my updaterow funnction,

updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
if(confirm(“Do you really want to change the data?”)){
commit(true);
}
else {
commit(false);
}
}

{text: ‘SettlementDate’, datafield: ‘SettlementDate’, columntype: ‘datetimeinput’, cellsformat: ‘yyyy-MM-dd’,
initeditor: function (row, cellvalue, editor) {
var oldV = editor.jqxDateTimeInput(‘getDate’);
},
validation: function (cell, value) {
var newV = value;
var oldDate = oldV.getDate();
var newDate = newV.getDate();
var oldMonth = oldV.getMonth();
var newMonth = newV.getMonth();
var oldYear = oldV.getFullYear();
var newYear = newV.getFullYear();
if ((oldDate != newDate) || (oldMonth != newMonth) || (oldYear != newYear)) {
return { result: false, message:”date changed” };
}

return true;
}
}

Thanks,
Akshatha j

March 18, 2013 at 11:26 am Alert only when date changes (Im not interested in time here) #17289

akshatha

Member

And when i did alert(“”+oldV+”,”+newV);, i found that oldV and newV are similar when i changed date. Please help me out

Thanks,
Akshatha J

March 18, 2013 at 11:36 am Alert only when date changes (Im not interested in time here) #17291

Dimitar

Participant

Hi Akshatha j,

I think the issue may come from the definition of the oldV variable. In our example, it is defined before it is used in initeditor. Please try it that way. Also, do you experience any issues by just running our example?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 11:51 am Alert only when date changes (Im not interested in time here) #17293

akshatha

Member

Thank you soo much Dimitar, it worked with small change in assigning oldV ie oldV=cellvalue;,

initeditor: function (row, cellvalue, editor) {
oldV =cellvalue; //
},
validation: function (cell, value) {
var newV = value;
var oldDate = oldV.getDate();
var newDate = newV.getDate();
var oldMonth = oldV.getMonth();
var newMonth = newV.getMonth();
var oldYear = oldV.getFullYear();
var newYear = newV.getFullYear();
alert(“”+oldDate+oldMonth+oldYear+”,”+newDate+newMonth+newYear);
if ((oldDate == newDate) && (oldMonth == newMonth) && (oldYear == newYear)) {
return { result: false, message:”date dint changed” };
}
return true;

but last question, after if condition i want to return false with no error message, because when i get this error it forces to edit date means it will not let other column to edit.

thanks,
Akshatha

March 18, 2013 at 11:58 am Alert only when date changes (Im not interested in time here) #17294

Dimitar

Participant

Hi Akshatha,

To do this, replace

return { result: false, message:”date dint changed” };

with

return false;

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 12:01 pm Alert only when date changes (Im not interested in time here) #17295

akshatha

Member

But when i dint changed date, it is showing “Entered value is not valid” error. How to overcome with this??

Thanks,
Akshatha

March 18, 2013 at 12:11 pm Alert only when date changes (Im not interested in time here) #17298

Dimitar

Participant

Hi Akshatha,

Here is a different approach, using the cellvaluechanging callback function:

                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 200, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                          var oldDate = oldvalue.getDate();
                          var newDate = newvalue.getDate();
                          var oldMonth = oldvalue.getMonth();
                          var newMonth = newvalue.getMonth();
                          var oldYear = oldvalue.getFullYear();
                          var newYear = newvalue.getFullYear();
                          if ((oldDate == newDate) && (oldMonth == newMonth) && (oldYear == newYear)) {
                              alert("Date didn't change.");
                              return oldvalue;
                          };
                          return newvalue;
                      }
                  },

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 12:33 pm Alert only when date changes (Im not interested in time here) #17301

akshatha

Member

Dimitar i dont want any alert when date is not modified, its should not call any function. Because when i edit other column it will throw alert oly if i change the data. please help me with this, m running out with time given. please do help me

thanks,
Akshatha

March 18, 2013 at 12:40 pm Alert only when date changes (Im not interested in time here) #17302

Dimitar

Participant

Hi Akshatha,

I am not sure I understand you completely. As I get it, you wish to return the old value if the date is not changed and return the new value if the date is changed. Then the code should remain the same, just remove the line with the alert.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

You must be logged in to reply to this topic.