Bootstrap波斯/格里高利日期时间选择器

Posted 2023-05-11

中文标题：Bootstrap波斯/格里高利日期时间选择器

原文标题：Bootstrap Persian/Gregorian Date Time Picker

项目评级：Star:314      Fork:105

下载地址：https://github.com/Mds92/MD.BootstrapPersianDateTimePicker

详情介绍

MD.Bootstrap永久日期时间选择器

Bootstrap 5+波斯和格里高利日期时间选择器

主要变化：

演示

注意：

Bootstrap 3版本https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs3

Bootstrap 4版本https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs4

正在安装：

首先，您必须安装Bootstrap 5并将其链接到您的html文件。

然后您可以通过npm安装库的最新版本：

npm安装md.bootstrappersiandatetimepicker@latest

现在将这些文件添加到html中：

注意：

此库css文件必须位于引导程序css文件之后

我建议在body标签的末尾和bootstrapjs文件之后添加脚本。

如何使用：

选项：

默认值为[ ]

<表格>

名称

值

描述

样本

安置

顶部、右侧、[底部]、左侧

日期时间选择器的位置

触发器

[点击]，鼠标向下，聚焦

显示日期时间选择器的事件

启用时间选择器

[假]，真

时间选择器可见性

目标文本选择器

字符串

CSS选择器将所选日期显示为format属性

'#TextBoxId'

目标日期选择器

字符串

CSS选择器，用于将所选日期保存到其中

'#InputHiddenId'

截止日期

[假]，真

当您想将日期选择器设置为toDate以启用日期范围选择时

起始日期

[假]，真

当您想将日期选择器设置为fromDate以启用日期范围选择时

组ID

字符串

当您想使用toDate、fromDate时，您必须输入一个组id来指定日期时间选择器

'日期范围选择器1'

残疾人

[假]，真

禁用日期时间选择器

text格式

字符串

所选日期的格式显示为targetTextSelector

'年/月/日HH:MM:ss'

日期格式

字符串

要保存到targetDateSelector的所选日期的格式

'年/月/日HH:MM:ss'

是格里高利

[假]，真

是公历吗

在线

[假]，真

日期时间选择器是否在行中

模式模式

[假]，真

以模式模式打开，适用于智能手机

选定日期

【未定义】，日期

选择日期作为JavaScript date对象

新日期（'2018/9/30'）

选择要显示的日期

[新日期（）]，日期

选择日期作为JavaScript date对象从中开始日历

新日期（'2018/9/30'）

选定范围日期

数组：日期[]

选择范围日期作为JavaScript date对象

[新日期（'2020/8/5'），新日期（'2020/8/15'）]

年份偏移

编号

要在年份选择器中选择的年份数

30个

假日

数组：日期[]

要在日期时间选择器中显示为假日的假日数组

[新日期（），新日期（2017，3，2）]

禁用日期

数组：日期[]

禁止用户选择的禁用日期数组

[新日期（2017，1，1），新日期（2017,1，2）]

特殊日期

数组：日期[]

日期数组，用于将某些日期标记为特殊日期

[新日期（2017年2月1日），新日期（17年3月2日）]

禁用天数

数组：数字[]

禁止用户选择的禁用周天数数组

禁用波斯语中的所有“星期四”、“星期五”[5，6]

今天之前禁用

[假]，真

禁用今天之前的天

今天之后禁用

[假]，真

禁用今天之后的天数

禁用提前日期

日期

禁用此日期之前的天数

新日期（2018年11月12日）

禁用AfterDate

日期

禁用此日期之后的天数

新日期（2018年12月11日）

范围选择器

[假]，真

在日期时间选择器上启用范围选择器功能

月展示

包含2项的数值数组，[0，0]

要显示日期时间选择器中所选日期之前和之后的月数，第一项用于月前，第二项用于月后

[1，1]

波斯数字

[假]，真

将数字转换为波斯字符

d>

日历更改时查看（日期）

函数

日期选择器视图更改时触发事件

onDayClick（事件）

函数

单击当天单元格时触发事件

字符串格式：

<表格>

格式

英文描述

波斯语描述

年

年份，4位数字

الچهارق㺅ی

年

年份，2位数字

الدورقمی

毫米

月份名称

