[TOC]
BootStrap 组件 bootstrap-datetimepicker - Bootstrap日期和时间表单组件 官方地址:https://github.com/smalot/bootstrap-datetimepicker https://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
环境依赖:
时间格式化属性:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 符号 意义 p 12小时制且小写(‘am’ or ‘pm’) P 12小时制且大写(‘AM’ or ‘PM’) s 秒，前面不补0 ss 秒，前面补0 i 分，前面不补0 ii 分，前面补0 h 时，24小时制，前面不补0 hh 时，24小时制，前面补0 H 时，12小时制，前面不补0 HH 时，12小时制，前面补0 d 日，前面不补0 dd 日，前面补0 m 月，数字表示，前面不补0 如：4 mm 月，数字表示，前面补0 如：04 M 月，缩写表示，前面补0 如：Apr MM 月，全称表示，前面补0 如：April yy 年，后两位 如：16 yyyy 年，全部 如：2016
选项属性一览:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 选项属性 * 1 format 格式 * 2 weekStart 一周从哪一天开始 * 3 startDate 开始时间 * 4 endDate 结束时间 * 5 daysOfWeekDisabled 一周的周几不能选 * 6 autoclose 选完时间后是否自动关闭 * 7 startView 选完时间首先显示的视图 * 8 minView 最精确的时间 * 9 maxView 最高能展示的时间 * 10 todayBtn 当天日期按钮 * 11 todayHighlight 当天日期高亮 * 12 keyboardNavigation 方向键改变日期 * 13 language 语言 * 14 forceParse 强制解析 * 15 minuteStep 步进值 * 16 pickerPosition 选择框位置 * 17 showMeridian 是否显示上下午 * 18 initialDate 初始化日期时间
语法&参数&演示:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <!DOCTYPE html> <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Bootstrap-datetimepicker Demo</title > <link href ="/static/bootstrap/css/bootstrap.css?version=v3.3.7" rel ="stylesheet" media ="screen" > <link href ="/static/bootstrap-datetime/css/bootstrap-datetimepicker.css" rel ="stylesheet" media ="screen" > </head > <body > <div class ="container" > <form action ="" class ="form-horizontal" role ="form" > <div class ="form-group" > <label class ="col-md-2 control-label" > Date Picking Demo</label > <div class ="input-group date form_datetime col-md-5" > <input size ="20" type ="text" value ="" readonly class ="form-control" > <span class ="input-group-addon" > <span class ="glyphicon glyphicon-remove" > </span > </span > <span class ="input-group-addon" > <span class ="glyphicon glyphicon-calendar" > </span > </span > <span class ="input-group-addon" > <span class ="glyphicon glyphicon-th" > </span > </span > <span class ="input-group-addon" > <span class ="glyphicon glyphicon-time" > </span > </span > </div > </div > </form > <input class ="form-control date div_datetime col-md-2" type ="datetime" readonly value ="" size ="16" /> </div > <script type ="text/javascript" src ="/static/jquery/jquery.js?version=3.5.1" charset ="UTF-8" > </script > <script type ="text/javascript" src ="/static/bootstrap/js/bootstrap.min.js?version=3.3.7" > </script > <script type ="text/javascript" src ="/static/bootstrap-datetime/js/bootstrap-datetimepicker.js" charset ="UTF-8" > </script > <script type ="text/javascript" src ="/static/bootstrap-datetime/js/bootstrap-datetimepicker.zh-CN.js" charset ="UTF-8" > </script > <script type ="text/javascript" > $('.form_datetime' ).datetimepicker({ language: 'zh-CN' , autoclose: 1 , weekStart: 2 , weekEnd: 6 , showMeridian: 1 , todayBtn: 1 , todayHighlight: 1 , startView: "year" , minView: "minute" , maxView: "decade" , keyboardNavigation: 1 , pickerPosition: 'bottom-right' , minuteStep:30 , daysOfWeekDisabled: [0 ,2 ,3 ] }); $('.div_datetime' ).datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss' , weekStart: 5, weekEnd: 4, }) </script > </body > </html >
weiyigeek.top-datepicker
参考链接:
