`
weitao1026
  • 浏览: 1052811 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

bootstrap-datetimepicker 日期控件的开始日期

 
阅读更多

今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择

主要体现在bootstrap-datetimepicker控件下面的2个日期参数

weekStart: 1, 
startDate:new Date(日期),

引用的基础库有

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

HTML代码

复制代码
<div class="form-group">
    <label for="dtp_input3" class="col-md-2 control-label">time start</label>
    <div class="input-group date form_date_start col-md-3">
        <input class="form-control" size="16" type="text" value="" readonly>
        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
    </div>
    <input type="hidden" id="dtp_input3" value="" />
</div>
复制代码

JS代码

复制代码
    var newDate = new Date();
    var t       = newDate.toJSON(); 
    $('.form_date_start').datetimepicker({
        format: 'yyyy-mm-dd',
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        weekStart: 1, 
         startDate:new Date(t),
    });
复制代码

 

 

 

附:精确到分的时间、年月日、时间、年月、月日、从今天开始、到今天结束

HTML

复制代码
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5"   >
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                <div class="input-group date form_date col-md-5" >
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">month Picking</label>
                <div class="input-group date form_month col-md-5">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">month date Picking</label>
                <div class="input-group date form_month_date col-md-5">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">year Picking</label>
                <div class="input-group date form_year col-md-5">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">time start</label>
                <div class="input-group date form_date_start col-md-3">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" />
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">time end</label>
                <div class="input-group date form_date_end col-md-3">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" />
            </div>
        </fieldset>
    </form>
</div>
复制代码

JS

复制代码
$('.form_datetime').datetimepicker({
    //精确到分的时间
    format: 'yyyy-mm-dd - HH:ii p',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    minuteStep : 1
});
$('.form_date').datetimepicker({
    //年月日
    format: 'yyyy-mm-dd',
    language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});
$('.form_time').datetimepicker({
    //时间
    format:"hh:ii",
    language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 1,
    minView: 0,
    maxView: 1,
    forceParse: 0,
    minuteStep : 1
});
$('.form_month').datetimepicker({
    //年月
    format: 'yyyy-mm',  
     weekStart: 1,  
     autoclose: true,  
     startView: 3,  
     minView: 3,  
     forceParse: false,  
     language: 'zh-CN'
});
$('.form_month_date').datetimepicker({
    //月日
    format:"mm-dd",
    language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});
$('.form_year').datetimepicker({
    format: 'yyyy-mm',  
     weekStart: 1,  
     autoclose: true,  
     startView: 4,  
     minView: 4,  
     forceParse: false,  
     language: 'zh-CN' 
    
});

var newDate = new Date();
var t       = newDate.toJSON(); 
$('.form_date_start').datetimepicker({
    //从今天开始
    format: 'yyyy-mm-dd',
    language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,
    weekStart: 1, 
    startDate:new Date(t),
});
$('.form_date_end').datetimepicker({
    //到今天结束
    format: 'yyyy-mm-dd',
    language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,
    weekEnd: 1, 
    endDate:new Date(t),
});
分享到:
评论

相关推荐

    bootstrap-datetimepicker-简单好用的日历时间插件

    bootstrap-datetimepicker是一个简单好用的日历时间插件,在bootstrap首页上也有推荐。使用起来也很简单: 1,必须引入Jquery文件。 2,引入日历插件JS代码:bootstrap-datetimepicker.min.js 3,如果需要使用非英文...

    bootstrap-datetimepicker日期控件js及css文件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的日期和时间选择插件,它为网页应用程序提供美观、易用的日历组件。这个压缩包包含该插件运行所需的JavaScript(js)和样式表(css)文件,使得开发者能够方便地在...

    bootstrap-datetimepicker.js

    Bootstrap-Datetimepicker.js是一款基于Bootstrap框架的日期时间选择器插件,它为用户提供了便捷的方式来选取日期和时间,尤其在Web应用中常用于表单输入。这个插件的设计风格与Bootstrap一致,确保了与Bootstrap...

    Bootstrap-datetimepicker年月日时分秒均可选择

    Bootstrap-datetimepicker是一款基于Bootstrap框架的日期时间选择插件,它允许用户方便地选择精确到秒的时间和日期。这个插件极大地增强了Bootstrap原有基础组件的功能,使得开发者在构建交互式Web应用时,能够提供...

    bootstrap-datetimepicker时间控件使用小demo

    以上代码创建了一个基本的Bootstrap-Datetimepicker时间控件DEMO,用户可以点击日历图标或者直接在输入框中输入日期和时间。`format`参数定义了日期和时间的显示格式,`locale`参数设置了中文语言,`sideBySide`参数...

    bootstrap-datetimepicker时间组件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件,它提供了美观、易用的用户界面,用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本,确保了与不同Bootstrap设计...

    bootstrap-datetimepicker时间控件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间和日期选择插件,它为用户提供了直观、易用的界面来选择日期和时间。这款插件广泛应用于网页应用中,以增强用户体验,简化日期与时间输入的过程。 Bootstrap...

    基于bootstrap-datetimepicker的日期选择中文汉化,可获取选择到的日期

    基于bootstrap-datetimepicker的日期选择中文汉化,同时可以获取选择到的日期 使用说明可见博客: https://blog.csdn.net/qq_41986312/article/details/83750975

    bootstrap-datetimepicker.zh-CN.js

    时间控件 中文 可以设置日历为中文 帮助开发 * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung &lt;advanimal@gmail.com&gt;

    修改后的bootstrap-datetimepicker,可以选择秒的版本

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的日期时间选择插件,它极大地增强了HTML5原生日期输入控件的功能。在原始版本中,用户通常只能选择日期和小时,但在这个修改后的版本中,它增加了选择秒的功能,...

    bootstrap-datetimepicker.rar

    bootstrap日历控件datetimepicker,所需工具类:bootstrap.css;bootstrap-datetimepicker.min.css;bootstrap.min.js;bootstrap-datetimepicker.min.js

    react-bootstrap-datetimepicker

    react-bootstrap-datetimepicker 时间选择控件

    bootstrap-datetimepicker

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的插件,用于在网页中添加日期和时间选择功能。这个插件大大增强了Bootstrap原生的输入控件,提供了更丰富的用户交互体验和灵活的配置选项。对于初学者,理解并正确...

    bootstrap-datetimepicker-master.zip

    在本压缩包“bootstrap-datetimepicker-master.zip”中,包含了一个基于Bootstrap的日期时间选择器插件,这是一款用于在网页上方便用户选择日期和时间的交互控件。 这个插件的核心功能是提供一个用户友好的界面,...

    bootstrap-datetimepicker日历控件

    Bootstrap-Datetimepicker是一款基于Bootstrap框架的插件,用于在网页中添加日期和时间选择功能。这个控件提供了用户友好的界面,使得用户可以方便地选取日期和时间,从而提高网站或应用的交互体验。以下是对该插件...

    bootstrap-datetimepicker.min.css

    js的date控件样式优化

    bootstrap-datetimepicker.min.js

    js的date选择控件需要的js文件.

    bootstrap-datetimepicker显示农历节假日信息扩展插件

    Bootstrap-Datetimepicker是一款广泛使用的前端日期时间选择器插件,它为用户提供了直观、易用的界面来选择日期和时间。这款插件基于流行的Bootstrap框架,可以无缝集成到Bootstrap主题中,提供一致的用户体验。在...

Global site tag (gtag.js) - Google Analytics