日期选择器_日期选择器 钉钉小程序 - CSDN
精华内容
参与话题
  • 前端:日期选择器

    2019-01-11 11:16:21
    引入js文件:bootstrap-datetimepicker.js 日期选择器 $(".form_date").datetimepicker({ language: 'cn', format: 'yyyy-mm-dd', autoclose: true, todayBtn: true, minView: 2 }); ...

    引入js文件:bootstrap-datetimepicker.js

    日期选择器

    $(".form_date").datetimepicker({
        language: 'cn',
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayBtn: true,
        minView: 2
    });
    
    展开全文
  • 日期和时间选择器: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 <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:自己编写的案例项目
    展开全文
  • 日期选择器

    2019-07-20 11:20:57
    插件:去网上找一个,然后复制下他的样式,记得放包 前端页面; <div style="width:970px; margin:10px auto;...input class="inline laydate-icon" id="start" onClick="laydate()" >... ...

    插件:去网上找一个,然后复制下他的样式,记得放包

    前端页面;

        <div style="width:970px; margin:10px auto;">
    			开始时间:<input class="inline laydate-icon" id="start" onClick="laydate()" ><br /><br />
     			结束时间:<input class="inline laydate-icon"  id="over" onClick="laydate()"><br /><br />
       </div>
    

      然后 我获取到我选择的:就可以了

    由于是起止时间,也不难推算出持续时间:

    <script>
        $("#djt").click(function() {
    
                    var start = $('#start').val();
                    var over = $('#end').val();
    
                    if(start == "") {
                        alert("请输入开始时间");
                    } else if(over == "") {
                        alert("请输入结束时间");
                    } else {
    
                        var start = new Date(start);
                        var over = new Date(over);
                        var sjc = ((over.getTime() - start.getTime()) / 1000) / 86400;
                        //        if(sjc>=30){
                        //            var yue = (sjc)/30;
                        //            alert(yue);
                        //        }
                        $("#life").val(sjc + '天');
    
                        //alert(start.getTime()); 
    
                    }
                    })
    </script>

    这样就可以推算出持续的天数了

     

    转载于:https://www.cnblogs.com/xuan584521/p/7456768.html

    展开全文
  • 优美的日期选择器

    2016-08-25 13:41:11
    优美的日期选择器开发的一个问题,手机端同样的功能,好看的界面,好的用户体验肯定更佳。最近项目中要使用到日期的选择,本来说用系统自带的(DataPicker或DatePickerDialog)组件,但产品经理需要炫酷的。作为新手...

    优美的日期选择器

    开发的一个问题,手机端同样的功能,好看的界面,好的用户体验肯定更佳。最近项目中要使用到日期的选择,本来说用系统自带的(DataPicker或DatePickerDialog)组件,但产品经理需要炫酷的。作为新手的我,第一个想到的是第三方库,有些炫酷的,但是不存在我需求刚刚好的,所以我就选了一个有library的去改原码的样式,OK。

    DataPicker

    1. 常用属性
      android:calendarViewShown设置该日期选择器是否显示CalendarView组件
      android:endYear设置日期选择器允许选择的最后一年
      android:startYear设置日期选择器允许选择的第一年
      android:maxDate设置该日期选择器支持的最大日期。以mm/dd/yyyy格式指定最大日期
      android:minDate设置该日期选择器支持的最小日期。以mm/dd/yyyy格式指定最小日期
      android:spinnersShown设置该日期选择器是否显示Spinner日期选择组件
    2. 使用
      2.1 xml的写法
    <DatePicker
            android:id="@+id/datePicker"
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:layout_gravity="center_horizontal"
            android:calendarViewShown="true"
            android:endYear="2016"
            android:spinnersShown="true"
            android:startYear="2000" />

    2.2 MainActivity

    // 获取当前年、月、日、时、分
    c = Calendar.getInstance();
    year = c.get(Calendar.YEAR);
    month = c.get(Calendar.MARCH);
    day = c.get(Calendar.DAY_OF_MONTH);
    hour = c.get(Calendar.HOUR);
    minute = c.get(Calendar.MINUTE);
    
    datePicker = (DatePicker) findViewById(R.id.datePicker);
    // 初始化DatePicker组件,初始化时指定监听器
    datePicker.init(year, month, day, new OnDateChangedListener() {
    
        @Override
        public void onDateChanged(DatePicker view, int year,
                int monthOfYear, int dayOfMonth) {
            //月的值0-11,所以需要加一
            monthOfYear = monthOfYear+1;
            Toast.makeText(mContext,
                    year + "-" + monthOfYear + "-" + dayOfMonth,
                    Toast.LENGTH_SHORT).show();
        }
    });

    2.3 效果
    calendarViewShown为false的

    calendarViewShown为true的

    DatePickerDialog

    通过new关键字创建DatePickerDialog的实例,调用它的show()方法即可将日期选择对话框显示出来

    //放在了点击事件里面,弹出对话框
    btn.setOnClickListener(new OnClickListener() {
    
        @Override
        public void onClick(View v) {
            // 直接创建一个DatePickDialog对话框实例,并将它显示出来
            new DatePickerDialog(mContext, new OnDateSetListener() {
    
                @Override
                public void onDateSet(DatePicker view, int year,
                        int monthOfYear, int dayOfMonth) {
                    monthOfYear = monthOfYear + 1;
                    Toast.makeText(mContext,
                            year + "-" + monthOfYear + "-" + monthOfYear,
                            Toast.LENGTH_SHORT).show();
                }
                // 设置初始值--通过Calendar.getInstance()获取当前日期
            }, c.get(Calendar.YEAR), c.get(Calendar.MONTH), c
                    .get(Calendar.DAY_OF_MONTH)).show();
        }
    });

    效果
    日期选择对话框

    第三方的

    第三方的地址

    部分效果图
    下面的那个按钮很可以很方便的定制

    因为我只需要用到日期选择,为了是apk的包不那么臃肿,所以我就只抽取的日期选择的代码出来时用,同时方便在他的代码上面修改。
    demo地址

    展开全文
  • 时间选择器(timepicker)用法

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

    万次阅读 多人点赞 2014-08-23 15:40:14
    Android自定义DataTimePicker(日期选择器) 笔者有一段时间没有发表关于Android的文章了,关于Android自定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中。本篇博客给大家分享的是自定义一个日期选择器,...
  • 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 看下相应的属性: 具体的来看看代码,布局:<view
  • element-ui日期选择器遇到的坑

    万次阅读 2018-03-14 14:17:10
    刚了解vue,用日期选择器遇到的一个坑,提交的数据与日期选择相差一天最后发现 提交的日期是我们当前的时区是+8区 而16+8正好也是第二天0点,估计这000Z这货多半是和时区相关的解决方法:1.照这个错误的日期提交给...
  • picker从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 html部分: <view class="">日期选择器</...
  • picker-view日期选择器

    千次阅读 2019-02-24 20:54:07
    基于picker-view组件实现嵌入页面的选择器,用来实现日期选择器和时间选择器,可以更便捷、简单的选择时间日期。 二、使用方法: 点击页面时间,弹出悬浮窗,悬浮窗内是时间选择器,选定时间日期后点击确定即可。 三...
  • Flutter 日期选择器与时间选择器

    千次阅读 2020-09-14 21:05:30
    Flutter日期选择器
  • Vue提高20 日期选择器插件

    千次阅读 2019-06-18 16:58:47
    以前收藏了一篇自己动手实现日期选择器的插件,最近没什么事,就想着仿照ElementUI的DatePicker,自己也写了一个简易的日期选择器,本以为不会很麻烦,实际动手才发现有很多问题需要解决。并且在写完之后,才发现可...
  • 其中,用到的组件有两个,一个是城市选择器element-china-area-data,另外一个是日期选择器vue-datepicker 接下来介绍一下这两个选择器的使用,github地址已经在上面标明了,点击组件的名字即可抵达。 一、城市选择...
  • 基于wheelView的自定义日期选择器

    千次下载 热门讨论 2020-07-30 19:47:20
    基于wheelView的自定义日期选择器,支持拓展,样式可以多样
  • 使用场景:当我们的开始时间和结束时间被要求分开输入时,我们如何让...element-ui 中,提供 picker-options 对当前时间日期选择器特有的选项配置。这里主要使用 disabledDate,其返回值为 Boolean类型。 这里...
  • 微信小程序问题之picker-view日期选择器 项目需求截图,选择出生日期的时候需要用到微信的picker-view日期选择器 然后就发现官方picker-view组件有一些问题: 1、初始化日期不是当前日期 2、选择不同月份,...
  • 在上一篇中,我介绍了一般公司都会自定义时间日期选择器,并结合自己所做的项目给大家参考。 工作实录之《Android开发卷——自定义日期选择器(一)》链接:...
  •   在使用vue+element开发的时候由于项目需要,需要使用element日期选择器里面的支持多选以及跳选的日期选择器。   就是这货: code: &amp;lt;el-date-picker v-model=&quot;value13&quot; type=&...
1 2 3 4 5 ... 20
收藏数 212,562
精华内容 85,024
关键字:

日期选择器