三款日期选择插件推荐给大家:
1.My97DatePicker
纯原生JS,专注于PC端,支持IE6+;页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结构,否则就会报错找不到指定文件。
(1)直接在html文件中写入
三款日期选择插件推荐给大家:
纯原生JS,专注于PC端,支持IE6+;页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结构,否则就会报错找不到指定文件。
(1)直接在html文件中写入
注意:由于此插件是原生JS写的,所以绑定点击事件请务必请用原生JS的点击事件绑定方法,如果使用$('#ipt').on('click',function( ){ }),在选中一个日期并失去焦点后,想要重新选择就必须点击两次次才能唤起日历。 (2)如果给输入框添加class="Wdate",输入框的右边会出现一个日期图标。 (3)可以通过其他元素来弹出日期选择框,直接给该元素添加onclick="WdatePicker({el: '#ipt'})" (4)可以通过添加position属性来定义弹出位置,例如 onclick="WdatePicker({position: {left:100,top:50}})" (5)可以通过添加dateFmt属性来定义日期格式,例如 onclick="WdatePicker({dateFmt: 'MM-yy'})" (6)如果没有定义onpicked和oncleared事件,将自动触发文本框的onchange事件,定义这些事件的方式如下
(7)可以实现日期选择联动
(8)还能将选中的值拆分到文本框
年 月 日 时 分 秒更多功能和参数请去官网查询nofollow" href="http://www.my97.net/dp/demo/resource/3.asp">http://www.my97.net/dp/demo/resource/3.asp。
主要用于PC端,需要同时引入jquery.js和jquery-ui.js,样式方面除了引入jquery-ui.css,还要带上jquery-ui目录中的images文件夹,否则就会报错找不到指定的文件。
(1)引入相关文件后,直接就是$('#ipt').datepicker( );
(2)常用的几个参数配置如下
专注于移动端,依赖于jquery类库,有多种样式可供选择,根据需要引入各类文件。
(1)demo如下:
<style type="text/css">
.dwl{
font-size: 20px;
}
.dwbg .dwb{
font-size: 20px;
}
table td:first-child{
padding-right: 15px;
}
table td:last-child{
padding-left: 15px;
}
table .dww{
min-width: 150px !important;
}
<script src="dev/jquery-1.9.1.js">
<script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript">
<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript">
<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
opt.default = {
theme: 'android-ics light',// 皮肤样式
display: 'bottom',// 显示方式
mode: 'scroller',// 日期选择模式
startYear: currYear,//开始年份
endYear: currYear + 30,//结束年份
dateFormat: 'mm/yyyy ',// 日期格式
dateOrder: 'mmyy',// 面板中日期排列格
setText: '确定',// 确认按钮名称
cancelText: '取消',// 取消按钮名籍我
monthText: '月',// 面板中月文字
yearText: '年',// 面板中年文字
};
$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'],opt['default']));
});