:before css style changed using jqyery

by rupesx

HTML

<div style="width: 250px">
<input class="mobiledatepicker" data-date="28-Jun-2016 06:00" data-pid="FromDate" id="txtFromDate" type="datetime-local" data-date-format="DD-MMM-YYYY HH:mm" value="2016-06-28 06:00" onchange="datesReactions()">

<input class="mobiledatepicker" data-date="" data-pid="FromDate" id="txtFromDate" type="date" data-date-format="DD-MMM-YYYY HH:mm" value="2016-06-28 06:00" onchange="datesReactions()">
</div>

CSS

@media screen and (min-width: 767px) {
   #txtFromDate {
       position: relative;
       color: white;
       background: white;
   }

       #txtFromDate:before {
           position: absolute;
           top: 3px;
           left: 3px;
           content: attr(data-date);
           display: inline-block;
           color: black;
       }
       


       #txtFromDate::-webkit-datetime-edit, 
       #txtFromDate::-webkit-inner-spin-button, 
       #txtFromDate::-webkit-clear-button {
           /*  display: none; */
       }

       #txtFromDate::-webkit-calendar-picker-indicator {
           position: absolute;
           top: 3px;
           right: 0;
           color: black;
           opacity: 1;
           /*  background: red; */
       }

   #txtToDate {
       position: relative;
       /*color: white;*/
       background: white;
   }

       #txtToDate:before {
           position: absolute;
           top: 3px;
           left: 3px;
           content: attr(data-date);
           display: inline-block;
           color: black;
       }
       
       #txtToDate:after {
           position: absolute;
           top: 3px;
           left: 3px;
           content: attr(data-date);
           display: inline-block;
           color: black;
       }

       #txtToDate::-webkit-datetime-edit, #txtToDate::-webkit-inner-spin-button, #txtToDate::-webkit-clear-button {
           /*  display: none; */
       }

       #txtToDate::-webkit-calendar-picker-indicator {
           position: absolute;
           top: 3px;
           right: 0;
           color: black;
           opacity: 1;
           /*  background: red; */
       }

   .mobiledatepicker {
       display: block;
       width: 100%;
       height: 34px;
       padding: 6px 12px;
       font-size: 14px;
       line-height: 1.42857143;
       color: #555;
       background-color: #fff;
       background-image: none;
       border: 1px solid #ccc;
       border-radius: 4px;
       vertical-align:...

JavaScript

$(function datesReactions(){
	alert('h');
},jQuery());


$(document).ready(function(){
	$('input').on('change', function(){
  	//alert('I');
    $('#txtFromDate:before', '#txtFromDate:after').css('content', '');
    if($(this).attr('type', 'date' )){
    	$(this).attr('type', 'datetime-local');
    }
  });
    function datesReactions(){
    alert('h');
  }
});