如何使用引导日期选择器格式化日期？

Question

I have a select drop down that activates two datepicker input field depending on what is selected. When one field is selected, I would like to fill in the value of today's date plus one year. However, when I select that, I get this: Tue Aug 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time) . I would like to have the date as: mm/dd/yyyy.

I have setup a fiddle. http://jsfiddle.net/mwoods98/aku8ytju/ Updated fiddle

Here is a look at the code:

                 $(document).ready(function() {

                    $('#getHoldStatus').change(function()
                    {
                        var selected_item = $(this).val()
                        if(selected_item == "3"){
                            $('#datepicker').val("").removeClass('invisible');
                            $('#datepicker2').val("").removeClass('invisible');

                            var date = new Date("8/11/2014");
                            var date3 = new Date("8/11/2015");

                            $('#datepicker2').val(date3);
                            var newDate = new Date(date3.getFullYear(), date3.getMonth(), date3.getDate()+1);
                            $('#datepicker2').datepicker({ dateFormat: "mm/dd/yyyy" }); 


                        }
                        else if(selected_item == "2") {
                            $('#datepicker').val("").removeClass('invisible');
                            $('#datepicker2').val(selected_item).addClass('invisible');
                            $("#datepicker2").val('0');
                        }
                        else
                        {
                            $('#datepicker').val(selected_item).addClass('invisible');
                            $('#datepicker2').val(selected_item).addClass('invisible');
                            $("#datepicker").val('');
                            $("#datepicker2").val('');

                        }
                    }
                    );

                        // put all your jQuery goodness in here.
                    });

I am manually setting the date here for now but I can't seem to get it formatted properly.

<label class="control-label" for="getHoldStatus"> 
                    Hold Status
                 </label>
                 <div class="controls">
                    <select id="getHoldStatus" name="getHoldStatus">
                          <option value=""></option>

                            <option value="1" >None</option>

                            <option value="3" >On Hold until Candidate Available</option>

                            <option value="2" >On Hold until Position Available</option>

                    </select>
                </div>



                 <label class="control-label" for="input08"> 
                    Hold Start Date
                 </label>
                 <div class="controls">
                    <script>
                        $(function() {
                        $( "#datepicker" ).datepicker({autoclose: true, todayHighlight: true, orientation: "bottom right"});
                          });
                    </script>

                        <div><input type="text" id="datepicker" value="" name="fdfHoldStartDate" class="invisible" /></div>

                </div>



                 <label class="control-label" for="input09"> 
                    Hold End Date
                 </label>
                 <div class="controls">
                    <script>
                        $(function() {
                        $( "#datepicker2" ).datepicker({format: "mm/dd/yyyy", autoclose: true, todayHighlight: true});
                          });
                    </script>

                        <div><input type="text" id="datepicker2" value="" name="fdfHoldEndDate" class="invisible" /></div>

                </div>

UPDATE: For some reason, the fiddle did not update. I have confirmed it and now the source appears relevant to the question I was asking. You can see how the date is being formatted when a selection is made.

Answer 1

Look at this: Bootstrap 3 datepicker - code generator

<input type="text" type="text" id="date1">
$('#date1').datepicker({
     format: "mm-dd-yyyy"
});

Answer 2

Use the format instead of formatDate :

$('#datepicker2').datepicker({ format: "mm/dd/yyyy" });

The check in/check out example should be useful: Datepicker for Bootstrap