How to change the date format in bootstrap Datepicker? -


the code datepicker follows:

$("#startdate").datepicker({     autoclose:true,     startview:"months",     minviewmode:"months",     orientation: "bottom",     format: "dd-mm-yyyy" }).on('changedate', function(selected){     startdate = new date(selected.date.valueof());     startdate.setdate(startdate.getdate(new date(selected.date.valueof())));     $('.to').datepicker('setstartdate', startdate); }); $("#enddate").datepicker({     autoclose:true,     startview:"months",     minviewmode:"months",     orientation: "bottom",     format: "dd-mm-yyyy" }).on('changedate', function(selected){     fromenddate = new date(selected.date.valueof());     fromenddate.setdate(fromenddate.getdate(new date(selected.date.valueof())));     $('.from').datepicker('setenddate', fromenddate); }); 

the format in front-end is:

01-january-2016

now need format as:

jan 2016

in datepicker (front-end) box, whereas 01-01-2016 in back-end. how can this? please me out guys.

you can change datepicker (front end) format using format option specifying m yyyy instead of dd-mm-yyyy.

then can use moment convert date string using format need before sendind server. here there example of converting date got datepicker string in format dd-mmmm-yyyy using moment parsing function , moment format method.

$("#startdate").datepicker({      autoclose:true,      startview:"months",      minviewmode:"months",      orientation: "bottom",      format: "m yyyy"  }).on('changedate', function(selected){      startdate = new date(selected.date.valueof());      startdate.setdate(startdate.getdate(new date(selected.date.valueof())));      $('.to').datepicker('setstartdate', startdate);  });  $("#enddate").datepicker({      autoclose:true,      startview:"months",      minviewmode:"months",      orientation: "bottom",      format: "m yyyy"  }).on('changedate', function(selected){      fromenddate = new date(selected.date.valueof());      fromenddate.setdate(fromenddate.getdate(new date(selected.date.valueof())));      $('.from').datepicker('setenddate', fromenddate);  });    $('#btnsend').click(function(){      // getting date picker      var startdate = $("#startdate").datepicker('getdate');      var enddate = $("#enddate").datepicker('getdate');      // convert date string in given format      var startdateserver = moment(startdate).format('dd-mmmm-yyyy');      var enddateserver = moment(enddate).format('dd-mmmm-yyyy');      // can send startdateserver , enddateserver string server      console.log(startdateserver, enddateserver);  });
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>  <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>    <input type="text" id="startdate" />  <input type="text" id="enddate" />  <button id="btnsend" class="btn btn-primary">send</button>


Comments

Popular posts from this blog

gridview - Yii2 DataPorivider $totalSum for a column -

java - Suppress Jboss version details from HTTP error response -

Sass watch command compiles .scss files before full sftp upload -