javascriptjquerydatedatepickerbootstrap-datepicker

Reputation: 1918

bootstrap datepicker setDate format dd/mm/yyyy

I have to set the date in my datepicker in dd/mm/yyyy format. Whet I'm trying to do, with Javascript is this:

  var year = 2014;
  var month = 5;
  var day = 10;

  var realDate = new Date(year, month - 1, day); // months are 0-based!

  $('#MainContent_txtDataConsegna').datepicker({ dateFormat: 'dd/mm/yyyy' }); // format to show
  $('#MainContent_txtDataConsegna').datepicker('setDate', realDate);

the problem is that the value inside my datepicker is always in format mm/dd/yyyy. Where is the problem??

Here the definition datepicker and datepicker options:

   <div class="input-group date">
       <asp:TextBox runat="server" ID="txtDataOrdine" class="form-control" onBlur="CalcolaTotaliTestata('txtDataOrdine')"></asp:TextBox>
       <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>/span>
    </div>

<script type="text/javascript">
   $('.input-group.date').datepicker({
       todayBtn: "linked",
       language: "it",
       autoclose: true,
       todayHighlight: true,
       dateFormat: 'dd/mm/yyyy' 
   });
</script>

Upvotes: 42

Answers (14)

Dula

Reputation: 1414

In my case this worked.

$('.datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: new Date() // disabling past dates
});

Upvotes: 0

SOMNATH BAKSI

Reputation: 1

As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript.. Use this for Bootstrap:

<label>Date of Birth</label>
<input name="userdob" data-provide="datepicker" placeholder="dd-mm-yyyy" date-autoclose="true" class="form-control courtdata" data-date-format="dd-mm-yyyy" required>

Upvotes: 0

Ahmed Bermawy

Reputation: 2530

This line of code works for me

$("#datepicker").datepicker("option", "dateFormat", "dd/mm/yy");

you can change the id #datepicker with the class .input-group.date of course

Upvotes: 2

Vix Coder

Reputation: 19

Try this

 format: 'DD/MM/YYYY hh:mm A'

As we all know JS is case-sensitive. So this will display

10/05/2016 12:00 AM

In your case is

format: 'DD/MM/YYYY'

Display : 10/05/2016

My bootstrap datetimepicker is based on eonasdan bootstrap-datetimepicker

Upvotes: 1

LuisEduardox

Reputation: 384

"As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript..."

Boostrap DatePicker Documentation

Maybe you want to set format without DatePicker instance, for that, you have to add the property data-date-format="DateFormat" to main Div tag, for example:

<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>

    <input type="text" name="YourName" id="YourId" class="YourClass">
</div>

Upvotes: 2

Alessandro Battistini

Reputation: 792

I have some problems with jquery mobile 1.4.5. For example it seems accepting format change only passing from "option". And there are some refresh problem with the calendar using "option". For all that have the same problems I can suggest this code:

$( "#mydatepicker" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$( "#mydatepicker" ).datepicker( "setDate", new Date());    
$('.ui-datepicker-calendar').hide();

Upvotes: 1

Jani Devang

Reputation: 1109

There is confusing when you are using data picker, for bootstrap datepicker you have to use following code:-

$( ".datepicker" ).datepicker({
   format: 'yyyy-mm-dd'
});

and for jquery datepicker following code must be used:-

$( ".datepicker" ).datepicker({
       dateFormat: 'dd-mm-yy'
    });

So you must be aware which date picker you are using, that is ultimately solve your issue, Hope this hepls you.

Upvotes: 15

Mehrnoosh

Reputation: 899

for me it is daterangepicker worked by this :

     $('#host1field').daterangepicker({
                   locale: {
                            format: 'DD/MM/YYYY'
                            }
                 });

Upvotes: 8

Shree Krishna

Reputation: 8562

Changing to format: 'dd/mm/yyyy' didn't work for me, and changing that to dateFormat: 'dd/mm/yyyy' added year multiple times, The finest one for me was,

dateFormat: 'dd/mm/yy'

Upvotes: 17

Chandra Kumar

Reputation: 4205

You can use this code for bootstrap datepicker:

HTML Code:

<p>Date: <input type="text" id="datepicker" class="datepicker"></p>

Javascript:

$( ".datepicker" ).datepicker({
   format: 'yyyy-mm-dd'
});

Upvotes: 3

Sachin T Sawant

Reputation: 759

format : "DD/MM/YYYY" should resolve your issue. If you need more help regarding available formats, please visit http://momentjs.com/ which is used by this control internally.

I was facing an issue where this "format" thing was working fine on local machine but when I deployed the application on server, the date was not getting populated and the control was empty. when I commented the format code, it started working but then I didn't have the format that I needed. I fixed that issue using globalization entries in web.config.

<system.web>
    <globalization
    requestEncoding="utf-8"
    responseEncoding="utf-8"
    culture="en-GB"
    uiCulture="en-GB" />    
</system.web>

This helped in ensuring that both local & server environments have same culture.

Upvotes: 2