Set Default Current Date and Time To a Text Box by jQuery

Set Default Date Time to a Text Box

Code :-.....

<div id="left">
    From : <input type="text" name="FromDate" id="FromDate" style="width:130px"/>
</div>

<script type="text/javascript">
   $(function () {
     $("#FromDate").datetimepicker({ dateFormat: 'dd-M-yy' });
     $("#FromDate").datetimepicker('setDate', new Date());
     $('#Time').val('24');
   });
</script>

In Red Color  "$("#FromDate").datetimepicker({ dateFormat: 'dd-M-yy' });" To initialize the DateTime picker.

In Blue Color "$("#FromDate").datetimepicker('setDate', new Date());" To Set the Current Date and Time in the Text Box

"$('#Time').val('24');"  This is to Set a default Value.

We can also write a single line function to set the current date and time as a default value

$("#FromDate").datetimepicker({ dateFormat: 'dd-M-yy' }).datetimepicker('setDate', new Date())
 

Add Hyper Link to a jTable Record

Normal jTable Records

jTable Records with Hyperlink

Coding...


jTableColumnName: {
                        title: 'Column Name',
                        width: '4%',
                        display: function (data) {
                            if (data.record.SomeOtherColumn != null) {
                                return $('<a href="/Pages/Project.aspx?ColumnId=' +
                                                  data.record.HjTableColumnNameIdentity + '">' +
                                                   data.record.jTableColumnName+ '</a>');
                            }
                            else {
                                return data.record.jTableColumnName
                            }
                        }
                    },


In the above image, some record only having hyperlink. if we need hyperlink for all the records, we can remove the "if-else" condition. If we are going to specify a condition, that should be in the jtable container.
for example,
Student table containing student name, the examination pass/fail informaion.
The student name, who passed the examination, having the hyperlink. others students names are without hyperlink. so pass/fail information should be in the jtable container.

Hyperlink for all the records




jTableColumnName: {
                        title: 'Column Name',
                        width: '4%',
                        display: function (data) {
                                   return $('<a href="/Pages/Project.aspx?ColumnId=' +
                                                  data.record.HjTableColumnNameIdentity + '">' +
                                                  data.record.jTableColumnName+ '</a>');                          
                        }
                    },

jTable Add Record Form Validation

Before Perform jQuery Validation Coding, We need to include the jQuery-validation javascript resource file in our Application.

Lest Consider the Following..
We have to enter Country Table with country name, country code.

Coding To perform the Validation....

$('#CountryTableContainer').jtable({
                title: 'Countries List',
                paging: true,
                sorting: true,
                defaultSorting: 'CountryCode ASC',
                selecting: true, //Enable selecting
                multiselect: true, //Allow multiple selecting
                selectingCheckboxes: true, //Show checkboxes on first column
                selectOnRowClick: false, //Enable this to only select using checkboxes
                actions: {
                    listAction: '/Pages/Country.aspx/CountryListByFilter', //List the Data
                    createAction: '/Pages/Country.aspx/CreateCountry', //This is for Create a New Country Details
                    updateAction: '/Pages/Country.aspx/UpdateCountry', // This is for Update the Records
                    deleteAction: '/Pages/Country.aspx/DeleteCountry' //This is for Delete the Records
                },
                fields: {
                    CountryIdentity: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    CountryCode: {
                        title: 'Country Code',
                        width: '33%'
                    },
                    CountryName: {
                        title: 'Country Name',
                        width: '33%'
                    }
                },
                //Initialize validation logic when a form is created
                formCreated: function (event, data) {
                    data.form.find('input[name="CountryCode"]').addClass('validate[required]');
                    data.form.find('input[name="CountryName"]').addClass('validate[required]');
                    data.form.validationEngine();
                },
                //Validate form when it is being submitted
                formSubmitting: function (event, data) {
                    return data.form.validationEngine('validate');
                },
                //Dispose validation logic when form is closed
                formClosed: function (event, data) {
                    data.form.validationEngine('hide');
                    data.form.validationEngine('detach');
                }
            });

Get More Knowledge, click the Following Link
https://github.com/posabsolute/jQuery-Validation-Engine

 Add Record

Edit Record

jQuery, jTable and JavaScript

jTable Container Automatic Refresh For a particular time interval

JavaScript Code to Reload...

   window.setInterval(function () { $('#SubmittedHAWBContainer').jtable('reload'); }, 2000);

Read URL Parameter

JavaScript Code

  <script type="text/javascript">
        $.urlParam = function (name) {
            var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
            return results[1] || 0;
        }
    </script>

Function to capture the URL Parameter..

 function definedByUser() {
            var userDEfinedVaraiable=    $.urlParam('ParameterName');

 }

DatePicker

 $('#userDefinedDateArea').datepicker({ dateFormat: 'dd-M-yy'});

TimePicker - For A Text Box

  $('#USerDefinedTimeTextBox').timepicker();

Time Picker - For A jTable AddRecord Action Form

formCreated: function (event, data)
                {
                    var $input_start_time = data.form.find ('input[name="UserDefinedTime"]');
                    $input_start_time.addClass("time");
                    $input_start_time.timepicker();
                }