65.9K
CodeProject 正在变化。 阅读更多。
Home

Bootstrap 波斯日期时间选择器

Mohammad Dayyan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.96/5 (51投票s)

2014年12月30日

CPOL

2分钟阅读

viewsIcon

396459

downloadIcon

18969

MdPersianDateTime 是一个 jQuery 插件，用于创建带有 bootstrap 弹出框的波斯日期时间选择器

本文已移至 https://github.com/Mds92/MD.BootstrapPersianDateTimePicker，要下载新版本，请参阅该链接。

引言

如果您正在寻找一个带有 bootstrap 的 jQuery 插件 Persian DateTimePicker，那么 MdPersianDateTime 就是您需要的。
该插件使用 bootstrap popover 来显示波斯语 DateTimePicker。 因此它具有 bootstrap popover 的灵活性。

特点

  • 可以使用 JavaScript 代码或 HTML 标签属性来运行。
  • 更改位置，如 bootstrap 的 popover
  • 使用目标选择器在元素上显示 DateTimePicker 并更改另一个元素的值
  • 能够在 DateTimePicker 和 DatePicker 之间切换，您可以禁用 TimePicker
  • 起始日期，结束日期 筛选。

使用代码

通过 nuget 安装此库

Install-Package MD.BootstrapPersianDateTimePicker

首先，将引用添加到您的 html 文件中
标签的顺序很重要

<head>
	<meta charset="utf-8" />	
	<link rel="stylesheet" href="bootstrap.min.css" />
	<link rel="stylesheet" href="bootstrap-theme.min.css" />
	<link rel="stylesheet" href="jquery.Bootstrap-PersianDateTimePicker.css" />

    <script type="text/javascript" src="jquery-2.1.1.js"> </script>
    <script type="text/javascript" src="bootstrap.min.js"> </script>	
</head>
.
.
.
<body>

	<script src="calendar.js" type="text/javascript"></script>
    <script src="jquery.Bootstrap-PersianDateTimePicker.js" type="text/javascript"></script>
</body>

有两种方法可以使用 MdPersianDateTime

1. 使用 JavaScript 和 jQuery 作为另一个 jQuery 插件

您可以为此方法使用以下设置（您可以省略它们，插件将使用默认值）。

  • Placement string 确定 popover 的位置。 它与 bootstrap 的 popover 位置相同。 因此，它可以是 'bottom'、'right'、'left'、'top'
  • Trigger string 确定 bootstrap popover 的触发器以显示 DateTimePicker。 例如 'focus'、'click'、'mouseover' 等。
  • EnableTimePicker boolean 在 html 元素的 DateTimePicker 上启用 TimePicker。 默认为 true
  • TargetSelector string 确定要将 DateTime 字符串写入其中的元素的 jQuery 选择器。
  • GroupId string 确定 FromDate, ToDate 筛选中的组名。 如果您想使用过滤器，则必须使用此属性
  • ToDate boolean 确定 html 标签作为 ToDate 过滤器。
  • FromDate boolean 确定 html 标签作为 FromDate 过滤器

示例

 

<script type="text/javascript">
    $('#textBoxInputId').MdPersianDateTimePicker({
        Placement: 'bottom', // default is 'bottom'
        Trigger: 'focus', // default is 'focus',
	EnableTimePicker: true, // default is true,
	TargetSelector: '', // default is empty,
	GroupId: '', // default is empty,
	ToDate: false, // default is false,
	FromDate: false, // default is false,
    });
</script>

2. 使用 html 标签属性。

在这种方法中，您可以使用以下属性确定设置

data-DateTimePicker="true"
data-Placement="bottom"
data-Trigger="focus"
data-EnableTimePicker="true"
data-TargetSelector="#fromDate1"
data-GroupId="group1"
data-ToDate="true"
data-FromDate="true"

示例

<button class="btn btn-default" data-MdDateTimePicker="true" data-TargetSelector="#input1" data-EnableTimePicker="true" data-Placement="left" data-Trigger="click">انتخاب تاریخ</button>

转换为 .NET DateTime

如果您打算在 .Net 中使用此 DateTimePicker 解析生成的 DateTime 字符串并将其转换为 DateTime，您可以轻松地使用以下库。

 C# 中的波斯日历(PersianDateTime)

历史

  • 2014 年 12 月 30 日：首次发布
  • 2014 年 12 月 31 日：添加了年份下拉菜单和月份下拉菜单。
  • 2015 年 1 月 4 日：修复了日期范围内的错误
  • 2015 年 6 月 10 日：修复了显示日期的错误
  • 2015 年 6 月 22 日：修复了显示日期的错误
  • 2015 年 9 月 7 日：修复了更改文本框事件的错误
  • 2015 年 10 月 11 日：修复了一些错误并添加了一些功能，并将 源代码移动到 github
© . All rights reserved.