نام

毫米

月份，2位数字

عددورقمیراه

米

月份，1位

رقمی㺅اه

地址（dddd）

星期天名称

نامرودهف

日

年月日，2位数字

简体中文

天

年月日，1位

简体中文

小时

小时，2位数字-0-24

رقمیاعبافر

小时

小时，1位-0-24

رقمیاعبافر

小时

小时，2位数字-0-12

رقمیاعبافر

小时

小时，1位-0-12

رقمیاعبافر

毫米

分钟，2位数字

简体中文

米

分钟，1位

简体中文

不锈钢

第二，2位数字

ثانیه

秒

第二，1位

ثانیه

tt公司

上午/下午

ب.ظیاق

吨

不适用

حرفاولاب

功能：

<表格>

名称

返回值

描述

样本

表演

无效

显示日期选择器

dtp1实例.show（）

隐藏

无效

隐藏日期选择器

dtp1实例.hide（）

拨动

无效

显示或隐藏日期选择器

dtp1实例.toggles（）

启用

无效

启用日期选择器

dtp1实例.enable（）

禁用

无效

禁用日期选择器

dtp1实例.disable（）

更新位置

无效

更新日期选择器的位置

dtp1实例.updatePosition（）

更新选定日期文本

无效

更新targetTextSelector文本

dtp1实例.updateSelectedDateText（）

处置

无效

处理日期选择器

dtp1实例.dispose（）

获取BsPoverInstance

引导程序。Popover

返回引导popover的实例

const bsPopover=dtp1Instance.getBsPopoverInstance（）

获取BsMode实例

引导程序。模态

引导模式的返回实例

const bsModal=dtp1Instance.getBsModelInstance（）

更新选项

无效

更新日期选择器的一个选项

dtp1Instance.updateOption（'isGregory'，false）

更新选项

无效

更新日期选择器的一个选项

dtp1Instance.updateOptions（｛isGregory:false，inLine:false，…｝）

获取实例

马里兰州日期时间选择器

静态方法，通过元素obj获取MdsDatePicker的实例

const jalaliObj=mds.MdsPersianDateTimePicker.getInstance（document.getELementById（'IdOfElement'））

获取文本

字符串

获取所选日期文本

const txt=dtp1Instance.getText（）

获取日期

日期

获取所选日期

const dateObj=dtp1Instance.getDate（）

获取日期范围

[fromDate，toDate]：日期[]

获取所选日期范围

dtp1Instance.getDateRange（）

设置日期

无效

使用Date对象参数设置选定的日期时间

dtp1Instance.setDate（新日期（'2021/09/22'））

设置日期波斯语

无效

使用Date对象参数设置选定的日期时间

dtp1Instance.setDatePersian（1400、06、31）

设置日期范围

无效

使用Date对象参数设置选定的日期时间范围

dtp1Instance.setDateRange（新日期（'2021/09/04'），新日期（'2021/09/22'））

清除日期

无效

清除选定日期

dtp1实例.clearDate（）

将日期转换为字符串

字符串

效用&；静态方法，将日期对象转换为字符串

const dateStr=mds.MdsPersianDateTimePicker.convertDateToString（日期：new date（），isGregory:false，格式：'yyyy/MM/dd'）

将日期转换为Jalali

时间>

json语言

效用&；静态方法，将日期对象转换为Jalali

const jalaliObj=mds.MdsPersianDateTimePicker.convertDateToJalali（新日期（））

事件：

MD.BootstrapPersianDateTimePicker使用Bootstrap的popover和modals。因此您可以使用popover或modal事件。

https://getbootstrap.com/docs/5.1/components/popovers/#events

https://getbootstrap.com/docs/5.1/components/modal/#events

后端：

如果你在后台使用.net，我建议你https://github.com/Mds92/MD.PersianDateTime处理PersianDateTime就像处理DateTime一样简单。

Xamarin 波斯语日期选择器

如何同时使用2种语言的datepicker

Mysql 根据出生日期计算年龄

CSP2020 儒略日 题解

我的 Bootstrap-4 日期时间选择器无法在 Internet Explorer 上运行？是不是有任何适用于 Bootstrap 4.0 的日期时间选择器？

Bootstrap 时间和日期选择器设置最小日期