gregorio/lepisi-pengumuman
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added custom date (reason: firefox never love date inputs)

Browse Source
This commit is contained in:
Gregorio Chiko Putra 2017-09-12 15:41:47 +07:00
parent 5b1b546dc5
commit e72205ff09
4 changed files with 127 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
App/Views/Data/edit_pengumuman.html
View File

@ -94,7 +94,7 @@
<label for="valid_at">Berlaku dari: </label> <label for="valid_at">Berlaku dari: </label>
</div> </div>
<div class="stack"> <div class="stack">
<input type="date" name="valid_at" value="{{ post.valid_at }}"> <input id="left" name="valid_at" value="{{ post.valid_at }}">
</div> </div>
<input type="hidden" name="old_valid_at" value="{{ post.valid_at }}"> <input type="hidden" name="old_valid_at" value="{{ post.valid_at }}">
</div> </div>
@ -104,7 +104,7 @@
<label for="expired_at">Berlaku sampai: </label> <label for="expired_at">Berlaku sampai: </label>
</div> </div>
<div class="stack"> <div class="stack">
<input type="date" name="expired_at" value="{{ post.expired_at }}"> <input id="right" name="expired_at" value="{{ post.expired_at }}">
</div> </div>
<input type="hidden" name="old_expired_at" value="{{ post.expired_at }}"> <input type="hidden" name="old_expired_at" value="{{ post.expired_at }}">
</div> </div>
@ -148,6 +148,16 @@
</div> </div>
{% endif %} {% endif %}
</section> </section>
</main> </main>
<script>
rome(left, {
dateValidator: rome.val.beforeEq(right),
time: false
});
rome(right, {
dateValidator: rome.val.afterEq(left),
time: false
});
</script>
{% endblock %} {% endblock %}

15
App/Views/Data/entry_pengumuman.html
View File

@ -20,12 +20,12 @@
<br> <br>
<label for="expired_at">Berlaku dari: </label> <label for="expired_at">Berlaku dari: </label>
<input type="date" name="valid_at" value="{{ timestamp }}"> <input id="left" name="valid_at" value="{{ timestamp }}">
<br> <br>
<label for="expired_at">Berlaku sampai: </label> <label for="expired_at">Berlaku sampai: </label>
<input type="date" name="expired_at" value="{{ timestamp }}"> <input id="right" name="expired_at" value="{{ timestamp }}">
<br> <br>
</div> </div>
@ -55,4 +55,15 @@
</form> </form>
</section> </section>
</main> </main>
<script>
rome(left, {
dateValidator: rome.val.beforeEq(right),
time: false
});
rome(right, {
dateValidator: rome.val.afterEq(left),
time: false
});
</script>
{% endblock %} {% endblock %}

7
App/Views/base.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<script src="https://use.fontawesome.com/0aa8f3d106.js"></script> <script src="https://use.fontawesome.com/0aa8f3d106.js"></script>
<link rel="stylesheet" href="/css/picnic.min.css"> <link rel="stylesheet" href="/css/picnic.min.css">
<link rel="stylesheet" href="/css/rome.css">
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
<style> <style>
@ -46,6 +47,10 @@
.fr { .fr {
float: right; float: right;
} }
td, th {
padding: .3em .45em .3em .6em;
}
</style> </style>
</head> </head>
<body> <body>
@ -55,9 +60,9 @@
</a> </a>
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
</nav> </nav>
<script src="/js/rome.js"></script>
{% block body %} {% block body %}
{% endblock %} {% endblock %}
<script src="/js/rome.js"></script>
</body> </body>
</html> </html>

95
public/css/rome.css Normal file
View File

@ -0,0 +1,95 @@
/**
* rome - Customizable date (and time) picker. Opt-in UI, no jQuery!
* @version v2.1.22
* @link https://github.com/bevacqua/rome
* @license MIT
*/
.rd-container {
display: none;
/*border: 1px solid #333;*/
border: none;
background-color: #fff;
padding: 10px;
text-align: center;
}
.rd-container-attachment {
position: absolute;
}
.rd-month {
display: inline-block;
margin-right: 25px;
}
.rd-month:last-child {
margin-right: 0;
}
.rd-back,
.rd-next {
cursor: pointer;
border: none;
outline: none;
background: none;
padding: 0;
margin: 0;
}
.rd-back[disabled],
.rd-next[disabled] {
cursor: default;
}
.rd-back {
float: left;
}
.rd-next {
float: right;
}
.rd-back:before {
display: block;
content: '\2190';
}
.rd-next:before {
display: block;
content: '\2192';
}
.rd-day-body {
cursor: pointer;
text-align: center;
}
.rd-day-selected,
.rd-time-selected,
.rd-time-option:hover {
cursor: pointer;
background-color: #333;
color: #fff;
}
.rd-day-prev-month,
.rd-day-next-month {
color: #999;
}
.rd-day-disabled {
cursor: default;
color: #fcc;
}
.rd-time {
position: relative;
display: inline-block;
margin-top: 5px;
min-width: 80px;
}
.rd-time-list {
display: none;
position: absolute;
overflow-y: scroll;
max-height: 160px;
left: 0;
right: 0;
background-color: #fff;
color: #333;
}
.rd-time-selected {
padding: 5px;
}
.rd-time-option {
padding: 5px;
}
.rd-day-concealed {
visibility: hidden;
}