如何使用bootstrap datepicker格式化日期?

时间:2014-08-11 17:58:01

标签: javascript jquery twitter-bootstrap datepicker

我有一个选择下拉列表,根据所选内容激活两个datepicker输入字段。选择一个字段时,我想填写今天的日期加一年的值。但是,当我选择它时,我得到这个: 2015年8月11日星期二00:00:00 GMT-0400(东部夏令时)。我希望日期为:mm / dd / yyyy。

我已经设置了一个小提琴。 http://jsfiddle.net/mwoods98/aku8ytju/ 更新小提琴

以下是代码:

                 $(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.
                    });

我现在手动设置日期,但我似乎无法正确设置格式。

<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>

更新:出于某种原因,小提琴没有更新。我已经确认了,现在来源似乎与我问的问题有关。您可以看到在进行选择时如何格式化日期。

2 个答案:

答案 0 :(得分:1)

看看这个:Bootstrap 3 datepicker - code generator

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

答案 1 :(得分:0)

使用format代替formatDate

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

签入/签出示例应该有用:Datepicker for Bootstrap