Skip to content

Commit

Permalink
some progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mds92
Mds92 committed Aug 22, 2018
1 parent 9cfcaa4 commit 2bdf50f
Show file tree
Hide file tree
Showing 14 changed files with 574 additions and 42 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Expand Up @@ -160,6 +160,7 @@ ClientBin/
*.pfx
*.publishsettings
node_modules/
package-lock.json

# RIA/Silverlight projects
Generated_Code/
Expand Down
1 change: 0 additions & 1 deletion dist/example-plugin.d.ts
View file

This file was deleted.

9 changes: 0 additions & 9 deletions dist/example-plugin.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/example-plugin.js.map
View file

This file was deleted.

3 changes: 0 additions & 3 deletions dist/example-service.d.ts
View file

This file was deleted.

6 changes: 0 additions & 6 deletions dist/example-service.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/example-service.js.map
View file

This file was deleted.

3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -17,7 +17,8 @@
"homepage": "https://github.com/Mds92/MD.BootstrapPersianDateTimePicker",
"dependencies": {
"bootstrap": "^4.1.3",
"jquery": "^3.3.1"
"jquery": "^3.3.1",
"popper.js": "^1.14.4"
},
"devDependencies": {
"@types/jquery": "^3.3.6",
Expand Down
5 changes: 5 additions & 0 deletions src/demo.css
View file
@@ -0,0 +1,5 @@
body,
table {
font-family: 'Segoe UI', Tahoma;
font-size: 14px;
}
174 changes: 174 additions & 0 deletions src/demo1.html
View file
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Persian DateTime</title>

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="jquery.Bootstrap-PersianDateTimePicker.css" />

<script src="../node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="../node_modules/popper.js/dist/umd/popper.min.js" type="text/javascript"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>

<div class="mds-bootstrap-persian-datetime-picker-container rtl">
<table class="table table-sm table-striped text-center">
<thead>
<tr>
<th colspan="100">چهارشنبه، 31 مرداد 1397</th>
</tr>
<tr>
<th colspan="100">
<table class="table table-sm">
<thead>
<tr>
<th>
<button class="btn btn-light btn-sm"> &lt;&lt; </button>
</th>
<th>
<button class="btn btn-light btn-sm"> &lt; </button>
</th>
<th colspan="3">
<div class="dropdown">
<button class="btn btn-light btn-sm dropdown-toggle" type="button" id="mdsBootstrapPersianDatetimePickerMonthSelectorButon"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
اردیبهشت
</button>
<div class="dropdown-menu" aria-labelledby="mdsBootstrapPersianDatetimePickerMonthSelectorButon">
<a class="dropdown-item">فروردین</a>
<a class="dropdown-item">اردیبهشت</a>
<a class="dropdown-item">خرداد</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">تیر</a>
<a class="dropdown-item">مرداد</a>
<a class="dropdown-item">شهریور</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">مهر</a>
<a class="dropdown-item">آبان</a>
<a class="dropdown-item">آذر</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">دی</a>
<a class="dropdown-item">بهمن</a>
<a class="dropdown-item">اسفند</a>
</div>
</div>
</th>
<th>
<button class="btn btn-light btn-sm"> &gt; </button>
</th>
<th>
<button class="btn btn-light btn-sm"> &gt;&gt; </button>
</th>
</tr>
</thead>
</table>
</th>
</tr>
</thead>
<tbody class="days">
<tr>
<td>ش</td>
<td>ی</td>
<td>د</td>
<td>س</td>
<td>چ</td>
<td>پ</td>
<td class="text-danger">ج</td>
</tr>
<tr>
<td data-day>1</td>
<td data-day>2</td>
<td data-day>3</td>
<td data-day>4</td>
<td data-day>5</td>
<td data-day>6</td>
<td data-day class="text-danger">7</td>
</tr>
<tr>
<td data-day>8</td>
<td data-day>9</td>
<td data-day>10</td>
<td data-day>11</td>
<td data-day>12</td>
<td data-day>13</td>
<td data-day class="text-danger">14</td>
</tr>
<tr>
<td data-day>15</td>
<td data-day>16</td>
<td data-day>17</td>
<td data-day>18</td>
<td data-day>19</td>
<td data-day>20</td>
<td data-day class="text-danger">21</td>
</tr>
<tr>
<td data-day>22</td>
<td data-day>23</td>
<td data-day>24</td>
<td data-day>25</td>
<td data-day>26</td>
<td data-day>27</td>
<td data-day class="text-danger">28</td>
</tr>
<tr>
<td data-day>29</td>
<td data-day>30</td>
<td data-day>31</td>
<td data-pm>1</td>
<td data-pm>2</td>
<td data-pm>3</td>
<td data-pm class="text-danger">4</td>
</tr>
<tr>
<td data-pm>5</td>
<td data-pm>6</td>
<td data-pm>7</td>
<td data-pm>8</td>
<td data-pm>9</td>
<td data-pm>10</td>
<td data-pm class="text-danger">11</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="100">
<table class="table">
<tbody>
<tr>
<td>
<input type="text" value="00" title="ساعت" />
</td>
<td>:</td>
<td>
<input type="text" value="00" title="دقیقه" />
</td>
<td>:</td>
<td>
<input type="text" value="00" title="ثانیه" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="100">
<button class="btn btn-light" title="برو به امروز">امروز، 31 مرداد 1397</button>
</td>
</tr>
</tfoot>
</table>
</div>


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

</html>
15 changes: 0 additions & 15 deletions src/example-plugin.ts
View file

This file was deleted.

5 changes: 0 additions & 5 deletions src/example-service.ts
View file

This file was deleted.

112 changes: 112 additions & 0 deletions src/jquery.Bootstrap-PersianDateTimePicker.css
View file
@@ -0,0 +1,112 @@
.mds-bootstrap-persian-datetime-picker-container {
max-width: 300px;
font-size: 12px;
position: relative;
overflow: visible;
z-index: 99999999;
}

.mds-bootstrap-persian-datetime-picker-container.rtl {
direction: rtl;
}

.mds-bootstrap-persian-datetime-picker-container.rtl table {
direction: rtl;
}

.mds-bootstrap-persian-datetime-picker-container.rtl table tfoot table {
direction: ltr;
}

.mds-bootstrap-persian-datetime-picker-container.rtl .dropdown-toggle::after {
margin-left: 0;
margin-right: 0.255em;
}

.mds-bootstrap-persian-datetime-picker-container * {
font-size: 12px;
}

.mds-bootstrap-persian-datetime-picker-container table th,
.mds-bootstrap-persian-datetime-picker-container table td {
padding: 1px;
text-align: center;
}

.mds-bootstrap-persian-datetime-picker-container table table {
margin-bottom: 0;
}

.mds-bootstrap-persian-datetime-picker-container table table th {
border: none;
}

.mds-bootstrap-persian-datetime-picker-container table table input[type="text"] {
width: 50px;
border: none;
text-align: center;
}

.mds-bootstrap-persian-datetime-picker-container th {
padding: 0;
}

.mds-bootstrap-persian-datetime-picker-container tbody.days td[data-day] {
cursor: pointer;
transition: all 200ms ease;
}

.mds-bootstrap-persian-datetime-picker-container tbody.days td[data-day]:hover {
background: #ccc;
}

.mds-bootstrap-persian-datetime-picker-container tbody.days td[data-pm] {
cursor: default;
opacity: 0.2;
transition: none;
}
.mds-bootstrap-persian-datetime-picker-container tbody.days td[data-pm]:hover {
cursor: default;
opacity: 0.3;
transition: none;
}

.mds-bootstrap-persian-datetime-picker-container>table>tbody>tr:first-child>td {
vertical-align: top;
padding-bottom: 5px;
font-weight: bold;
width: 14.2%;
cursor: default;
}
.mds-bootstrap-persian-datetime-picker-container>table>tbody>tr:first-child>td:hover {
background: none;
}

.mds-bootstrap-persian-datetime-picker-container .btn {
width: 100%;
margin-bottom: 1px;
padding: 1px;
}

.mds-bootstrap-persian-datetime-picker-container .dropdown {
padding: 0;
padding-bottom: 1px;
cursor: pointer;
text-align: center;
}

.mds-bootstrap-persian-datetime-picker-container .dropdown-menu {
min-width: 100px;
width: 100px;
}

.mds-bootstrap-persian-datetime-picker-container .dropdown-item {
padding: 0;
padding-bottom: 1px;
cursor: pointer;
text-align: center;
}

.mds-bootstrap-persian-datetime-picker-container .dropdown-divider {
margin-bottom: 1px;
}

0 comments on commit 2bdf50f

Please sign in to comment.