js农历日期选择器

一下好一款laydate.js日期时间选择插件，具有一定的参考价值，希望可以帮到你

日期时间选择插件laydate.js：

效果图：

1. 引入JS。 

script type="text/javascript" src="js/laydate.js"/script

2. 根据需要做相应的配置。详情参看官网

script

 laydate({

  elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'

  event: 'focus', //响应事件。如果没有传入event，则按照默认的click

  format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

  festival: true, //显示节日

  istime: true, //显示时间选项

  choose: function(datas){ //选择日期完毕的回调

   alert('得到：'+datas);

  }

 });

/script

实例源码：

!DOCTYPE html 

html 

head 

 meta charset="utf-8" 

 meta http-equiv="X-UA-Compatible" content="IE=edge" 

 meta name="viewport" content="width=device-width, initial-scale=1" 

 !-- 

 link href="favicon.ico" rel="shortcut icon" type="image/x-icon" / 

 link href="favicon.ico" rel="Bookmark" type="image/x-icon" / 

 --

 meta name="Generator" content="EditPlus®" 

 meta name="Author" content="" 

 meta name="Keywords" content="" 

 meta name="Description" content="" 

 titlelayDate日期时间选择插件/title 

 link href="" rel="stylesheet" / 

 script type="text/javascript" src="js/laydate.js"/script 

/head 

body 

 form method="post" action="" 

 Way1, 

  请选择日期:input type="text" name="date" onclick="laydate()" / 

  hr / 

 Way2, 

  input type="text" name="date" id='seldate' class="laydate-icon" /hr / 

  script 

   laydate({ 

    elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class' 

    event: 'focus', //响应事件。如果没有传入event，则按照默认的click 

    format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月 

    festival: true, //显示节日 

    istime: true, //显示时间选项 

    choose: function(datas){ //选择日期完毕的回调 

alert('得到：'+datas); 

    } 

   }); 

  /script 

 Way3, 

  input id="seldate1" 

  span class="laydate-icon" onclick="laydate({elem:'#seldate1'});"/span 

 /form 

/body 

/html

bootstrap为我们提供了一款十分实用的日期控件，但相对于初学者来说，这款日期控件的用法要比按钮等css样式难上许多。这里小编就为大家介绍一下这款功能强大的日期控件的用法。

工具/原料

bootstrap

Dreamweaver

方法/步骤

首先，我们将这款日期控件下载下来。百度bootstrap日期控件即可。

将下载好的日期控件的css、js引入自己的文件中。

在这里需要引入的文件有：

bootstrap.min.css（含有bootstrap 所有css）

bootstrap-datetimepicker.min.css（重要，这就是日期控件所需的样式表）

jquery-1.8.3.min.js（其他版本的jquery也可以）

bootstrap.min.js（含有bootstrap 所有js）

bootstrap-datetimepicker.js（重要，这就是日期控件所需的js）

locales/bootstrap-datetimepicker.fr.js（重要，这里是日期控件初始值）

将所有文件引入完成后，就开始设置日期控件吧。

这是第一种样式。当然，你可以只要input就可以了。

div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"

input class="span2" size="16" type="text" value="12-02-2012"

span class="add-on"i class="icon-th"/i/span

/div

第二种样式，带有重置按钮（用于清空输入框）的组件模版：

div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"

input class="span2" size="16" type="text" value="12-02-2012"

span class="add-on"i class="icon-remove"/i/span

span class="add-on"i class="icon-th"/i/span

/div

i的作用就是两个小图标，若不要可以删去。

最简洁的样式，只有input,点击弹出选择器：

input class="span2" size="16" type="text" value="12-02-2012"

当然，只有这些是无法弹出日期选择器的，还需要js来激活。

这里是最重要的一步，js激活日期选择器！

script type="text/javascript"

$('你的input的class或id').datetimepicker({

//一堆参数

});

/script

将这个写在你的页面内，至于参数，一会再介绍。这样就可以激活你的日期选择器了，点击input便可以弹出选择器。

日期选择器的参数设置：

format

weekStart

startDate

endDate

daysOfWeekDisabled

autoclose

startView

minView

maxView

todayBtn

todayHighlight

keyboardNavigation

language

forceParse

minuteStep

pickerPosition

viewSelect

showMeridian

initialDate

这些属性不用全部设置，但有些是必须的，比如format。

这里是小编所使用的一款日期选择器的初始化设置：

$('.date').datetimepicker({

format:yyyy-mm-dd,

weekStart: 1,

todayBtn: 1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

forceParse: 0,

showMeridian: 1

});

bootstrap日期选择器的属性非常多，这也给了用户较大的选择性，快去设置你自己的DIY日期选择器吧！

js农历日期选择器相关文章：