精华内容
下载资源
问答
  • 日期时间选择器
    千次阅读
    2020-12-22 22:54:49

    日期时间选择器 DatePicker

    介绍

    一款高颜值、多场景的日期时间选择器,提供自定义颜色/格式/文案等。

    该插件采用scss编译,如遇到样式/层级问题可以到源码修改。

    如果对您有帮助,可以评论或赞赏一下,谢谢!

    地址:Uni-App插件市场地址 | Gitee | Github

    属性说明

    属性

    类型

    默认值

    说明

    show

    Boolean

    false

    是否显示

    type

    String

    date

    类型,可选值:date(日期)、time(时间)、datetime(日期时间)、range(日期范围)、rangetime(日期时间范围)

    color

    String

    #409eff

    选择控件的颜色

    format

    String

    自定义格式,参考下方格式说明

    value

    String, Array

    设置显示的值(如果用了format需要个format格式一致,否则需要标准的能被Date解析的字符串(time除外))

    showSeconds

    Boolean

    false

    是否显示秒(type为datetime/time时生效)

    showHoliday

    Boolean

    true

    是否显示公历节日

    showTips

    Boolean

    false

    是否显示提示文字(type为range/rangetime时生效)

    beginText

    更多相关内容
  • android日期时间选择器,可日期时间同时选择。参考https://github.com/liuwan1992/CustomDatePicker
  • Js日期时间选择器

    热门讨论 2014-08-06 16:06:30
    一个js日期时间选择器,支持精确到毫秒的时间选择 http://blog.csdn.net/yanwushu/article/details/38401749 效果预览 http://www.helloweba.com/demo/timepicker/
  • Android自定义PopupWindow日历 日期时间选择器 可自由搭配年月日时分显示,可以设置只显示年月日,不显示时分等,
  • Android日期时间选择器

    千次阅读 2020-07-20 15:31:36
    一,build.gradle 引用 ... 二,layout布局文件 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="请选择日期时间" android:id="@+id/dat

    一,build.gradle 引用

    implementation "com.contrarywind:Android-PickerView:3.2.7"

    二,layout布局文件

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="请选择日期时间"
            android:id="@+id/data_time_tv"></TextView>

    三,Activity中代码

    
    
        TimePickerView pvTime;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_home);
    
            //日期时间控件
            TextView data_time_tv = findViewById(R.id.data_time_tv);
            data_time_tv .setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //点击组件的点击事件
                    pvTime.show(data_time_tv);
                }
            });
            //控制时间范围(如果不设置范围,则使用默认时间1900-2100年,此段代码可注释)
            //因为系统Calendar的月份是从0-11的,所以如果是调用Calendar的set方法来设置时间,月份的范围也要是从0-11
            Calendar selectedDate = Calendar.getInstance();
            Calendar startDate = Calendar.getInstance();
            startDate.set(2020, 0, 1);
            Calendar endDate = Calendar.getInstance();
            endDate.set(2040, 11, 31);
            //时间选择器
            pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
                @Override
                public void onTimeSelect(Date date, View v) {//选中事件回调
                    // 这里回调的v,就是show()方法里面所添加的 View 参数,如果show的时候没有添加参数,v则为null
                    TextView tv = (TextView) v;
                    tv.setText(getTimes(date));
                }
            })
                    //年月日时分秒的显示与否,不设置则默认全部显示,这里可自行定制
                    .setType(new boolean[]{true, true, true, true, true, false})
                    .setLabel(" 年", "月", "日", "时", "分", "")
                    .isCenterLabel(true)
                    .setDividerColor(Color.DKGRAY)
                    .setContentSize(20)
                    .setDate(selectedDate)
                    .setRangDate(startDate, endDate)
                    .setDecorView(null)
                    .build();
        }
        private String getTimes(Date date) {//可根据需要自行格式化数据显示
            SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            return format.format(date);
        }

    效果图展示,使用这个可以单独展示日期、单独展示时间。也可以都展示,按需吧。

    展开全文
  • vue 日期时间选择器 Vue日期时间选择器 (Vue Datetime picker) Vue Datetime picker BY Vladyslav Shchepotin. Vue日期时间选择器Vladyslav Shchepotin。 View demo 查看演示 Download Source 下载源 要求 ...

    vue 日期时间选择器

    Vue日期时间选择器 (Vue Datetime picker)

    Vue Datetime picker BY Vladyslav Shchepotin.

    Vue日期时间选择器Vladyslav Shchepotin。

    要求 (Requirements)

    • Vue.js ^2.5.17

      Vue.js ^2.5.17

    用法 (Usage)

    npm install vue-vanilla-datetime-picker --save
    import DateTimePicker from 'vue-vanilla-datetime-picker';
    
    Vue.component('date-time-picker', DateTimePicker);
    @import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"

    道具: (Props:)

    NameRequiredTypeDefaultDescription
    v-model, value*String, Date, DateTime (luxon)Value
    value-formatStringyyyy-LL-dd HH:mm:ssValue format
    max-dateString, Date, DateTime (luxon)nullMax date
    min-dateString, Date, DateTime (luxon)nullMin date
    constraints-formatStringyyyy-LL-ddConstraints format
    localeStringenSet locale.
    inlineBooleanfalseEnable inline mode.
    disabledBooleanfalseDisable datetime picker.
    formatStringyyyy-LL-dd HH:mmDisplay format.
    time-pickerBooleantrueShow time picker.
    hour-timeNumber24Hour in 12/24-hour time. Values: '12', '24'.
    no-toggle-time-pickerBooleanfalseNo toggle time picker button.
    only-time-pickerBooleanfalseShow only time picker.
    start-from-sundayBooleanfalseSet Sunday as first day of week.
    minute-stepNumber1Set step for minute.
    seconds-pickerBooleanfalseShow second picker.
    initial-viewStringdaysInitial view: 'days', 'months', 'years'
    main-button-classStringClass for main button.
    disabled-datesArray[]Array of disabled dates.
    highlightedArray[]Array of highlighted dates. Example: [{ date: '2018-09-17', class: 'highlighted' }]
    auto-closeBooleanfalseClose date picker after select date.
    clear-buttonBooleanfalseShow "Clear" button.
    close-buttonBooleanfalseShow "Close" button.
    today-buttonBooleanfalseShow "Today" button.
    value-typeStringAutoSet value type. Types: 'Auto', 'String', 'Date', 'Luxon'.
    empty-valueAny''Set empty value for clear button.
    名称 需要 类型 默认 描述
    v型,价值 * 字符串,日期,日期时间(勒克斯)
    值格式 yyyy-LL-dd HH:mm:ss 格式
    最大日期 字符串,日期,日期时间(勒克斯) 空值 最长日期
    最小日期 字符串,日期,日期时间(勒克斯) 空值 最小日期
    约束格式 yyyy-LL-dd 约束格式
    地区 设置语言环境
    排队 布尔型 启用串联模式。
    残障人士 布尔型 禁用日期时间选择器。
    格式 yyyy-LL-dd HH:mm 显示格式
    时间选择器 布尔型 真正 显示时间选择器。
    小时时间 24 12/24小时制的小时。 值:“ 12”,“ 24”。
    无切换时间选择器 布尔型 没有切换时间选择器按钮。
    只能选择时间 布尔型 仅显示时间选择器。
    从星期日开始 布尔型 将星期日设置为一周的第一天。
    分钟步 1个 将步骤设置为分钟。
    秒选 布尔型 显示第二个选择器。
    初步观点 初始视图:“天”,“月”,“年”
    主按钮类 主按钮的类。
    禁用日期 数组 [] 禁用日期的数组。
    突出显示 数组 [] 突出显示日期的数组。 示例:[{date:'2018-09-17',class:'highlighted'}]
    自动关闭 布尔型 选择日期后关闭日期选择器。
    清除按钮 布尔型 显示“清除”按钮。
    关闭按钮 布尔型 显示“关闭”按钮。
    今天按钮 布尔型 显示“今天”按钮。
    值类型 汽车 设定值类型。 类型:“自动”,“字符串”,“日期”,“ Luxon”。
    空值 任何 '' 设置清除按钮的空值。

    插槽: (Slots:)

    NameDescription
    choose-dateFor main button if date not selected.
    formatted-datetimeFor main button if date selected.
    dateFor date button.
    timeFor time button.
    months-prevFor previous month button.
    months-nextFor next month button.
    years-prevFor previous year button.
    years-nextFor next year button.
    decades-prevFor previous decade button.
    decades-prevFor next decade button.
    hours-upFor hours up button.
    hours-downFor hours down button.
    minutes-upFor minutes up button.
    minutes-downFor minutes down button.
    seconds-upFor seconds up button.
    seconds-downFor seconds down button.
    meridiems-upFor meridiems up button.
    meridiems-downFor meridiems down button.
    clearFor clear button.
    closeFor close button.
    todayFor today button.
    名称 描述
    选择日期 对于主按钮(如果未选择日期)。
    格式化日期时间 对于主按钮(如果选择了日期)。
    日期 对于日期按钮。
    时间 对于时间按钮。
    上个月 对于上个月的按钮。
    下个月 对于下个月按钮。
    前几年 对于上一年按钮。
    接下来的几年 对于明年按钮。
    几十年前 对于前十年的按钮。
    几十年前 对于下一个十年按钮。
    小时以上 数小时向上按钮。
    数小时下来 对于小时下降按钮。
    分钟以上 对于分钟向上按钮。
    分钟下来 按下分钟按钮。
    秒上升 秒钟增加按钮。
    秒秒 按下秒数按钮。
    子午线 对于子午线向上按钮。
    子午线 对于子午线向下按钮。
    明确 对于清除按钮。
    用于关闭按钮。
    今天 对于今天按钮。

    大事记: (Events:)

    Name
    close
    open
    名称
    打开

    发展历程 (Development)

    npm install

    编译和热重装以进行开发 (Compiles and hot-reloads for development)

    npm run serve

    编译并最小化生产 (Compiles and minifies for production)

    npm run build-lib

    整理和修复文件 (Lints and fixes files)

    npm run lint

    翻译自: https://vuejsexamples.com/vue-datetime-picker/

    vue 日期时间选择器

    展开全文
  • element-ui 日期时间选择器限制日期以及时间范围.实现效果:实现方式:业务背景:日期:只能选择今天以后的日期(包含今天),时间:只能选择当前日期时间一小时以后的时间.实现效果: 实现方式:1、使用参数 element-ui 控件...

    element-ui 日期时间选择器限制日期以及时间范围.

    实现效果:

    实现方式:

    业务背景:

    日期:只能选择今天以后的日期(包含今天),

    时间:只能选择当前日期时间一小时以后的时间.

    实现效果:

    实现方式:

    1、使用参数 element-ui 控件方法 picker-options

    disabledDate :控制只能选择今天及以后的日期

    selectableRange :控制选择的时间段。如果是今天,则时间从此刻开始,否则从0时开始

    日期格式转换 我再filters里做的,这个随意,也可以自己写方法:

    filters: {

    sendTimeDate: function (date) {

    if (!!date) {

    var nowDate =

    new Date(date).getFullYear() +

    '-' +

    (new Date(date).getMonth() + 1 < 10 ? '0' + (new Date(date).getMonth() + 1) : new Date(date).getMonth() + 1) +

    '-' +

    (new Date(date).getDate(date) < 10 ? '0' + new Date(date).getDate(date) : new Date(date).getDate(date));

    var nowTime =

    (new Date(d

    展开全文
  • Vue日期时间选择器组件

    万次阅读 2020-04-28 11:32:16
    这里写自定义目录标题1....日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": th...
  • 需要element的DateTimePicker 日期时间选择器 部分代码如下: <el-form-item label="出发时间:" prop="startTime"> <el-date-picker v-model="editForm.startTime" :picker-options="pickerOptions"/...
  • Vue.js组件库Element中的TimePicker 时间选择器,DatePicker 日期选择器,DateTimePicker 日期时间选择器和ColorPicker 颜色选择器。
  • vue日期时间选择组件 Vue日期时间选择器 (Vue Datetime Picker) Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-...
  • 小程序日期时间选择器

    千次阅读 2020-10-21 13:47:14
    类型有普通选择器 、 多列选择器 、 时间选择器日期选择器 、 省市区选择器。 没有现成的时间和日期合并在一起的,从demo里面可以看到 可以用多列选择器来实现。 wxml <picker mode="multiSelector" ...
  • elementui 使用日期时间选择器 限制开始结束日期时间 效果图 (开始时间大于当前日期 小于结束时间 结束时间大于开始时间 未选择开始时间时默认大于当前日期) 注:8.64e7为一天的毫秒数 代码 <el-date-picker ...
  • 需求:预计进场时间,精确到秒; 实现方法: wxml: <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" range="{{dateTimeArray}}"> <view class="selectDate tui-picker-...
  • vue2 + elementui 日期时间选择器 禁止选择当前时间之前的日期及时间,并添加相应校验规则
  • 日期时间选择器部分 DateTimePicker <template> <el-form-item> <el-date-picker v-model="search_data.startTime" type="datetimerange"> </el-date-picker> -- <el-...
  • GetDateStr(AddDayCount) { ...//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期,不足10补0 var d = dd..
  • 效果如图: 仓库地址
  • vue日期选择器 移动端 约会时间 (vue-datetime) Mobile friendly datetime picker for Vue.... Vue的移动友好日期时间选择器。 支持日期,日期时间和时间模式,i18n和禁用日期。 NOTICE: This RE...
  • 1.DateTimePicker 日期时间选择器 默认时间格式 Fri Jan 15 2021 00:00:00 GMT+0800 (中国标准时间 2.设置时间格式 yyyy-MM-dd HH:mm value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm
  • 微信小程序-日期时间选择器

    万次阅读 2019-01-20 15:36:04
    我在官方表单组件的基础上改出了几种比较常用的日期时间选择器,为了更清晰,我没给任何样式,wxss可根据个人喜好添加。 一、picker-view (嵌入页面的滚动选择器) 注意:其中只可放置组件,其他节点不会显示 ...
  • Jquery-WeUI日期选择控件只能限制日期,对于时间部分的限制方法不明确,此博客主要研究时间部分的限制(时,分,秒,时-分分隔符,分-秒分隔符) 通过查看jquery-weui.js的源码:...
  • uniapp日期时间选择器的实现

    万次阅读 热门讨论 2020-11-04 16:21:13
    //引入事先声明的类 const dateTimePicker = require('@/util/dateTimePicker.js') export default { data() { return { // 时间选择器 dateTimeArray: null, dateTime: null, startYear: 2000...
  • Android仿iPhone的日期时间选择器

    热门讨论 2014-07-18 17:09:08
    Android仿iPhone的日期时间选择器,超炫超酷!
  • 在vue里面,我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了,现在需要用到一个可以同时选择年月日时分秒的插件,饿了么的文档里面就有现成可以使用的~~ 在同一个选择器里选择日期和时间 ...
  • element ui日期时间选择器取消秒

    千次阅读 2021-04-06 14:59:06
    #日期时间选择器隐藏秒的选项 只需要把展示样式格式改为 format=“yyyy-MM-dd HH:mm” 即可, 如果想把传递给后台的值也去掉秒则加上 value-format=“yyyy-MM-dd HH:mm” 即可 <el-date-picker v-model="logForm...
  • 日期时间选择器 <el-date-picker v-model="value2" type="datetime" @change="choose" :picker-options="pickerOptions" placeholder="请选择开始时间"> </el-date-picker> 在 data 中定义一个 ...
  • iView 日期时间选择器设置开始时间至结束时间限制 开始时间不能大于结束时间 结束时间不能小于开始时间 <DatePicker type="datetime" :options="startOption" v-model="startTime" placeholder="开始...
  • 需求:可选择时间大于当前时间,不符合条件的全部禁用 以下实现方式可精确到年、月、日、时、分、秒 HTML <el-form-item label="盘点开始时间" prop="checkStartTime"> <el-date-picker type="datetime" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 217,245
精华内容 86,898
关键字:

日期时间选择器

友情链接: AstronomicalAlgorithms.zip