|
 |
| |
ทำอย่างไรให้ jQuery DateTimePicker เลือกวันเข้า แต่เลือกวันออกหรือไม่เลือกวันออกก็ได้ |
| |
 |
|
|
 |
 |
|
เอาโค้ดมาดูครับ
|
 |
 |
 |
 |
| Date :
2017-04-08 19:18:00 |
By :
deawx |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : deawx เมื่อวันที่ 2017-04-08 19:18:00
รายละเอียดของการตอบ ::
Code (JavaScript)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-md=12">
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">วันที่เข้า</span>
<input name="checkin" id="startDate" type="text" class="form-control" value="<?php date_default_timezone_set('Asia/Bangkok'); $da = date("d-m-Y"); echo $da ; ?>" aria-describedby="sizing-addon2" required >
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">เวลาเข้า</span>
<input name="timein" id="startTime" type="text" class="form-control" value="<?php
date_default_timezone_set('Asia/Bangkok'); $Ti = date("08:00"); echo $Ti ; ?>" aria-describedby="sizing-addon2" required >
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">วันที่ออก</span>
<input name="checkout" id="endDate" type="text" class="form-control" value="ไม่มีกำหนด" aria-describedby="sizing-addon2" required >
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">เวลาออก</span>
<input name="timeout" id="endTime" type="text" class="form-control" value="ไม่มีกำหนด" aria-describedby="sizing-addon2" required >
</div>
</div></div></nav></div></div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">
$(function(){
$.datetimepicker.setLocale('th'); // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
var optsDate = {
format:'d-m-Y', // รูปแบบวันที่
formatDate:'d-m-Y',
lang:'th',
timepicker:false,
inline:false,
closeOnDateSelect:true,
}
var optsTime = {
format:'H:i', // รูปแบบเวลา
step:30, // step เวลาของนาที แสดงค่าทุก 30 นาที
sideBySide: true,
formatTime:'H:i',
datepicker:false,
}
var setDateFunc = function(ct,obj){
var minDateSet = $("#startDate").val();
var maxDateSet = $("#endDate").val();
if($(obj).attr("id")=="startDate"){
this.setOptions({
minDate:maxDateSet?maxDateSet:false,
maxDate:false
})
}
if($(obj).attr("id")=="endDate"){
this.setOptions({
maxDate:false,
minDate:minDateSet?minDateSet:false
})
}
}
var setTimeFunc = function(ct,obj){
var minDateSet = $("#startDate").val();
var maxDateSet = $("#endDate").val();
var minTimeSet = $("#startTime").val();
var maxTimeSet = $("#endTime").val();
if(minDateSet!=maxDateSet){
minTimeSet = false;
maxTime = false;
}
if($(obj).attr("id")=="startTime"){
this.setOptions({
minTime:false,
})
}
if($(obj).attr("id")=="endTime"){
this.setOptions({
maxTime:false,
})
}
}
$("#startDate,#endDate").datetimepicker($.extend(optsDate,{
onShow:setDateFunc,
onSelectDate:setDateFunc,
timepicker:false,
format:'d-m-Y', // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000
lang:'th', // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
}));
$("#startTime,#endTime").datetimepicker($.extend(optsTime,{
onShow:setTimeFunc,
onSelectTime:setTimeFunc,
}));
});
var datepicked = function() {
var start = $('#start');
var from = $('#from');
var to = $('#to');
var days = $('#days');
var fromDate = from.datepicker('getDate')
var toDate = to.datepicker('getDate')
if (toDate && fromDate) {
if (toDate.getTime() < fromDate.getTime()) {
alert('เลือก วันที่! ไม่ถูกต้อง กรุณาเลือกวันที่ให้ถูกต้อง');
document.getElementById("toDate").value == "";
}
}
if (toDate && fromDate) {
var difference = 0;
var oneDay = 86400000; //ms per day
var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay + 1);
days.val(difference)
}
}
$(function() {
var d = new Date();
var toDay = d.getDate() + '/' + (d.getMonth() + 1) + '/' + (d.getFullYear() + 543);
$('#from, #to,#start').datepicker({
changeYear: true,
changeMonth: true,
yearRange: '1910:2100',
dateFormat: 'dd/mm/yy',
isBuddhist: true,
defaultDate: toDay,
dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],
dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'],
minDate: '0', //ไม่สามารถเลือกวันที่ย้อนหลังได้
onSelect: datepicked
});
});
</script>
</body></html>
|
| |
|
|
| |
| Date :
2017-04-08 21:46:52 |
By :
aRtvv0rK |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไป if ที่ php เอาครับ
|
| |
|
|
| |
| Date :
2017-04-09 06:08:10 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
