推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)

2024-08-18 16:05:11

三款日期选择插件推荐给大家：

1.My97DatePicker

纯原生JS，专注于PC端，支持IE6+；页面上只需要引入WdatePicker.js文件，但是My97DatePicker整个目录是一个整体，最好不要破坏里面的目录结构，否则就会报错找不到指定文件。

(1)直接在html文件中写入

<input id="ipt" type="text" onclick="WdatePicker()" />

注意：由于此插件是原生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事件，定义这些事件的方式如下

document.getElementById('ipt').onclick = function(){
 WdatePicker({
  onpicked: function(){
   // 配合jquery.validate.js插件，在这里手动添加校验
  },
  oncleared: function(){
   // 配合jquery.validate.js插件，在这里手动添加校验
  },
 });
}

(7)可以实现日期选择联动

<input id="d5221" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" />
<input id="d5222" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" />

(8)还能将选中的值拆分到文本框

<input type="text" id="d523_y" size="5" /> 年
<input type="text" id="d523_M" size="3" /> 月
<input type="text" id="d523_d" size="3" /> 日
<input type="text" id="d523_HH" size="3" /> 时
<input type="text" id="d523_mm" size="3" /> 分
<input type="text" id="d523_ss" size="3" /> 秒
<img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />

<script>
 function pickedFunc(){
  $dp.$('d523_y').value=$dp.cal.getP('y');
  $dp.$('d523_M').value=$dp.cal.getP('M');
  $dp.$('d523_d').value=$dp.cal.getP('d');
  $dp.$('d523_HH').value=$dp.cal.getP('H');
  $dp.$('d523_mm').value=$dp.cal.getP('m');
  $dp.$('d523_ss').value=$dp.cal.getP('s');
 }
</script>

更多功能和参数请去官网查询http://www.my97.net/dp/demo/resource/3.asp。

2.jquery.datepicker.js

主要用于PC端，需要同时引入jquery.js和jquery-ui.js，样式方面除了引入jquery-ui.css，还要带上jquery-ui目录中的images文件夹，否则就会报错找不到指定的文件。

(1)引入相关文件后，直接就是$('#ipt').datepicker( );

(2)常用的几个参数配置如下

$("#ipt").datepicker({
 numberOfMonths:1, // 显示几个月
 showButtonPanel:true, // 是否显示按钮面板
 dateFormat: 'yy-mm-dd', // 日期格式
 clearText:"清除", // 清除日期的按钮名称
 closeText:"关闭", // 关闭选择框的按钮名称
 yearSuffix: '年', // 年的后缀
 showMonthAfterYear:true, // 是否把月放在年的后面
 defaultDate:'2011-03-10', // 默认日期
 minDate:'2011-03-05', // 最小日期
 maxDate:'2011-03-20', // 最大日期
 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
 dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
 dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
 dayNamesMin: ['日','一','二','三','四','五','六'],
 onSelect: function(selectedDate) {
 // 选择日期后执行的操作
 alert(selectedDate);
 }
});

3.Mobiscroll

专注于移动端，依赖于jquery类库，有多种样式可供选择，根据需要引入各类文件。

(1)demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <title>Mobiscroll日期时间插件</title>

 <!-- 核心CSS样式 -->
 <link href="dev/css/mobiscroll.core-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <!-- 添加动画效果 -->
 <!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->
 <!-- 安卓样式 -->
 <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />

 <!-- 或者引用一整个压缩好的css文件 -->
 <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->

 <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;
 }
 </style>
</head>

<body>
 <input type="text" name="appDate" id="appDate" />

 <!-- jquery类库 -->
 <script src="dev/jquery-1.9.1.js"></script>

 <!-- 核心js文件 -->
 <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
 <!-- 添加中文 -->
 <!-- <script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> -->
 <!-- 针对日期时间 -->
 <script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
 <!-- 添加中文 -->
 <!-- <script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> -->
 <!-- 安卓端 -->
 <!-- <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> -->

 <!-- 或者引用一整个压缩好的js文件 -->
 <!-- <script src="js/mobiscroll.custom-2.5.2.min.js" type="text/javascript"></script> -->

 <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']));
 });
 </script>
</body>
</html>

