How to output the custom date on bootstrap datepicker

Question

I'm using a bootstrap datepicker and i want to show the result in week date format e.g 02-05-2015 - 10-05-2015 (dd-mm-yyyy)

      <input style="margin-top:5px" class="form-control datepicker" />
    <script type="text/javascript">
        $('.datepicker').datepicker({
            format: 'dd-MM-yyyy',
            minViewMode: '0',
            language: "vi",
            autoclose: true,
            selectWeek: true,
            todayHighlight: true

        }).on('changeDate', function (e) {
            var date = e.date;
            var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);

            var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

           // how to output the custom date with the format 8-6-2015 - 14-6-2015

// i even try $('.datepicker').text('abc') but then it ruins the whole system
            console.log(startDate.toJSON());
            console.log(endDate);
            console.log(e);
        })
    </script>

I expect to get the output result just like http://www.tikalk.com/incubator/week-picker-using-jquery-ui-datepicker/ (whole week select) right in the input control.

The whole code is here on Plunkr

try startDate.toJSON().substring(0,10) but this doesn't give the desired format. you can try the jquery dateFormat plugin github.com/phstc/jquery-dateFormat — Sushil
sorry no being clear, my question is how to output the whole week to the input, not how to format a date. — nam vo

Michael Tallino Michael Tallino · Accepted Answer · 2015-06-09T17:28:55

EDIT: Misunderstood your question. When you said "week format" you meant you wanted a week range.

Two options I can see.

Easy: Label the field "Week of:" and use daysOfWeekDisabled attribute when initiating datepicker to only allow Sun/Mon (depending on when your week starts)
```
$('input').datepicker({
    daysOfWeekDisabled: [1,2,3,4,5,6]
});
```
would disable Mon through Sat.

Complicated: Use the date-range markup, hide event, and .getDay() to change the values in the input based upon day of the week. Something like this would work, but I haven't tested this at all.

$('input.startofweek').datepicker({
    format: 'dd-mm-yyyy'
}).on('hide',function( e ) {
    //probably best to create named functions rather than this
    var nd = e.date;
    if (nd.getDay() !== 0) {
        nd.setDate(nd.getDate()-nd.getDay());
        $(this).datepicker('update',nd);
    }
});

$('input.endofweek').datepicker({
    format: 'dd-mm-yyyy'
}).on('hide',function( e ) {
    if (nd.getDay() !== 6) {
        nd.setDate(nd.getDate()+(6-nd.getDay()));
        $(this).datepicker('update',nd);
    }
});

If you prefer to continue using multidate that would require something similar but different markup.

How to output the custom date on bootstrap datepicker

1 Answers