php表单⽇期选择器,BootStrap表单时间选择器详解
前⾔
在⼤多数项⽬中 ⽤户界⾯的时间选择是必不可少的,在项⽬的⽤户体验友好度这个⼤前提下,不让⽤户⾃⼰输⼊时间就显得格外的重要。⽽且⽤户输⼊时间还会存在格式不固定的问题,加⼤后台的开发量。
在这个时候就需要⽤到时间输⼊插件了,格式由我们⾃⼰设置,还减少了⽤户的输⼊环节提⾼了⽤户体验友好度
使⽤
bootStrap的时间插件datetimepicker⽀持界⾯多元化有专门的的⼀个⽹址来说明这个时间选择器
Demo
利⽤插件所带的⽅法和时间。可以做⼀个简单的demo
demo功能点:
1.输⼊⽇期格式为yyyy-MM-dd hh:ii:ss(格式可以⾃定义)。
2.前⼀个⽇期的时间输⼊以后,后⾯⼀个⽇期的输⼊值不能⼩于前⼀个⽇期
3.后⼀个⽇期的时间输⼊以后,前⾯⼀个⽇期的输⼊值不能⼤于前⼀个⽇期
需要bootstrap提供封装的css和js
$.fn.datetimepicker.defaults = {
//默认语⾔
language: 'zh-CN',
//默认选择格式
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
todayBtn: true,
//选择板所在输⼊框位置
pickerPosition: "bottom-left"
};
$(function () {
bootstrap项目var picker1 = $('#startTime').datetimepicker();
var picker2 = $("#endTime").datetimepicker();
//动态设置最⼩值(选择前⾯⼀个⽇期后:后⾯⼀个⽇期不能⼩于前⾯⼀个)
<('changeDate', function (e) {
picker2.datetimepicker('setStartDate', e.date);
});
//动态设置最⼤值(选择后⾯⼀个⽇期后:前⾯⼀个⽇期不能⼤于前⾯⼀个)
<('changeDate', function (e) {
picker1.datetimepicker('setEndDate', e.date);
});
});
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持脚本之家。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论