آپدیت

ghaninia · Jan 16, 2020 · 4abb87d · 4abb87d
1 parent 6fff60e
commit 4abb87d
Show file tree

Hide file tree

Showing 4 changed files with 3,799 additions and 0 deletions.
diff --git a/css/persian-selector.css b/css/persian-selector.css
@@ -0,0 +1,210 @@
+.date-select {
+	position: absolute;
+}
+
+.date-select .popup {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 302px;
+	height: 141px;
+	z-index: 15;
+	background: #FFF;
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+	box-shadow : 0 5px 10px rgba(0,0,0,.1) ;
+	border-radius: 10px ;
+	overflow: hidden;
+}
+
+.date-select .tip {
+
+	position: absolute;
+	left: 12px;
+	top: -12px;
+	z-index: 5;
+	width: 0;
+	height: 0;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-bottom: 12px solid #CCC;
+}
+
+.date-select .tip:before {
+
+	content: ' ';
+	position: absolute;
+	left: -8px;
+	top: 2px;
+	z-index: 20;
+	width: 0;
+	height: 0;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	border-bottom: 10px solid #FFF;
+}
+
+.date-select .select {
+	transition : all .1s ease ;
+	width: 100px;
+	height: 100px;
+	float: left;
+	margin-right: 1px;
+	color: #222;
+	position: relative;
+	cursor: default;
+}
+
+.date-select .select.year {
+
+	margin-right: 0;
+}
+
+.date-select .select > div {
+
+	position: absolute;
+	left: 0;
+	top: 20px;
+	text-align: center;
+	width: 100%;
+}
+
+.date-select .select span {
+
+	display: block;
+	margin: 0 10px 0;
+}
+
+.date-select .select span.num {
+
+	font-size: 34px;
+	color: #555;
+	line-height: 45px;
+}
+
+.date-select .select span.text {
+
+	font-size: 12px;
+	text-transform: uppercase;
+	line-height: 15px;
+}
+
+.date-select .select:hover {
+
+	background: #1196CE;
+	color: #FFF;
+}
+
+.date-select .select:hover span {
+
+	color: #FFF;
+}
+
+.date-select .select a.btn-arrow {
+
+	position: absolute;
+}
+
+.date-select .select a.btn-arrow.btn-up {
+
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 20px;
+}
+
+.date-select .select a.btn-arrow.btn-down {
+
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 20px;
+}
+
+.date-select .select .icon {
+
+	display: block;
+	margin: 7px auto;
+	width: 0;
+	height: 0;
+	/* transition */
+	-webkit-transition: opacity 0.3s;
+	-moz-transition: opacity 0.3s;
+	-ms-transition: opacity 0.3s;
+	-o-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+	/* opacity */
+	filter: alpha(opacity=0);
+	opacity: 0;
+}
+
+.date-select .select .icon.icon-up {
+
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 6px solid #87CAE6;
+}
+
+.date-select .select .icon.icon-down {
+
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 6px solid #87CAE6;
+}
+
+.date-select .select:hover .icon {
+
+	/* opacity */
+	filter: alpha(opacity=100);
+	opacity: 1;
+}
+
+.date-select .select a.btn-arrow:hover .icon.icon-up {
+
+	border-bottom-color: #FFF;
+}
+
+.date-select .select a.btn-arrow:hover .icon.icon-down {
+
+	border-top-color: #FFF;
+}
+
+.date-select .buttons {
+	margin: 101px auto 0;
+	width: 302px;
+	border-top : 1px rgba(0,0,0,.05) solid  ;
+}
+
+.date-select .buttons a {
+	transition : all .3s ease ;
+	display: block;
+	width: 151px;
+	height: 40px;
+	color: #343434;
+	text-align: center;
+	line-height: 40px;
+	font-size: 18px;
+	float: left;
+}
+
+.date-select .buttons a:hover {
+
+	color: #FFF;
+}
+
+.date-select .buttons a.btn-ok {
+
+	width: 150px;
+	margin-left: 1px;
+}
+
+.date-select .buttons a.btn-ok:hover {
+
+	background: #69B22C;
+}
+
+.date-select .buttons a.btn-cancel:hover {
+
+	background: #D95005;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="fa">
+<head>
+	<meta charset="UTF-8">
+	<title>jQuery Date Selector</title>
+	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
+	<link rel="stylesheet" href="css/persian-selector.css">
+	<style>
+		.date-select { font-family: 'Open Sans', sans-serif; }
+	</style>
+</head>
+<body>
+
+	<div class="container ">
+		<div class="row">
+			<div class="col-md-3 ">
+				<div class="input-group">
+					<input type="text" name="date1" id="date1" class="form-control" data-select="date">
+					<span class="input-group-btn">
+						<button class="btn btn-primary" type="button" data-toggle="select"><i class="fa fa-calendar"></i></button>
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
+	<script type="text/javascript" src="js/persian-date.js"></script>
+	<script type="text/javascript" src="js/persian-selector.js"></script>
+
+	<script type="text/javascript">
+		jQuery(document).ready(function($) {
+			$('.btn-date').on('click', function(e) {
+				e.preventDefault();
+				$.dateSelect.show({
+					element: 'input[name="date2"]'
+				});
+			});
+		});
+	</script>
+</body>
+</html>