JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>  

<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
</script>
<table id="anchor_list" class="table table-striped table-hover table-bordered"
			   style="margin-top:10px;border: 1px solid #cdcdcd;border-radius: 4px;">
			<thead>
				<tr class="gradient_th" style="border: 0px;background:#0099CC;color: #fff;">
					<!-- <th></th> -->
					<th>ID</th>
					<th>成为主播日期</th>
					<th>频道</th>
					<th>签约日期</th>
					<th>最后上麦</th>
					<th>直播时长</th>
					<th>状态</th>
					<th>资料</th>
					<!-- <th style="width:150px">操作</th> -->
				</tr>
			</thead>
			<plugin
				<tr class="plugin">
					<td><input id="puid"> </td>
					<td>
               <div class='p-time input-group p-time-from'>
                <div class='p-time-head p-time-alert'>
                    <span>From</span><span class="glyphicon glyphicon-time"></span>
                </div>
                <input id="be_anchor_from"  />
              </div>
              
              <div class='p-time input-group p-time-to'>
                <div class='p-time-head p-time-alert'>
                    <span>To</span><span class="glyphicon glyphicon-time"></span>
                </div>
                <input id="be_anchor_to" />
              </div>
          </td>
          <td><input id="roomid" class="s-plugin s-input"> </td>
          <td>
              <div class='p-time-single input-group'>
                <span class="p-time-alert glyphicon glyphicon-time"></span>
                <input...

CSS

@import url("https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css");
@import url("https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css");
@import url("//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css");
@import url("//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css");

.plugin th{padding:10;}

input{
  display:inline-block;
  width:100%;
  margin:0 2px;
}

.p-time-head{
  display:inline-block;
  width:50px;
  vertical-align: middle;
}

.p-time-alert{
    margin-right:5px;
}

.p-time-head span{
  display:inline-block;
  color: #343434;
  font-weight:normal;
  font-size: 13px;
  float:left;
}

.p-time-head span:last-child{
  float:right;
}

.p-time{
    margin-bottom:5px;
  }

.p-time input{
  width: calc(100% - 60px);
}

.p-time-single input{
   width: calc(100% - 25px);
}

.p-time-alert{
    cursor:pointer;
}

.p-select{
    font-weight:normal;
    padding:3px 5px 4px 5px;
}

.input-group-addon{
  
}

JavaScript

function reset()
{
		$('#puid').val('');
    
    $('#be_anchor_from').val('');
    
    $('#be_anchor_to').val('');
    
    $('#roomid').val('');
    
    $('#sign_date').val('');
    
    $('#online_time').val('');
    
    $('#mic_date').val('');
       
    $("#u_state").val("1");
}

$('#reset_btn').click(function(){
		reset();
});

$('.p-time').datetimepicker({  
        format: 'YYYY-MM-DD',  
        locale: moment.locale('zh-cn')
    }).on("dp.change", function(e){
        if(link == 1)
        {
        
        }
    })
   
$('.p-time-single').datetimepicker({  
        format: 'YYYY-MM-DD',  
        locale: moment.locale('zh-cn')
    }); 

var link = 0; 

$('.p-time-alert').click(function(e){
	  link = 0;
    if($(e.target).parent().parent().hasClass('p-time'))
    {
        link = 2;
        if($(e.target).parent().parent().hasClass('p-time-from'))
        {
          link = 1;
        }
    }
		$(this).parent().datetimepicker('show');
});