网站搭建之推荐几个好用的时间选择插件

　　1.layui时间控件

　　formclass=layui-formaction=id=form

　　pclass=layui-form-item

　　pclass=layui-inline

　　pclass=layui-input-inlineui-time

　　inputtype=textid=dp11class=layui-inputui-time-textvalue=kssj=jssj=/

　　/

　　/

　　pclass=layui-inline

　　pclass=layui-input-inlineui-time

　　inputtype=textid=dp12class=layui-inputui-time-textvalue=kssj=jssj=/

　　/

　　/

　　/

　　/form

　　scripttype=text/javascript

　　varlayer=layui.layer，laydate=layui.laydate;

　　varobj={

　　init：function(){

　　this.dp11=$('#dp11');

　　this.dp12=$('#dp12');

　　this.initEvent();

　　}，

　　initEvent：function(){

　　this.dp1

　　1.dateLay();

　　this.dp1

　　2.dateLay();

　　}

　　}

　　obj.init();

　　});

　　/script

　　2.mobiscroll

　　mobiscroll就是一款非常好用的插件，不仅仅在于其可区间选择，其其他的时间选择方式也是非常好用的。下面以其区间选择为例。可以兼容手机

　　head

　　metacharset=UTF-8

　　metaname=viewportcontent=width=device-width，initial-scale=

　　1.0，maximum-scale=

　　1.0，user-scalable=no

　　metahttp-equiv=X-UA-Compatiblecontent=ie=edge

　　metaname=renderercontent=webkit

　　metaname=hotcsscontent=initial-dpr=1

　　scriptsrc=js/jquery.min.jstype=text/javascript/script

　　scriptsrc=js/mobiscroll.custom-

　　3.0.0-beta

　　6.min.jstype=text/javascript/script

　　3.0.0-beta

　　6.min.cssrel=stylesheettype=text/css

　　/head

　　inputclass=input-textid=dateselecttype=textreadonly

　　script

　　vardays_spacing=parseInt(2);//可选几天之后的日期

　　varstart_date=newDate(newDate().getTime()+days_spacing*24*3600*1000);

　　varend_date=newDate(newDate().getTime()+days_spacing*24*3600*1000);

　　$('#dateselect').mobiscroll().range({

　　theme：''，

　　display：'center'，

　　mode：'rangeBasic'，

　　min：newDate(newDate().getTime()+days_spacing*24*3600*1000)，

　　defaultValue：[start_date，end_date]，

　　onSet：function(event，inst){

　　vardays=countdatenumber(event.valueText);

　　$('#datenumber').html(days);

　　countsessselect(event.valueText);//记录选择的时长

　　countmoney();//计算总价格

　　}

　　});

　　/**

　　*初始赋值

　　*/

　　$('#dateselect').val(getalldate(newDate(start_date))+'-'+getalldate(newDate(end_date)));

　　vardays=countdatenumber($('#dateselect').val());

　　$('#datenumber').html(days);

　　/**

　　*计算时间字符串

　　*/

　　functiongetalldate(date){

　　varyear=date.getFullYear();

　　varmonth=date.getMonth()+1;

　　month=month10？'0'+month：month;

　　varday=date.getDate();

　　returnyear+'/'+month+'/'+day;

　　}

　　/**

　　*触发显示

　　*/

　　$('#dateselect').click(function(){

　　$('#dateselect').mobiscroll('show');

　　returnfalse;

　　})

　　/**

　　*计算相隔的天数

　　*/

　　functioncountdatenumber(s){

　　vararr=s.split(-);

　　varstart_date=newDate(arr[0]);

　　varend_date=newDate(arr[1]);

　　vardays=parseInt(Math.ceil((end_date-start_date)/(1000*3600*24)));

　　returndays+1;

　　}

　　/script

　　3.amazeUIDatepicker时间插件

　　pclass=am-alertam-alert-dangerid=my-alertstyle=display：none

　　p开始日期应小于结束日期！/

　　/

　　pclass=am-g

　　pclass=am-u-sm-6

　　buttontype=buttonclass=am-btnam-btn-defaultam-margin-rightid=my-start开始日期/buttonspanid=my-startDate2023-12-20/span

　　/

　　pclass=am-u-sm-6

　　buttontype=buttonclass=am-btnam-btn-defaultam-margin-rightid=my-end结束日期/buttonspanid=my-endDate2023-12-25/span

　　/

　　/

　　script

　　$(function(){

　　varstartDate=newDate(2023，11，20);

　　varendDate=newDate(2023，11，25);

　　var$alert=$('#my-alert');

　　$('#my-start').datepicker().

　　on('changeDate.datepicker.amui'，function(event){

　　if(event.date.valueOf()endDate.valueOf()){

　　$alert.find('p').text('开始日期应小于结束日期！').end().show();

　　}else{

　　$alert.hide();

　　startDate=newDate(event.date);

　　$('#my-startDate').text($('#my-start').data('date'));

　　}

　　$(this).datepicker('close');

　　});

　　$('#my-end').datepicker().

　　on('changeDate.datepicker.amui'，function(event){

　　if(event.date.valueOf()startDate.valueOf()){

　　$alert.find('p').text('结束日期应大于开始日期！').end().show();

　　}else{

　　$alert.hide();

　　endDate=newDate(event.date);

　　$('#my-endDate').text($('#my-end').data('date'));

　　}

　　$(this).datepicker('close');

　　});

　　});

　　/script