(2)解决与移动端软键盘的定位冲突

如果页面有多个输入框，当点击一个输入框时会唤起设备自带的软键盘，然后如果直接点击另一个id名为appDate的日期输入框，即失去焦点的同时，获取到了mobiscroll绑定的输入框的焦点，结果发现之前的软键盘下沉消失之后，本该显示在底部的日期选择部件显示在了屏幕的上方，解决办法是找到mobiscroll.core-2.5.2.js 这个文件，搜索focus关键字，将对应的地方改成：

elm.bind('focus.dw', function () {
 setTimeout(function(){
  that.show();
 },300)
});

其中300ms就是设置的延迟时间，这样以来再做相同的操作，就是等之前的软键盘下沉消失之后从底部浮上显示日期选择部件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

datePicker——日期选择控件（with jquery）

demo: http://demo.jb51.net/js/2011/jQuery_calendar/index.html down: http://www.jb51.net/jiaoben/19622.html 用法很简单,而且js文件也很小,之前也见过一些日期选择控件,但个头都比较大,影响速度可以设置日期的格式,可以选择日期的起止时间,如果不加参数的话,默认就是之前的日期不可选,而只能从今天开始选择现在My97 DatePicker也不错,不用jquery 一款很不错的基于JavaScri
BootStrap的Datepicker控件使用心得分享

2013年Bootstrap火了,2014年Bootstrap将继续受到更多人的喜欢,它不仅拥有一套完整漂亮的UI,而且爱好者们为其开发扩展了很多有用的插件和主题!让其拥有无限可能! 公司喜欢使用各种开源免费的框架,bootstrap就非常好用,而且框架布局很漂亮,用起来也很简单.今天遇到要使用它的datepicker这个控件. 问题是:两个时间点,分为开始时间和结束时间,结束时间必须在开始时间之后.于是一顿研究,从上午研究到3点才解决问题. 总结了一下问题所在.主要原因是项目里用的jquery
浅谈Bootstrap的DatePicker日期范围选择

用日期插件时,经常会有一种需求.两个input框选择.开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间. 我们当然可以用选择的结果来判断输入正确与否.但是更好的办法是让我们的日期选择插件做出一些限制. Bootstrap搭配了很优秀的日期选择插件.DatePicker和DateTimePicker. 两者功能很类似.使用方法也是差不多的.DatePicker支持更多的事件和设置. 看api知道日期变化的时候会有一个事件changeDate.当选择的日期变化的时候,会
BootStrap Datepicker 插件修改为默认中文的实现方法

bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文 1.首先将 bootstrap-datepicker.js 另存为 utf-8 格式保存 2.增加 cn 语言选项 var dates = $.fn.datepicker.dates = { en: { days: ["Sunday", "Monday", "Tuesday", "Wednesday"
Bootstrap datepicker日期选择器插件使用详解

bootstrap是与jquery.js文件一起结合起来一起用的,缺少任何一个文件都不可以. datepicker插件一般用于在文本框中选择日期,通过在表中选择日期,从而将日期显示在文本框中.因为datepicker.js默认是英文的,如果需要显示中文日期,则需要引入该插件的中文包. 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&
BootStrap中Datepicker控件带中文的js文件

bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的.本文给大家介绍bootstrap datepicker带中文的js文件. //用之前引用bootstrap的jsif ($(".datepicker").length > 0) { $(".datepicker").datepicker({ language: "zh-CN", autoclose: true,//选中之后自动隐藏日期选择框 cle
JS控件bootstrap datepicker使用方法详解

bootstrap-datepicker沙箱环境: bootstrap-datepicker沙箱环境: 1.requirejs配置 requirejs.config({ baseUrl: '../pages/modules', // urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除 urlArgs:'v=2016110701', paths: { jquery: ["../../plugins/jquery/jquery
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

一.前言使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把
bootstrap datepicker限定可选时间范围实现方法

一.应用场景实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,结束时间不能小于开始时间,此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值. 二.相关知识点 1.bootstrap-datepicker的初始化引入bootstrap-datepicker.js和bootstrap-datepicker.css bootstrap-datepicker配置参数的了解 2.boostra
Jquery日期选择datepicker插件用法实例分析

本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)

相关推荐

随机推荐