Merge pull request #1 from novinandishe/develop

init first version
farhoudi · Mar 3, 2017 · 964ac09 · 964ac09
2 parents 06c760a + 61baf3a
commit 964ac09
Show file tree

Hide file tree

Showing 4 changed files with 491 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,15 @@
-# novin-datepicker
+# Novin DatePicker
 Persian DatePicker
+A Persian (Jalali) DatePicker used to pick Jalali date. The library uses
+ bootstrap for colors and styles.
+
+## Installation
+Load css file and js file.
+
+## Usage
+Assign datepicker:
+```javascript
+document.querySelector('datepicker').novinDatePicker();
+```
+## To Do
+- [ ] Support Multiple Selector
diff --git a/example.htm b/example.htm
@@ -0,0 +1,18 @@
+<html>
+<head>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
+    <link href="./novindatepicker.css" type="text/css" rel="stylesheet"/>
+    <script src="./novindatepicker.js"></script>
+    <meta charset="utf-8">
+</head>
+<body>
+<div class="col-md-6 col-md-offset-3" style="margin: 100px;">
+    <!--<label>date-->
+        <input type="text" class="form-control datepicker" name="">
+    <!--</label>-->
+</div>
+<script>
+    document.querySelector('.datepicker').novinDatePicker();
+</script>
+</body>
+</html>
diff --git a/novindatepicker.css b/novindatepicker.css
@@ -0,0 +1,63 @@
+.novin-date-picker {
+    font-family: Tahoma, serif;
+    font-size: .9em;
+    width: 17em;
+    padding: .2em .2em 0;
+    border: 1px solid #a6c9e2;
+    color: #222222;
+    position: absolute;
+    z-index: 1;
+    display: none;
+}
+.novin-date-picker-rtl {
+    direction: rtl;
+}
+.novin-date-picker-header {
+    position: relative;
+    padding: .2em 0;
+    border: 1px solid #4297d7;
+    color: #eaf5f7;
+    font-weight: bold;
+}
+.novin-date-picker-prev, .novin-date-picker-next {
+    margin: 3px;
+    /*z-index: 3;*/
+}
+.novin-date-picker-title {
+    text-align: center;
+}
+.novin-date-picker table {
+    width: 100%;
+    font-size: .9em;
+    border-collapse: collapse;
+    margin: 0 0 .4em;
+}
+.novin-date-picker th {
+    padding: .7em .3em;
+    text-align: center;
+    font-weight: bold;
+    border: 0;
+}
+.novin-date-picker td {
+    border: 0;
+    padding: 1px;
+}
+.novin-date-picker table {
+    width: 100%;
+    font-size: .9em;
+    border-collapse: collapse;
+    margin: 0 0 .4em;
+}
+.novin-date-picker-box-default {
+    font-weight: normal;
+    color: #ffffff;
+    outline: none;
+    text-align: center;
+    user-select: none;
+    cursor: pointer;
+}
+.novin-date-picker td span, .novin-date-picker td a {
+    display: block;
+    padding: .2em;
+    text-decoration: none;
+}