Download

http://www.malot.fr/bootstrap-datetimepicker/

JSON 設定

Example:

    <input size="16" type="text" readonly class="form_date">

    <script>
        $(".form_date").datetimepicker({
            format: 'yyyy-mm-dd'
        });
    </script>           

format

Default: 'mm/dd/yyyy'

i.e.

'yyyy-mm-dd'
'hh:mm'

weekStart

Default: 0 (Sunday)

startDate

# The earliest date that may be selected;
Default: Beginning of time

endDate

Date. Default: End of time

autoclose

# close the datetimepicker immediately when a date is selected.
Boolean. Default: false

startView

Default: 2

0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview.

minView

Number, String. Default: 0, 'hour'

maxView

Number, String. Default: 4, 'decade'

todayBtn

Boolean, "linked". Default: false

todayHighlight

Boolean. Default: false

minuteStep

Number. Default: 5

pickerPosition

String. Default: 'bottom-right' (other value supported : 'bottom-left')

initialDate

Date or String. Default: new Date()

Setting Example

    <script>
        $("#form_date")
            .datetimepicker({
                format: 'yyyy-mm-dd',
                weekStart: 1,
                autoclose: true,
                todayHighlight: 1,
                startView: 'month',
                minView: 'month',
                maxView: 'year'
            })        
    </script>

Events

• changeDate
• changeYear
• changeMonth

Usage

$('#date-end')
  .datetimepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < date-start-display.valueOf()){
        ....
    }
});