时间选择器_时间选择器选同一天 - CSDN
精华内容
参与话题
  • 时间选择器(timepicker)用法

    万次阅读 2019-01-18 11:15:41
    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。 日期选择插件是一个配置灵活的插件,你...

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

    日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

    文档和下载地址:

    1、jQuery-Timepicker-Addon的下载地址:https://github.com/trentrichardson/jQuery-Timepicker-Addon

    2、jQuery-Timepicker-Addon的的文档地址:http://trentrichardson.com/examples/timepicker/

    3、DateTimePicker的演示地址:http://www.helloweba.com/demo/timepicker/

    4、JQuery-UI下载地址:http://jqueryui.com/themeroller/

    6、JQuery下载地址:http://www.jq22.com/jquery-info122

    下面先看效果图:

    引入js文件:

    复制代码

    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
    <script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
    <script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
    <link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

    复制代码

     

    1、默认的效果:

    关键代码:

    $("#defult").datetimepicker();

    2、控制到时分秒:

    关键代码:

    复制代码

                    $('#date').prop("readonly", true).datetimepicker({
                            timeText: '时间',
                            hourText: '小时',
                            minuteText: '分钟',
                            secondText: '秒',
                            currentText: '现在',
                            closeText: '完成',
                            showSecond: true, //显示秒  
                            timeFormat: 'HH:mm:ss' //格式化时间  
                        });

    复制代码

    3、控制到年月日

    关键代码:

    复制代码

                    $("#date_yy-mm-dd").prop("readonly", true).datepicker({
                            changeMonth: true,
                            dateFormat: "yy-mm-dd",
                            onClose: function(selectedDate) {
    
                            }
    
                        });

    复制代码

     

    4、开始结束区间

    关键代码:

    复制代码

            $("#date_start").prop("readonly", true).datepicker({
                            changeMonth: true,
                            dateFormat: "yy-mm-dd",
                            onClose: function(selectedDate) {
                                $("#date_end").datepicker("option", "minDate", selectedDate);
                            }
                        });
    
                        $("#date_end").prop("readonly", true).datepicker({
                            changeMonth: true,
                            dateFormat: "yy-mm-dd",
                            onClose: function(selectedDate) {
                                $("#date_start").datepicker("option", "maxDate", selectedDate);
                                $("#date_end").val($(this).val());
                            }
                        });

    复制代码

     

     

    5、时分秒选择:

    关键代码:

    复制代码

                           $('#date_hhmmss').prop("readonly", true).timepicker({
                            timeText: '时间',
                            hourText: '小时',
                            minuteText: '分钟',
                            secondText: '秒',
                            currentText: '现在',
                            closeText: '完成',
                            showSecond: true, //显示秒  
                            timeFormat: 'HH:mm:ss' //格式化时间  
                        });

    复制代码

    6、开始结束区间(第二种写法):

          

    关键代码:

    复制代码

                    $.timepicker.dateRange(
                            $("#date_start_1"),
                            $("#date_end_1"), {
                                minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
                                maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
                                start: {}, // start picker options
                                end: {} // end picker options});
                            }
                        );

    复制代码

     

    完整代码:

    复制代码

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <title></title>
            <script src="js/jquery-3.1.1.min.js"></script>
            <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
            <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
            <script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
            <script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
            <link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
            <script type="text/javascript">
                (function($) {
    
                    $(function() {
                        $.datepicker.regional['zh-CN'] = {
                            changeMonth: true,
                            changeYear: true,
                            clearText: '清除',
                            clearStatus: '清除已选日期',
                            closeText: '关闭',
                            closeStatus: '不改变当前选择',
                            prevText: '<上月',
                            prevStatus: '显示上月',
                            prevBigText: '<<',
                            prevBigStatus: '显示上一年',
                            nextText: '下月>',
                            nextStatus: '显示下月',
                            nextBigText: '>>',
                            nextBigStatus: '显示下一年',
                            currentText: '今天',
                            currentStatus: '显示本月',
                            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                            monthStatus: '选择月份',
                            yearStatus: '选择年份',
                            weekHeader: '周',
                            weekStatus: '年内周次',
                            dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                            dayStatus: '设置 DD 为一周起始',
                            dateStatus: '选择 m月 d日, DD',
                            dateFormat: 'yy-mm-dd',
                            firstDay: 1,
                            initStatus: '请选择日期',
                            isRTL: false
                        };
    
                    });
    
                    $(function() {
    
                        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
                        
                        $("#defult").datetimepicker();
                        
                        $('#date').prop("readonly", true).datetimepicker({
                            timeText: '时间',
                            hourText: '小时',
                            minuteText: '分钟',
                            secondText: '秒',
                            currentText: '现在',
                            closeText: '完成',
                            showSecond: true, //显示秒  
                            timeFormat: 'HH:mm:ss' //格式化时间  
                        });
    
                        $("#date_yy-mm-dd").prop("readonly", true).datepicker({
                            changeMonth: true,
                            dateFormat: "yy-mm-dd",
                            onClose: function(selectedDate) {
    
                            }
    
                        });
    
                        $("#date_start").prop("readonly", true).datepicker({
                            changeMonth: true,
                            dateFormat: "yy-mm-dd",
                            onClose: function(selectedDate) {
                                $("#date_end").datepicker("option", "minDate", selectedDate);
                            }
                        });
    
                        $("#date_end").prop("readonly", true).datepicker({
                            changeMonth: true,
                            dateFormat: "yy-mm-dd",
                            onClose: function(selectedDate) {
                                $("#date_start").datepicker("option", "maxDate", selectedDate);
                                $("#date_end").val($(this).val());
                            }
                        });
    
                        $('#date_hhmmss').prop("readonly", true).timepicker({
                            timeText: '时间',
                            hourText: '小时',
                            minuteText: '分钟',
                            secondText: '秒',
                            currentText: '现在',
                            closeText: '完成',
                            showSecond: true, //显示秒  
                            timeFormat: 'HH:mm:ss' //格式化时间  
                        });
    
                        $.timepicker.dateRange(
                            $("#date_start_1"),
                            $("#date_end_1"), {
                                minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
                                maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
                                start: {}, // start picker options
                                end: {} // end picker options});
                            }
                        );
                        
                        
                    });
                    
                    
                }(jQuery));
            </script>
        </head>
    
        <body>
            
            默认:
            <input id="defult" />
            <br/>
            <br />
            控制到时分秒:<input id="date" />
            <br />
            <br /> 控制到年月日:
            <input id="date_yy-mm-dd" />
            <br />
            <br /> 开始结束区间:
            <br />
            <input id="date_start" />~<input id="date_end" />
            <br />
            <br /> 时分秒选择:
            <br />
            <input id="date_hhmmss" />
            <br />
            <br /> 开始结束区间(第二种写法):
            <br />
            <input id="date_start_1" />~<input id="date_end_1" />
        </body>
    
    </html>
    展开全文
  • 时间选择器(datetimepicker)的使用

    万次阅读 2018-01-14 19:12:14
    效果图:   1.导入需要的文件: 2.获取WEB路径,然后在jsp中...4.时间选择器输入框: 5.设置时间选择器: //===========点击展示日历选择器================== $('.form_datetime').da

    效果图:

     


    1.导入需要的文件:


    2.获取WEB路径,然后在jsp中引入所需js文件:






    3.导入所需的CSS文件:


    4.时间选择器输入框:


    5.设置时间选择器:

    //===========点击展示日历选择器==================
    		$('.form_datetime').datetimepicker({
    			format : 'yyyy-mm-dd hh:ii',
    			language : 'zh-CN',
    			weekStart : 1,
    			todayBtn : 1,
    			autoclose : 1,
    			todayHighlight : 1,
    			defaultDate : new Date(),
    			startView : 2,
    			forceParse : 0,
    			showMeridian : 1
    		});
    展开全文
  • 时间选择器.zip

    2020-07-23 23:33:58
    该代码简洁明了,能够实现时间选择器界面功能,且有相应的注释,易于读者理解。
  • 日期和时间选择器:DateTime Picker

    千次阅读 2018-11-05 10:11:05
    日期和时间选择器:DateTime Picker 一、概述 下载: http://www.malot.fr/bootstrap-datetimepicker/ 指南: http://www.malot.fr/bootstrap-datetimepicker/demo.php 导入css、js &lt;link href="css/...

    日期和时间选择器:DateTime Picker

    一、概述

    1. 下载:
      http://www.malot.fr/bootstrap-datetimepicker/
    2. 指南:
      http://www.malot.fr/bootstrap-datetimepicker/demo.php
    3. 导入css、js
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    
    1. 基础案例一
    <input type="text" id="form-date">
    <script type="text/javascript">
    	$("#form-date").datetimepicker();
    </script>
    
    1. 基础案例二
    <input type="text" id="form-date">
    <script type="text/javascript">
    	$("#form-date").datetimepicker({
    		format:'yyyy-mm-dd',//日期格式,默认值:'mm / dd / yyyy'
    		language:'zh-CN',//中文,默认值:'en'
    		minView: 'month',//datetimepicker应该显示的最低视图,默认值:0,'hour'
    		autoclose:true//是否在选择日期后立即关闭datetimipicker,默认值:false
    	});
    </script>
    
    1. 日期格式(format属性)
      p:子午线(“am”或“pm”) - 根据区域设置文件
      P:子午线大写(“AM”或“PM”) - 根据区域设置文件
      s:没有前导零的秒
      ss:秒,带前导零的2位数字
      i:没有前导零的时间
      ii:分钟,带前导零的2位数字
      h:小时无前导零 - 24小时格式
      hh:小时,2位数字带前导零 - 24小时格式
      H:小时无前导零 - 12小时格式
      HH:小时,2位数字带前导零 - 12小时格式
      d:没有前导零的月份的日子
      dd:月的日期,带前导零的2位数字
      m:没有前导零的月份的数字表示
      mm:月的数字表示,带前导零的2位数字
      M:一个月的短文本表示,三个字母
      MM:一个月的全文表示,例如1月或3月
      yy:一年的两位数表示
      yyyy:全年数字表示,4位数字
    2. 可用视图:
      0或“hour”
      1天或“day”为天视图
      2或“month”视图(默认)
      3年或“year”为12个月概述
      4年或“decade”的10年概览。适用于生日的datetimepickers
    3. 其他属性:
      1)weekStart:星期几开始。0(星期日)至6(星期六),默认值:0
      2)startDate:可能选择的最早日期; 所有较早的日期将被禁用。默认值:开始时间
      3)endDate:可能选择的最后日期; 所有以后的日期将被禁用。默认值:结束时间
      4)daysOfWeekDisabled:应禁用的星期几。值为0(星期日)至6(星期六)。多个值应以逗号分隔。示例:禁用周末:‘0,6’或[0,6]。默认值:’’,[]
      5)startView:datetimepicker在打开时应该显示的视图。默认值:2,‘month’
      6)maxView:datetimepicker应该显示的最高视图。默认值:4,‘decade’
      7)todayBtn:如果为true或“linked”,则在datetimimaker底部显示“Today”按钮,以选择当前日期。如果为真,“Today”按钮将仅将当前日期移动到视图中; 如果“链接”,当前日期也将被选中。默认值:false
      8)todayHighlight:如果为真,则突出显示当前日期。默认值:false
      9)keyboardNavigation:是否允许通过箭头键导航日期。默认值:true
      10)forceParse:是否在选择器关闭时强制解析输入值。也就是说,当用户在输入字段中留下无效日期时,选择器将强制解析该值,并将输入的值设置为符合给定值的新的有效日期。默认值:true
      11)minuteStep:用于构建小时视图的增量。每minuteStep分钟创建一个预设。默认值:5
      12)pickerPosition:此选项目前仅在组件实现中可用。使用它,您可以将选择器放在输入字段的下方。默认值:‘bottom-right’ (支持其他值:‘bottom-left’)
      13)viewSelect:使用此选项,您可以选择将从中选择日期的视图。默认情况下是最后一个,但是您可以选择第一个,因此在每次点击时都会更新日期。Default: (supported values are: ‘decade’, ‘year’, ‘month’, ‘day’, ‘hour’)
      14)showMeridian:此选项将对于day和hour视图启用子视图。默认值:false
      15)initialDate:您可以使用日期初始化查看器。默认是现在,所以你可以指定昨天或今天在午夜…。默认值:new Date()
    4. 基础案例三:组件
      1)需要先在WebContent目录下添加fonts文件夹,添加glyphicon字体
      2)
    <div class="form-horizontal" style="margin-top:20px;">     
    <label class="col-md-1 control-label">组件:</label>
    <div id="datetimepicker" class="input-group date col-md-2" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
    	<input class="form-control" size="16" type="text" value="" readonly >
    	<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    	<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    </div>
    <input type="hidden" id="dtp_input1" value="" /><br/>
    </div>
    
    3)
    
    <script>
    	$("#datetimepicker").datetimepicker({
    		language:'zh-CN',
    		minView:'month',
    		autoclose:true
    	});
    </script>
    
    1. 基础案例三:讲解过程
      1)输入框组:向基于文本的输入框添加作为前缀和后缀的文本或按钮
      a)把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
    <div class="input-group">
    	<input type="text" class="form-control">
    </div>
    

    b)接着,在相同的

    内,在 class 为 .input-group-addon 的 内放置额外的内容。

    <span class="input-group-addon">$</span>
    

    c)把该 放置在 元素的前面或者后面。

    <div class="input-group">
    	<span class="input-group-addon">$</span>
    	<input type="text" class="form-control">
    	<span class="input-group-addon">.00</span>
    </div>
    

    2)引用glyphicon字体

    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    

    3)添加只读属性

    <input type="text" class="form-control" readonly>
    

    4)添加js

    <script>
    	$("#datetimepicker").datetimepicker({
    		language:'zh-CN',
    		minView:'month',
    		autoclose:true
    	});
    </script>
    

    5)在div中添加.date 样式

    <div id="datetimepicker" class="input-group date col-md-2" >
    

    6)在div中添加data-date-format属性,也可以用js设置(format:‘yyyy-mm-dd’)

    <div id="datetimepicker" class="input-group date col-md-2"  data-date-format="yyyy-mm-dd">
    

    7)div中的data-date属性,相当于js中的initialDate属性
    8)镜像输入元素(在每个更新事件上,使用特定的日期格式更新辅助字段)
    a)在div中添加属性data-link-field=“dtp_input1”,其属性值为另外一个文本框元素的id

    <div data-link-field="dtp_input1" id="datetimepicker" class="input-group date col-md-2"  data-date-format="yyyy-mm-dd">
    

    b)添加另外的表单元素

    <input type="hidden" id="dtp_input1" value="" />
    
    1. 事件触发案例:
    $("#datetimepicker2").datetimepicker({
    		format:'yyyy-mm-dd',
    		language:'zh-CN',
    		minView:'month',
    		autoclose:true,
    		startDate:new Date()
    	}).on("hide",function(){//当日期选择器被隐藏时触发。
    		alert("控件被隐藏");
    	}).on("changeDate",function(){//当日期更改时触发
    		alert("日期被改变");
    	}).on("outOfRange",function(){//当超出设定的日期范围时触发
    		alert("日期超出范围");
    	});
    

    源代码下载地址:

    https://download.csdn.net/download/pcbhyy/10764792

    源代码目录结构:

    1. bootstrap-datetimepicker-master.zip:源文件
    2. bootstrap_datetimepicker_demo:自己编写的案例项目
    展开全文
  • 1.下拉列表Spinner 1.1.activity_main.xml xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

    1.下拉列表Spinner

    1.1.activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.rj141.sb.kongjian.MainActivity">
    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18dp"
                android:text="请选择您最喜欢的水果:" />
    
            <Spinner
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/spinner" />
        </LinearLayout>
    
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:id="@+id/tv" />
    
    </LinearLayout>
    Spinner是下拉列表的组件

    1.2.MainActivity.class

    public class MainActivity extends AppCompatActivity {
    
        private Spinner s;
        String[] data=new String[]{"苹果","雪梨","西瓜","葡萄","橙子","草莓"};
        private TextView tv;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            tv= (TextView) this.findViewById(R.id.tv);
            s= (Spinner) this.findViewById(R.id.spinner);
            s.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data));
            s.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
                @Override
                public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                    String str=data[position];
                    tv.setText("最喜欢的水果是:"+str);
                }
                @Override
                public void onNothingSelected(AdapterView<?> parent) {
                }
            });
        }
    }
    s.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data));android.R.layout.simple_list_item_1是指安卓自带的下拉列表格式,data是数据源;

    s.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()){..};是下拉列表的监听


    2.日期选择器

    2.1.activity.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.rj141.sb.kongjian.DateActivity">
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:id="@+id/tv" />
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="日历"
            android:id="@+id/btndate" />
    </LinearLayout>
    2.2.DateActivity.class

    public class DateActivity extends ActionBarActivity {
    
        private Button btn;
        private TextView tv;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_date);
    
            btn=(Button)this.findViewById(R.id.btndate);
            tv= (TextView) this.findViewById(R.id.tv);
            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    new DatePickerDialog(DateActivity.this, new DatePickerDialog.OnDateSetListener() {
                        @Override
                        public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                            tv.setText("您的出生日期是:"+String.format("%d-%d-%d",year,monthOfYear+1,dayOfMonth));
                        }
                    },2000,1,2).show();
                }
            });
        }
    }
    DatePickerDialog日历选择器的对话框,监听为OnDateSetListener(){..}


    3.时间选择器

    3.1.布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.rj141.sb.kongjian.DateActivity">
    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:text="几点吃饭:"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:id="@+id/tv" />
        </LinearLayout>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="时间"
            android:id="@+id/btndate" />
    </LinearLayout>
    3.2.Java文件

    public class DateActivity extends ActionBarActivity {
    
        private Button btn;
        private TextView tv;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_date);
    
            btn=(Button)this.findViewById(R.id.btndate);
            tv= (TextView) this.findViewById(R.id.tv);
            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    new TimePickerDialog(DateActivity.this, new TimePickerDialog.OnTimeSetListener() {
                        @Override
                        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                            tv.setText(String.format("%d:%d",hourOfDay,minute));
                        }
                    //0,0指的是时间,true表示是否为24小时,true为24小时制
                    },0,0,true).show();
                }
            });
        }
    }
    


    4.单项选择

    4.1.布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.rj141.sb.kongjian.DateActivity">
    
    
        <TextView
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2+3="
            android:textSize="22dp"
            />
    
        <RadioGroup
            android:layout_marginLeft="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="A.2"
                android:id="@+id/rb1"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="B.3"
                android:id="@+id/rb2"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C.4"
                android:id="@+id/rb3"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="D.5"
                android:id="@+id/rb4"
                />
        </RadioGroup>
    
        <Button
            android:id="@+id/submit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="提交"/>
    </LinearLayout>
    4.2.Java文件

    public class SingChoose extends AppCompatActivity {
        private Button btn;
        private RadioButton rbD;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.sing_choose);
    
            rbD= (RadioButton) this.findViewById(R.id.rb4);
            btn= (Button) this.findViewById(R.id.submit);
            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(rbD.isChecked()){
                        Toast.makeText(SingChoose.this,"正确,请加五分",Toast.LENGTH_SHORT).show();
                    }
                    else {
                        Toast.makeText(SingChoose.this,"错误,请减五分",Toast.LENGTH_SHORT).show();
                    }
                }
            });
        }
    }
    


    5.多项选择

    5.1.布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.rj141.sb.kongjian.CheckChoose">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="你喜欢下列哪些物品?"
            />
    
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="巧克力"
            android:id="@+id/cb1" />
    
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="冰淇淋"
            android:id="@+id/cb2" />
    
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="蛋糕"
            android:id="@+id/cb3" />
    
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="啤酒"
            android:id="@+id/cb4" />
    
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="肉"
            android:id="@+id/cb5" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:id="@+id/tv" />
    
    </LinearLayout>
    5.2.Java文件

    public class CheckChoose extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
    
        private CheckBox cb1,cb2,cb3,cb4,cb5;
        private TextView tv;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.check_choose);
    
            tv= (TextView) this.findViewById(R.id.tv);
            cb1= (CheckBox) this.findViewById(R.id.cb1);
            cb2= (CheckBox) this.findViewById(R.id.cb2);
            cb3= (CheckBox) this.findViewById(R.id.cb3);
            cb4= (CheckBox) this.findViewById(R.id.cb4);
            cb5= (CheckBox) this.findViewById(R.id.cb5);
            cb1.setOnCheckedChangeListener(this);
            cb2.setOnCheckedChangeListener(this);
            cb3.setOnCheckedChangeListener(this);
            cb4.setOnCheckedChangeListener(this);
            cb5.setOnCheckedChangeListener(this);
        }
    
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            String str="您喜欢:";
            if(cb1.isChecked()){
                str+=cb1.getText()+",";
            }
            if(cb2.isChecked()){
                str+=cb2.getText()+",";
            }
            if(cb3.isChecked()){
                str+=cb3.getText()+",";
            }
            if(cb4.isChecked()){
                str+=cb4.getText()+",";
            }
            if(cb5.isChecked()){
                str+=cb5.getText()+",";
            }
            tv.setText(str);
        }
    }



    展开全文
  • &amp;amp;lt;!-- 日期Daterange picker --&amp;amp;gt; &amp;amp;lt;link href=&amp;quot;/hqt/static/plugin/datetimepicker/bootstrap-datetimepicker.css&amp;quot; rel=&...qu
  • 自定义wheel时间选择器 (年月日,星期) 有同样需要的小伙伴可以参考一下 demo地址 https://download.csdn.net/download/xxb52306/11072699
  • DEMO下载 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML view class=&amp;quot;tui-picker-content&...时间选择器(选择时分)view&amp;gt; pi
  • 以前使用Bootstrap 的日期和时间选择插件,这样的话需要引入先关的js文件,其实使用HTML5可以很快的实现目标: html> body> form action="/example/html5/demo_form.asp" method="get"> Date and time: input ...
  • Android 日期时间选择器

    万次阅读 2019-05-07 11:13:02
    文章参考: https://blog.csdn.net/qq_33756493/article/details/78120743 参考以上连接文章,具体实现如下: 布局文件代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=...
  • layui时间选择器的使用

    千次阅读 2019-05-28 07:59:22
    时间选择器在一定程度上简化了日期的输入,而layui作为一款备受欢迎的前端框架,时间选择器主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心,并且均支持范围...
  • 项目中常会用到时间选择器,但是找了一下layui的官方文档时间选择器是独立的存在,但是要实现end时间选择器max为start选择器最终选择时间,还需要在done(选中)事件做下一步处理 废话不多说。直接上代码 /** * @...
  • 最近看到一个需求,就是日期时间选择器上面需要带有星期几来供用户滑动选择,我上网搜了一些发现很多demo都跟我以前写过的一篇日期时间选择器差不多,(点击查看我以前写过的日期时间选择器)找不到带有星期几的日期...
  • 两种时间选择器(移动端和PC端)

    万次阅读 2018-05-03 11:15:47
    1、移动端时间选择器,以年月为例 此款时间选择器需要引入两个js文件,jquery.js和query.date.js下载地址在本文最后,代码如下: &lt;script type="text/javascript" src="./jquery.min.js&...
  • antd组件限定时间选择器日期范围

    千次阅读 2019-10-18 15:56:59
    react的antd组件时间选择器限定日期范围为指定范围 react项目中碰到一个需求,要求antd的日期选择器组件可选择范围为:只能选择开始时间的后60天 即开始时间在结束日期前60天,结束日期在开始日期后60天,以下是...
  • Android-使用DatePicker选择时间和日期(时间选择器)

    万次阅读 热门讨论 2018-07-31 16:35:25
    Android-使用DatePicker选择时间和日期(年 月 日嵌套在DatePickerView中) 在安卓App里面,选择时间日期也是很常见的,比如在大部分APP里面填写...本人写了两篇时间选择器 这篇不适合您的需求,来看看这里 链接  ...
  • 在使用vue+element的时候,因需求,是将两个时间选择器拼接起来当做区间时间选择器,所以限制了开始时间和结束时间,结束时间不能小于开始时间,开始时间也不能大于结束时间,然后写完后,发现自带的清除按钮出现了...
  • android开发之时间选择器

    千次阅读 2018-06-04 00:43:20
    这几天,公司UI给了一个时间选择器的设计,一听就觉得 网上一大堆,对吧 。 特别简单,只要去网上搜下就好了,然后依赖进项目就OK了 没毛病。 不过看了设计的效果图后我就崩溃了。。开源的那些控件都不是这样的。...
  • 很多公司都有一套自己的公司前端框架,...以至于,在前阵子的时候就遇到了问题,是关于这个时间选择器的日期限定,查阅了公司自己给出的官方文档,上面和ElementUI的时间选择器文档是一样的。 对于时间选择器的日期...
  • 滚轮效果View的日期选择器和时间选择器和对话框由于之前需要使用滚轮效果的时间View,摸索一一段时间自己封装了一个,应该对大家都是有点帮助的。 原本我是在一个多选菜单中筛选时间的,对话框肯定是有点突兀了,...
1 2 3 4 5 ... 20
收藏数 1,222,675
精华内容 489,070
关键字:

时间选择器