`
西蜀石兰
  • 浏览: 120333 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

datepicker和datetimepicker使用记录

 
阅读更多
项目需求选择时间,精确到分钟。
jquery本身是有timepicker这个插件可以使用的,不过由于项目使用的是bootstrap插件,整体风格不一致,于是便使用了datetimepicker这个第三方的插件。

这个插件需要在项目中增加css文件和js文件,分别为:
1.bootstrap-datetimepicker.css
2.bootstrap-datetimepicker.js
3.bootstrap-datetimepicker.zh-CN.js
这三个文件可以从官网直接下载

使用:还是直接贴代码吧
$("#onlineTime").datetimepicker({
		showSecond : true,
		showHours : true,
		startView:1,
		maxView:1,
		format : 'yyyy-mm-dd hh:ii:ss',
		minuteStep:1,
		changeYear : true,
		autoclose:true,
		language:'zh-CN',
	});

需要注意的是,这里的很多选项和bootstrap中datepicker是不一样的,并没有dateformate这个参数,同时参数的内容也不同
贴上datepicker的使用代码,方便对照参考
$('#starttime').datepicker({
format : "yyyy-mm-dd",
todayBtn : true,
minViewMode : 0,
language : "zh-CN",
daysOfWeekDisabled : "",
orientation : "top auto", 
calendarWeeks : true,
todayHighlight : true,
autoclose : true
}); 


附上三个注意点:
一个是view这一参数的定义,其实就是几个不同的视图,通过设置minViewMode以及MaxViewMode的值,可以控制该控件是显示年月日还是直接显示时分秒。
具体的值可以在官方文档中找到;
另外一点是format,初始化input标签的值时,填充的字符串务必和format规定的格式相同;
如果之前设置了时分秒,仅仅改变某一个参数,另外两个参数是不变的。(其实就是一个对象,如果你不设置起属性,这个属性值是不会改变的)

使用datetimepicker时,如果把分钟间隔设置为5分钟,同时期望在一天的时间内查询,那么23:55分之后的时间是无法选择的

分享到:
评论

相关推荐

    JQuery Datepicker 多选日期

    在网页开发中,jQuery UI 的 Datepicker 是一个广泛使用的组件,它为用户提供了方便的日期选择功能。然而,原生的 Datepicker 默认情况下只允许选择单个日期。本主题将深入探讨如何通过扩展和定制,实现 jQuery ...

    VB DateTimePicker控件显示时间DateTimePicker控件显示时间

    在实际开发中,DateTimePicker控件经常用于需要用户输入日期或时间的场景,如创建日程安排、记录事件时间等。通过以上方法,开发者可以灵活控制控件的显示方式,确保时间数据的正确性和用户界面的友好性。理解这些...

    Android 原生DatePicker-TimePicker控件使用

    `DateTimePicker_Demo`应该是提供的一个示例项目,它包含了`DatePicker`和`TimePicker`的综合使用。在这个项目中,你可能会看到如何在一个Activity或Fragment中同时使用这两个控件,并在用户选择日期和时间后,将...

    使用DateTimePicker程序(C#代码编写)

    在实际项目中,`DateTimePicker`控件常用于记录创建日期、修改日期、预约时间等场景。结合其他控件和业务逻辑,它可以构建出各种功能丰富的用户界面。 总的来说,`DateTimePicker`是C# WinForms开发中的一个重要...

    datetime Picker控件

    2. **WPF**:使用 `DatePicker` 和 `TimePicker` 组合实现日期时间选择功能。 - **属性**:如 `SelectedDate`、`DisplayDateStart` 等。 - **事件**:如 `SelectionChanged` 事件。 3. **Web 开发**:如 ...

    只显示年月的时间控件

    这样的控件简化了用户的操作,特别适用于那些只需要粗略时间信息的场合,如记录事件发生的年份和月份。 在Web开发中,实现"只显示年月的时间控件"通常有多种方法。一种是使用JavaScript库,例如`My97DatePickerBeta...

    VC/MFC使用日期控件设置、获取日期时间信息

    在这个话题中,我们将深入探讨如何在MFC应用中使用日期控件(CDateTimeCtrl)来设置和获取日期时间信息。日期控件是用户界面中常见的元素,它允许用户选择一个日期或时间,通常用于日程管理、事件记录等场景。 首先...

    Datatimepicker控件常见使用

    在Android开发中,我们可以使用DatePicker和TimePicker两个独立的控件,或者使用Material Design库中的DateTimePicker。这些Android控件允许用户分别选择日期和时间,并且可以通过DialogFragment来呈现,提供更好的...

    年月日时分秒时间控件.rar

    总的来说,年月日时分秒时间控件是软件和Web应用中不可或缺的组件,理解和掌握其使用和实现方式对于提升应用的用户体验和功能完整性至关重要。开发者应当根据不同的平台和需求选择合适的时间控件,并优化其设计,以...

    日期时间控件日期时间控件

    - 数据过滤和排序:在数据表或数据库应用中,用户可使用日期时间控件筛选或排序记录。 4. **实现方式** - HTML/CSS/JavaScript:在Web开发中,HTML5提供了`<input type="date">`和`<input type="time">`标签,...

    两款JavaScript日历控件 网页日历控件

    对于Bootstrap Datepicker,需要引入相应的JS和CSS文件,然后使用如下方式初始化: ```javascript $('#myDatepicker').datetimepicker({ format: 'YYYY-MM-DD', daysOfWeekDisabled: [0, 6] }); ``` 4. **...

    django-bootstrap-datepicker-plus:Bootstrap3Bootstrap4 DatePickerInput,TimePickerInput,DateTimePickerInput,MonthPickerInput,YearPickerInput具有django版本2.2、2.1、1.11、1.10和1.8的日期范围选择器功能

    6. **Django版本支持**:`django-bootstrap-datepicker-plus` 支持Django的多个版本,包括2.2、2.1、1.11、1.10和1.8,这意味着无论你的项目使用的是哪个版本的Django,都可以无缝集成这个库,享受其提供的日期和...

    js日期控件,很使用的

    在JavaScript世界里,有许多著名的日期控件,比如jQuery UI的Datepicker、Bootstrap的DateTimePicker,以及本例中提到的"My97 DatePicker"。 "My97 DatePicker"是一个在中国非常流行的JavaScript日期选择插件,它由...

    最好用的js日期控件

    在JavaScript中实现这样的日期控件,一般会使用原生的JavaScript API,如`Date`对象,或者利用流行的库和框架,例如jQuery UI的DatePicker、Bootstrap的DateTimePicker,或者是轻量级的Moment.js配合Pickadate.js等...

    HTML日期选择控件

    使用时,需要引入Bootstrap、moment.js和datetimepicker插件的CSS和JS文件,然后通过附加类名或JavaScript激活: ```html <input type="text" class="form-control datetimepicker-input" id="myDate"> $('#...

    ASP中对于时间选择控件的使用

    另一种常见方法是利用JavaScript库,如jQuery UI的Datepicker或Bootstrap的DateTimePicker,它们提供了丰富的自定义选项和更好的跨浏览器支持。 2. **AJAX**:为了在用户选择时间时不立即提交表单,而是延迟到用户...

    精确到秒的日期控件 js

    因此,通常会使用第三方库,如jQuery UI的`datepicker`或Bootstrap的`datetimepicker`。这些库提供了丰富的自定义选项和跨浏览器兼容性。 例如,使用Bootstrap的`datetimepicker`插件,可以实现精确到秒的选择: `...

    移动应用日期控件

    移动应用中的日期控件是用户界面中不可或缺的部分,它们允许用户选择或输入日期,以便进行各种操作,如设定提醒、记录事件或者筛选信息等。在iOS、Android以及跨平台开发中,日期控件的设计和实现各有特点。本教程将...

    运用jsp实现万年历包含简易万年历、带阴历的万年历和带有备忘录的万年历

    对于日期选择,可以使用JavaScript库如jQuery UI的Datepicker组件,或者Bootstrap的Datetimepicker插件来提供用户友好的交互体验。这些库可以在客户端提供日期选择,并通过Ajax将选择的日期发送到服务器进行处理。 ...

Global site tag (gtag.js) - Google Analytics