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
Post a Comment