CODEWITHSUNDEEP
javascriptjqueryhtml
Marta Lobo
Marta Lobo

Reputation: 185

Change date input value format

I am implementing a fake form in an HTML page. I have several inputs that I need to transform in order to be sent using a POST request.

One of the problems I am facing is related with the date format. I have a <input type="date">which returns its value like this: 2017-12-28, and I need to change its format and turn it into this: 28/12/2017. I can only use jQuery.

Is there a specific function to do this? Or do I have to parse it? I am pretty lost: (

Upvotes: 0

Views: 3126

Answers (7)

krezus
krezus

Reputation: 1451

$( function() {
	$( "#date" ).datepicker();
    //set the date format here
    $( "#date" ).datepicker("option" , "dateFormat", "dd/mm/yy");
	} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="date">

Upvotes: 0

Tammy
Tammy

Reputation: 1132

Please try with this. Something like this

$(function() {
    $( "#datepicker-13" ).datetimepicker({
        //format : 'DD-MM-YYYY HH:mm'
        viewMode: 'days',
        format: 'DD/MM/YYYY'
    }, "date");
    var dateNow = new Date();
    var date= moment(dateNow).format('DD/MM/YYYY');
    $('#datepicker-13').attr("value", date);

});

Upvotes: 0

bigblind
bigblind

Reputation: 12887

A date input's value is always formatted yyyy-mm-dd, although the displayed format may vary based on the user's locale. Parsing it isn't hard though.

var myDate = $("#myinput").val().split("-").reverse().join("/")

How does that work?

We get the value from our date input, and split it into parts separated by dashes "-". So now we have an array like ["2017", "12", "28"]. Then, we reverse it, so it's in the order we want: ["28", "12", "2017"]. Then, we join the elements using slashes, giving us "28/12/2017"

Upvotes: 0

Abdul Rafay
Abdul Rafay

Reputation: 807

var date = new Date('2017-12-28');
alert(date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear());

Upvotes: 1

Nitin Dhomse
Nitin Dhomse

Reputation: 2622

Following is the solution without using any plugin. 

var defaultDate = "2017-12-28";
var splitedValues = defaultDate.split("-");
var newDateFormat = splitedValues[2]+"/"+splitedValues[1]+"/"+splitedValues[0];
console.log(newDateFormat);
alert(newDateFormat);

Upvotes: 1

Sameer Rangrez
Sameer Rangrez

Reputation: 152

var userBirthDate = '2017-12-01';
userBirthDate = userBirthDate.split("-").reverse().join("/");
console.log(userBirthDate);

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4462

Check this.

var parts = '2017-12-28'.split('-'); 
var dmyDate = parts[2] + '/' + parts[1] + '/' + parts[0];
console.log(dmyDate);

Upvotes: 0

Related Questions