bootstrap的时间插件datepicker

datepicker是个很好用的时间选择插件,先看效果图:
这里写图片描述
代码实现很简单:
先定义两个输入框

<div class="controls">
        <input type="text" id="fCtime" name="fCtime">
        <span>至</span>
        <input type="text" id="tCtime" name="tCtime">
</div>

然后写js代码

<script type="text/javascript">
$('#fCtime').datepicker({
                    format: 'yyyy-mm-dd',
                    language:"zh-CN",
                    autoclose:true,//选中自动关闭
                    todayHighlight: true,
                    keyboardNavigation: false,
                    forceParse: false
                }); 
                 $('#tCtime').datepicker({
                    format: 'yyyy-mm-dd',
                    language: "zh-CN",
                    autoclose:true,
                    todayHighlight: true,
                    keyboardNavigation: false,
                    forceParse: false
                });
</script>

附上datepicker的参数列表,这是看源码得到的,详细参数是用请参考:

https://www.cnblogs.com/tincyho/p/7978483.html

$.fn.datepicker = datepickerPlugin;

    var defaults = $.fn.datepicker.defaults = {
        assumeNearbyYear: false,
        autoclose: false,
        beforeShowDay: $.noop,
        beforeShowMonth: $.noop,
        beforeShowYear: $.noop,
        beforeShowDecade: $.noop,
        beforeShowCentury: $.noop,
        calendarWeeks: false,
        clearBtn: false,
        toggleActive: false,
        daysOfWeekDisabled: [],
        daysOfWeekHighlighted: [],
        datesDisabled: [],
        endDate: Infinity,
        forceParse: true,
        format: 'mm/dd/yyyy',
        keyboardNavigation: true,
        language: 'en',
        minViewMode: 0,
        maxViewMode: 4,
        multidate: false,
        multidateSeparator: ',',
        orientation: "auto",
        rtl: false,
        startDate: -Infinity,
        startView: 0,
        todayBtn: false,
        todayHighlight: false,
        weekStart: 0,
        disableTouchKeyboard: false,
        enableOnReadonly: true,
        showOnFocus: true,
        zIndexOffset: 10,
        container: 'body',
        immediateUpdates: false,
        title: '',
        templates: {
            leftArrow: '&laquo;',
            rightArrow: '&raquo;'
        }

猜你喜欢

转载自blog.csdn.net/weixin_39433171/article/details/80842868