Rectangle 27 0

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
      .form-group {
        float:left;
        margin: 1.2em;
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <form name="form" novalidate="" ng-submit="processForm()"
        class="form-inline">

      <div class="form-group col-md-4">
        <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
        <br/><input class="form-control" id="location" name="location" type="text" ng-model="location"
               ng-required="true"
               ng-autocomplete details="details" options="options" placeholder="Location"/>
      </div>
      <div class="form-group col-md-4">
        <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
        <br/><input class="form-control" id="startDate" name="startDate" type="text"
               datepicker-popup="{{format}}"
               ng-model="startDate"
               is-open="openedStart" datepicker-options="dateOptions"
               ng-required="true" close-text="Close" ng-click="openStart($event)"/>
      </div>
      <div class="form-group col-md-3">
        <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
        <br/><select class="form-control" id="startTime" ng-model="selectedStartTime"
                ng-options="time.label for time in times"
                ng-required="true">
        </select>
      </div>
      <div class="form-group col-md-4">
        <label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
        <br/><input class="form-control" id="endDate" name="endDate" type="text"
               datepicker-popup="{{format}}"
               ng-model="endDate"
               is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions"
               ng-required="true" close-text="Close" ng-click="openEnd($event)"/>
      </div>
      <div class="form-group col-md-3">
        <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
        <br/><select class="form-control" id="endTime" ng-model="selectedEndTime"
                ng-options="time.label for time in times"
                ng-required="true">
        </select>
      </div>
    <!--</div>-->
    <div class="row align-center">
      <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled"/>
    </div>
  </form>
    </div>
    <!-- /container -->
  </body>

</html>

html - Inline form in one row with labels above input fields - Stack O...

html css angularjs forms twitter-bootstrap-3
Rectangle 27 0

Yes I do it. I used span tag in first td with "newrow" class and now it works fine.

<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">

function addrow()
{
    var node = document.getElementsByTagName('span');
    var r = 3;
    var c = 0;
//alert(node.length);
    for(var i=0; i<node.length; i++)
    {
      //alert(node.length);
        var nod = node[i];
         if(nod.getAttribute('class') == 'newrow')
         {
            r++;
            c++;
         }
    }

     var table= document.getElementById('newtable');
       var row= table.insertRow(r);
       var cell1 =row.insertCell(0);
       var cell2 =row.insertCell(1);
       var cell3 =row.insertCell(2);
       var cell4 =row.insertCell(3);
       var cell5 =row.insertCell(4);
       var cell6 =row.insertCell(5);
       
        cell1.innerHTML ="<span class='newrow'></span><input type='text' style='width:98%;height:30px;' class='datepicker' placeholder='date' id='date"+c+"' name='date["+c+"]' autocomplete='OFF' />";
	   
       cell2.innerHTML ="<input type='text' style='width:98%;height:30px;' id='time"+c+"' name='time["+c+"]'  class='input-block-level time' placeholder='time' autocomplete='OFF'/>";
	   
       cell3.innerHTML ="<input type='text' style='width:98%;height:30px;' id='temerature"+c+"' name='temerature["+c+"]' class='input-block-level' placeholder=' temperature'  autocomplete='OFF'/>";
	   
       cell4.innerHTML ="<input type='text' style='width:98%;height:30px;' id='rlt_humidity"+c+"' name='rlt_humidity["+c+"]' class='input-block-level' placeholder='relative humidity'  autocomplete='OFF'/>";
	   
       cell5.innerHTML ="<input type='text' style='width:98%;height:30px;' id='diff_pressure"+c+"' name='diff_pressure["+c+"]' class='input-block-level' placeholder='diff pressure'  autocomplete='OFF'/>";
   
       cell6.innerHTML ="<li onclick='addrow()' class='icon-plus-sign' ></li><li onclick='DeleteRow()' class='icon-remove-sign' ></li> ";
  
  $(document).ready(function() {
        $( ".datepicker" ).datepicker({
          dateFormat: 'dd-mm-yy',
          maxDate: '0',
          onClose: function () {
            $(this).focus();  
          }
        });
    });
  }

    
	function DeleteRow(){

var node_list = document.getElementsByTagName('span');
 var r=2;
 
	for (var i=0; i<node_list.length; i++) {
    	var node = node_list[i];
     	if (node.getAttribute('class') == 'newrow') {
           r++;
     	}
 	}
	document.getElementById("newtable").deleteRow(r);
}
</script>
</head>
<body  onload="addrow()">
<div style="border:1px solid black; width:100%; margin-left:auto; margin-right:auto;" class="col-md-12">
<form method="post" action="#">

	<div class="col-md-12">

                            <div style="font-weight: bolder;margin-bottom: 10px;font-size: 18px;"><center>ENVIRONMENT CONTROL OF PACKING AREA</center> </div>
                            <!--<div style="font-weight: bolder;font-size:15px;margin-left: 30px;" >Date:</div>-->
                           <div style="margin-top: 10px;margin-bottom: 80px;">
                                    <table id="newtable" class="table table-bordered">
                                      <thead >
                                        <tr>
                                            <th rowspan="3" style="vertical-align:top"><center>Date</center></th>
                                            <th rowspan="3"  style="vertical-align:top"><center>Time</center></th>
                                            <th colspan="3"><center>Parameter</center></th>
                                            <th rowspan="3"></th>
                                          </tr>
                                          <tr>
                                            <th>Temperature</th>
                                            <th>Relative Humidity</th>
                                            <th>Differential  pressure</th>
                                          </tr>
                                          <tr>
                                            <th style="width:149px;"> 30 c</th>
                                            <th style="width:158px;" > 50 %</th>
                                            <th style="width:150px;">0.2 to 0.8 mm</th>
                                          </tr>

                                      </thead>

                                  </table>
                             </div>
								                      <button type="submit" name="submit" class="btn btn-info" style="margin-left:520px;">Submit</button>

             <div style="margin-top: 80px;margin-bottom: 100px;">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>Production Chemist  Sign &date</th>
                      <th>QA Chemist&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;          Sign &date</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td style="height: 100px;"></td>
                      <td style="height: 100px;"></td>
                    </tr>
                  </tbody>
            </table>
         </div>



	</div>


		</div>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
		</form>
		</body>
</html>

javascript - How to apply datepicker in InnerHTML input box. Now datep...

javascript php jquery codeigniter datepicker
Rectangle 27 0

<?php
/**
* XColumnWithDeleteLink
*
* Allows to delete column in CGridView column.
*
* @author Arthur Skobara <skobara.arthur@gmail.com>
* @version 0.1
*/
Yii::import('bootstrap.widgets.TbJEditableColumn');

class XColumnWithDeleteLink extends TbJEditableColumn
{
        public $editableCssClass = 'editable-header';
        public $canBeDeleteCssClass = 'can-be-delete';

        public $deleteURL = '/phone/deletecolumn';

        protected $defaultOptions = array(
                'method' => 'POST', // method to use to send edited content (POST or PUT)
                'callback' => null, // Function to run after submitting edited content
                'name' => 'value', // POST parameter name of edited content,
                'id' => null, // POST parameter name of edited div id (if null will be filled with htmlOptions['id'] or $this->id)
                'submitdata' => null, // Extra parameters to send when submitting edited content
                'type' => 'text', // text, textarea or select (or any 3rd party input type)
                'rows' => null, // number of rows if using textarea
                'cols' => null, // number of cols if using textarea
                'height' => '15px', // 'auto', 'none' or height in pixels,
                'width' => '70%', // 'auto', 'none' or width in pixels
                'loadurl' => null, // URL to fetch input content before editing
                'loadtype' => 'GET', // Request type for load url. Should be GET or POST.
                'loadtext' => null, //  Text to display while loading external content.
                'loaddata' => null, // Extra parameters to pass when fetching content before editing.
                'data' => null, // Or content given as paramameter. String or function.
                'indicator' => null, // indicator html to show when saving (will default to assets/img/loading.gif if null)
                'tooltip' => null, // optional tooltip text via title attribute
                'event' => 'click', // jQuery event such as 'click' of 'dblclick'
                'submit' => null, // submit button value, empty means no button
                'cancel' => null, // cancel button value, empty means no button
                'cssclass' => null, // CSS class to apply to input form. 'inherit' to copy from parent.
                'style' => null, //  Style to apply to input form 'inherit' to copy from parent.
                'select' => false, // true or false, when true text is highlighted
                'placeholder' => null, // Placeholder text or html to insert when element is empty.
                'onblur' => null, // 'cancel', 'submit', 'ignore' or function
                'onsubmit' => null, // function(settings, original) { ... } called before submit
                'onreset' => null, // function(settings, original) { ... } called before reset
                'onerror' => null, // function(settings, original, xhr) { ... } called on error
                'ajaxoptions' => null, // jQuery Ajax options. See docs.jquery.com.
                'cancelAttrs' => array('class' => 'btn'), /* custom property */
                'submitAttrs' => array('class' => 'btn'), /* custom property */
                //'mask' => '99/99/9999', /* configuration setting for masked plugin */
                //'dateformat' => 'yyyy/mm/dd', /* you can use this configuration when using the date plugin */
                //'colorformat' => 'rgb' /*  rgb | hex | rgba you can use this parameter when using color picker plugin @see www.eyecon.ro/bootstrap-colorpicker/ */

        );

        public function init()
        {
                parent::init();

                if (!$this->saveURL)
                {
                        $this->saveURL = Yii::app()->getRequest()->requestUri;
                }
                $this->registerCustomClientScript();
        }

        public function renderHeaderCell()
        {
                $this->headerHtmlOptions['id']=$this->id;
                $this->headerHtmlOptions['data-column-name']=$this->name;
                $this->headerHtmlOptions['class']=$this->canBeDeleteCssClass;
                echo CHtml::openTag('th',$this->headerHtmlOptions);
                $this->renderHeaderCellContent();
                echo "</th>";
        }

        protected function renderHeaderCellContent()
        {
                $sort = $this->grid->dataProvider->getSort();
                $label = isset($this->header) ? $this->header : $sort->resolveLabel($this->name);

                echo "<span class=\"{$this->editableCssClass}\">". $label .'</span><i class="right icon-trash"></i>';
        }

        public function registerCustomClientScript()
        {
                $cs = Yii::app()->getClientScript();
                $assetsUrl = Yii::app()->bootstrap->getAssetsUrl();
                $cs->registerScriptFile($assetsUrl . '/js/jquery.jeditable.js', CClientScript::POS_END);

                $deleteURL = Yii::app()->createUrl($this->deleteURL);

                $options = CJavaScript::encode(array_filter($this->defaultOptions));
                $cs->registerScript(__CLASS__ . '#' . $this->id, "
                        jQuery(document).on('{$this->event}','.{$this->editableCssClass}', function(){
                                var self = jQuery(this);
                                var name = self.parent().attr('data-column-name');
                                var oldValue = self.html();
                                var options = jQuery.extend(true, {$options}, {});
                                self.editable(function(value, settings) {
                                        selectedId = $(this).attr('id');
                                        $.ajax({
                                                url:'{$this->saveURL}',
                                                data:{
                                                        name:name,
                                                        oldvalue:oldValue,
                                                        editheader:'{$this->id}',
                                                        value:value,
                                                },
                                                type:'post',
                                                success: function(data) {
                                                        self.attr('data-column-name', data);
                                                        var label = $('.inline-input-item label[name=\"'+oldValue+'\"]');
                                                        label.attr('name', value);
                                                        label.html(value);
                                                },
                                        });
                                        return value;
                                }, options);
                        });
                ");

                $cs->registerScript(__CLASS__ . '#column-delete', "
                        $(document).on('click', '.icon-trash', function() {
                                var self = this;
                                var name = $(this).parent().attr('data-column-name');
                                $.ajax({
                                        url:'{$deleteURL}',
                                        data:{name:name},
                                        type:'post',
                                        success: function(data) {
                                                $.fn.yiiGridView.update('{$this->grid->id}');
                                                $('.inline-input-item').each(function(){
                                                        var self = $(this);
                                                        if (self.find('label').attr('name') == name) {
                                                                self.remove();
                                                        }
                                                });
                                        }
                                });
                        });
                ");
        }
}

yii - How to edit the header in a yiibooster gridview? - Stack Overflo...

yii cgridview yii-booster
Rectangle 27 0

You can hide the format placeholder with the following style rule:

<style>
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}
</style>
<input type=date>

This has no effect at all, and also you are missing the actual selector and an opening brace.

Oh, I'm sorry for the missing '{'. But it should work if you add {. jsfiddle.net/int32_t/DA3Nn

re right. I had something I tried overriding the placeholder. Can you add the missing
::-webkit-datetime-edit-text:not([aria-valuenow])

jquery - Remove placeholder from date type input in chrome - Stack Ove...

jquery asp.net-mvc html5 google-chrome date
Rectangle 27 0

An alternative is to use the jQuery date selector that uses an input field instead of date field so that the value and placeholder attributes can be used:

<input type="text" id="datepicker" value="The Date">
$(function() {
   $( "#datepicker" ).datepicker();
});

how to configure default value of html date input - Stack Overflow

html input
Rectangle 27 0

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        function DeleteRow(btn) {

            //alert("delete" + btn);
            var tr = btn.closest('tr');
            tr.remove();
        }
        $(".btnsd").click(function () {
            // debugger;
            alert("hjkghk");
            divs = $('.val')
            for (ind in divs) {
                var div = divs[ind];
                if (div.value == "") {
                    div.focus();
                    return false;
                }
            }
            $('#Employertbl').append(
                                    '<tr>' +
                                        '<td> @Html.TextBox("item.employer_name", null, new { @class = "form-control val" })</td>' +
                                        '<td width="24%"> <div style="float:left; padding-right:5px;">@Html.TextBox("item.duration_From", null, new { @id = "", @placeholder = "From Date", @class = "form-control input-date datepicker val", @readonly = true })</div> ' +
                                              '<div>@Html.TextBox("item.duration_to", null, new { @id = "", @class = "form-control input-date datepicker val", @placeholder = "To Date", @readonly = true })</div></td>' +
                                        '<td> @Html.TextBox("item.designation", null, new { @class = "form-control val" })</td>' +
                                        '<td> @Html.TextBox("item.worked_skill", null, new { @class = "form-control val" })</td>' +
                                        '<td> @Html.TextBox("item.proj_handled", null, new { @class = "form-control val" })</td>' +
                                        '<td>  @Html.CheckBox("item.current_employed",new{@class = "current" })</td>' +
                                        '<td><input type="button" value="Remove" onclick="DeleteRow(this)" name="delete" class="btn blue pull-right" /> </td>' +
                                    '</tr>'
                                    );



        });
    });
</script>


<div class="table-responsive">
    <table id="Employertbl" class="table table-striped table-bordered table-hover dataTable no-footer">
        <tbody>
            <tr>
                <th>Employer Name</th>
                <th>Duration</th>
                <th>Designation</th>
                <th>Worked skill(s)</th>
                <th>Reason of change</th>
                <th>Currently Employed</th>
                <th>Action</th>
            </tr>

            <tr>
                <td>
                    <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value="">
                </td>
                <td width="24%">
                    <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date"  type="text" value="" id="dp1459328857835"></div>
                    <div> <input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date"  type="text" value="" id="dp1459328857836"></div>

                </td>
                <td>
                    <input class="form-control val" id="item_designation" name="item.designation" type="text" value="">
                </td>
                <td>
                    <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value="">
                </td>
                <td>
                    <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value="">
                </td>
                <td>
                    <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false">
                </td>
                <td>
                    <input id="myButton" type="button" value="add"  name="delete" class="btnsd bcbn">
                </td>
            </tr>


            <tr><td> <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""></td><td width="24%"> <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date"  type="text" value="" id="dp1459328857837"></div> <div><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date" type="text" value="" id="dp1459328857838"></div></td><td> <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""></td><td> <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""></td><td> <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""></td><td>  <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"></td><td><input type="button" id="myButton" value="add" name="delete" class="btnsd dfsd"> </td></tr>
            <tr><td> <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""></td><td width="24%"> <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date" type="text" value="" id="dp1459328857839"></div> <div><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date"  type="text" value="" id="dp1459328857840"></div></td><td> <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""></td><td> <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""></td><td> <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""></td><td>  <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"></td><td><input type="button" id="myButton" value="add" name="delete" class="btnsd"> </td></tr>
        </tbody>
    </table>
</div>

Welcome to Stack Overflow! While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. Thanks!

jquery - Set class validation for dynamic textbox in a table - Stack O...

jquery css asp.net-mvc validation