//forceParse: 0, format: 'yyyy-mm-dd',//格式化想要显示的时间格式 minView: 'month'//日期时间选择器所能够提供的最精确的时间选择视图。 $('.form_date').datetimepicker("update",'2015-01-22');//赋值 $('.form_date').datetimepicker('setDate',(new Date()));//赋值,当前日期 var year = $('.form_date').datetimepicker('getDate').getFullYear();//获取年 var month = $('.form_date').datetimepicker('getDate').getMonth();//获取月 var day = $('.form_date').datetimepicker('getDate').getDate();//获取日 var hours = $('.form_date').datetimepicker('getDate').getHours();//获取小时 var minute = $('.form_date').datetimepicker('getDate').getMinutes();//获取分钟 var seconde = $('.form_date').datetimepicker('getDate').getSeconds();//获取秒
$('#datetimepicker').datetimepicker({
     value: ''                   // 设置当前datetimepicker的值
     rtl: false,                    // false   默认显示方式   true timepicker和datepicker位置变换
     format:    'Y/m/d H:i',     // 设置时间年月日时分的格式 如: 2016/11/15 18:00
     formatTime:    'H:i',       // 设置时间时分的格式
     formatDate:    'Y/m/d',     // 设置时间年月日的格式
     startDate: false,         // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
     step: 10,                    // 设置时间时分的间隔
     closeOnDateSelect: false,      // true 设置datepicker可点击   false 设置datepicker不可点击 实际上可以双击
     closeOnTimeSelect: true,       // true 设置timepicker可点击   false 设置timepicker不可点击 
     closeOnWithoutClick: true,     // true 设置点击input可以隐藏datetimepicker   false 设置点击input不可以隐藏datetimepicker  
     closeOnInputClick: true,      // true 设置点击input可以隐藏datetimepicker   false 设置点击input不可以隐藏datetimepicker  (会有闪动 先隐藏 再显示)
     timepicker: true,            // true 显示timepicker   false 隐藏timepicker
     datepicker: true,            // true 显示datepicker   false 隐藏datepicker
     weeks: false,                // true 显示周数   false 隐藏周数
     defaultTime: false,            // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. '10:00' for formatTime:   'H:i') 
     defaultDate: false,            // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
     minDate: false,                // 设置datepicker最小的限制日期   如:2016/08/15
     maxDate: false,                // 设置datepicker最大的限制日期   如:2016/11/15
     minTime: false,                // 设置timepicker最小的限制时间   如:08:00
     maxTime: false,              // 设置timepicker最大的限制时间   如:18:00
     allowTimes: [],                // 设置timepicker显示的时间   如:allowTimes:['09:00','11:00','12:00','21:00']
     opened: false,              // false默认打开datetimepicker可关闭  true打开datetimepicker后不可关闭
     initTime: true,                // 设置timepicker默认时间   如:08:00
     inline: false,             // ture设置datetimepicker一直显示
     theme: '',                  // ture设置datetimepicker显示样式 如: 'dark'
     inverseButton: false,          // false 默认   true datepicker的上一月和下一月功能互换  timepicker的上下可点击按钮功能互换
     hours12: false,                // true设置12小时格式  false设置24小时格式
     next: 'xdsoft_next',           // 设置datepicker上一月按钮的样式
     prev : 'xdsoft_prev',        // 设置datepicker下一月按钮的样式
     dayOfWeekStart: 0,            // 设置默认第-列为周几 如:0 周日  1 周一
     parentID: 'body',            // 设置父级选择器
     timeHeightInTimePicker: 25,    // 设置timepicker的行高
     timepickerScrollbar: true,  // ture设置timepicker显示滑动条  false设置timepicker不显示滑动条
     todayButton: true,            // ture显示今天按钮  false不显示今天按钮   位置在datepicker左上角
     prevButton: true,              // ture显示上一月按钮  false不显示上一月按钮   位置在datepicker左上角
     nextButton: true,          // ture显示下一月按钮  false不显示下一月按钮   位置在datepicker又上角
     scrollMonth: true,             // ture 设置datepicker的月份可以滑动  false设置datepicker的月份不可以滑动
     lazyInit: false,              // 翻译: 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作
     mask: false,                  // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具,从0到9的数字,设置为值的最高可能的数字。例如:第一个小时的数字不能大于2,而第一位数字不能大于5  如:{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
     validateOnBlur: true,        // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值
     yearStart: 1950,              // 设置最小的年份   
     yearEnd: 2050,              // 设置最大的年份
     monthStart: 0,              // 设置最小的月份
     monthEnd: 11,                // 设置最大的月份
     roundTime: 'round',          // 设置timepicker的计算方式  round四舍五入 ceil向上取整 floor向下取整
     allowDateRe : null,            // 设置正则表达式检查日期 如:{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
     disabledDates : [],            // 设置不可点击的日期  如:disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
     disabledWeekDays: [],          // 设置不可点击的星期  如:disabledWeekDays:[0,3,4]
     yearOffset: 0,              // 设置偏移年份  如:2 代表当前年份加2  -2  代表当前年份减2
     beforeShowDay: null,          // 显示datetimepicker之前可调用的方法  {beforeShowDay:function(d) {console.log("bsd"); } }
     enterLikeTab: true,            // tab按键均可使datetimepicker关闭  true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭 
     showApplyButton: false      // 相当于确定按钮  true显示  false隐藏

简单叙述jquery datetimepicker的相关点击方法

* 监听时间插件显示时的事件 $('#datetimepicker').datetimepicker({ onShow: function(dateText, inst) { console.log("---已打开datetimepicker----"); * 监听时间插件关闭时的事件 $('#datetimepicker').datetimepicker({ onClose: function(dateText, inst) { console.log("---已关闭datetimepicker----"); * 监听点击日期时的事件 $('#datetimepicker').datetimepicker({ onSelectDate: function(dateText, inst) { console.log(dateText); * 监听点击时分的事件 $('#datetimepicker').datetimepicker({ onSelectTime: function(dateText, inst) { console.log(dateText); * 监听点击datepicker 上一月下一月按钮及选择月份点击事件 $('#datetimepicker').datetimepicker({ onChangeMonth: function(dateText, inst) { console.log(dateText); * 监听获取当前datetimepicker显示的所有日期信息 $('#datetimepicker').datetimepicker({ onGetWeekOfYear: function(dateText, inst) { console.log(dateText); * 监听选择年份的点击事件 $('#datetimepicker').datetimepicker({ onChangeYear: function(dateText, inst) { console.log(dateText); * 实时监听你选择的日期和时间 $('#datetimepicker').datetimepicker({ onChangeDateTime: function(dateText, inst) { console.log(dateText); * 实时监听datetimepicker上的所有事件 $('#datetimepicker').datetimepicker({ onGenerate: function(dateText, inst) { console.log(dateText);

bootstrap datetimepicker 选择月份 选择年

//选择年月日的       startView: 2,   minView: 2, format: 'yyyymmdd',
$('#datetimepicker').datetimepicker({
        format: 'yyyymmdd',
         weekStart: 1,
         autoclose: true,
         startView: 2,
         minView: 2,
         forceParse: false,
         language: 'zh-CN'
//选择年月的    startView: 3,   minView: 3, format: 'yyyymm',
$('#datetimepicker').datetimepicker({
        format: 'yyyymm',
         weekStart: 1,
         autoclose: true,
         startView: 3,
         minView: 3,
         forceParse: false,
         language: 'zh-CN'
//选择年的     startView: 4,   minView: 4, format: 'yyyy',
$('#datetimepicker').datetimepicker({
        format: 'yyyymm',
         weekStart: 1,
         autoclose: true,
         startView: 4,
         minView: 4,
         forceParse: false,
         language: 'zh-CN'
    <div class="col-md-7">  
                 <div class='input-group date form_date' >  
                    <input name="startTm" id="datetimepicker" type='text' class="form-control input-sm" readonly="readonly"/>  
                    <span class="input-group-addon input-sm">  
                      <span class="glyphicon glyphicon-calendar"></span>  
                    </span>  
 <div class='input-group date form_date' data-date-format="yyyymmdd">
            <input name="startTm" id="startTm" type='text' class="form-control input-sm" readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        <div class="date input-append" id="datetimepicker">
            <div class="input-group">
                <input class="form-control input-sm" readonly="readonly" type="text">
                <span class="add-on input-group-addon"><i class="icon-remove"></i></span>
                <span class="add-on input-group-addon"><i class="icon-th"></i></span>
首先在文件头部引入必要的文件:
<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" >
[removed][removed]
想用中文显示,加入bootstrap-datetimepicker.zh-CN.js文件
<script src="Js/bootstrap-dateti
                                    参考链接:http://www.bootcss.com/p/bootstrap-datetimepicker/1、官网以及很详细的说明了如何使用,这里结合一下自己的使用来写下。下载解压缩包以后,可以看到有两个实例,可以打开看看,分别是sample in bootstrap v2、sample in bootstrap v3。2、sample in bootstrap v2实例的代码如下所示。 1 ...
 该扩展通过扩展 Ext.Picker 为 Sencha Touch 框架提供了一个 DateTimePickerdatetimePicker = new Ext.ux.touch.DateTimePicker({
    useTitles: true,
    id: 'dt',
    value: {
        day: 23,
        month: 2,
        year: 2000,
        hour: 13,
        minute: 45
    listeners: {
        "hide": function(picker) {
            window.alert((picker.getValue()));
                                    DateTimePicker 日期时间选择器设置默认时间
default-value属性接受一个数组,第一项为开始时间,第二项为结束时间,时间格式为:“YY-mm-dd HH:mm:ss”。例如:
:default-value = [‘2021-05-06 00:00:00’ , ‘2021-05-07 00:00:00’]
            <el-form-item
                prop="examStartEndTime"
                label="
                                    在van-datetime-picker中用:value或者v-model绑定上值,注意此时默认的值必须是new Date(),即Fri Aug 26 2022 10:14:42 GMT+0800 (中国标准时间),否则点击下拉的时候是不会展示默认值的!!不同的时间组件不能绑定同一个值谨以此记录一下,ε=(´ο`*)))唉又是在犯蠢的一天,(キ`゚Д゚´)!!...
1&gt;var 日期对象名 = new Date();
2&gt;var 日期对象名 = new Date(日期字符串);
/*******************************...
                                    在项目中使用Element-ui中 DateTimePicker 日期时间选择器时,开始时间需要默认当天时间零点零时零秒(xxxx-xx-xx 00:00:00);结束时间需要默认当前时间几点几时几秒(比如现在是2022-07-06 15:04:31);用户进行选择器筛选时,选中开始时间,结束时间会控制在开始时间的6个月内,超过6个月的时间禁用,不可选。保证筛选范围一直控制在6个月。
获取当天零点:
获取当前时间:
父组件传值
tool.ts
把通用方法最好封装成一个方法,放到一个文件里,方便多文件调用