1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" />
<script data-require="jquery@*" data-semver="3.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script>
<form name="str" method="POST" action="test.php" id="userForm">
<input id="datetimepicker" type="text" step="30" name="creneau_horaire">
<input type="submit">
</form>
<script type="text/javascript">
var minDateTime = new Date();
minDateTime.setHours(minDateTime.getHours()-1);
var currentDate = new Date(new Date().getTime() + 60 * 60 * 1000);
jQuery(document).ready(function() {
jQuery.datetimepicker.setLocale('fr');
})
;
$(document).ready(function() {
var myFormatter = {
parseDate: function(vDate, vFormat) {
return moment(vDate, vFormat).toDate();
},
guessDate: function(vDateStr, vFormat) {
return moment(vDateStr, vFormat).toDate();
},
parseFormat: function(vChar, vDate) {
return vDate; // date string (I guess)
},
formatDate: function(vChar, vDate) {
var res = moment(vChar).format(vDate);
return res;
},
};
jQuery.datetimepicker.setDateFormatter(myFormatter);
var specificDates = ['29/03/2022','30/03/2022'];
var hoursToTakeAway = [[09,10],[10]];
jQuery('#datetimepicker').datetimepicker({
timepicker: true,
inline:true,
onGenerate:function(ct,$i){
var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
$('.xdsoft_time_variant .xdsoft_time').show();
if(ind !== -1) {
$('.xdsoft_time_variant .xdsoft_time').each(function(index){
if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1){
$(this).hide();
//$(this).addClass('disabled');
//$(this).fadeTo("fast",.3);
//$(this).prop('disabled',true);
}
});
}
},
allowTimes:[
'09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'
],
yearStart: 2022,
yearEnd: new Date().getFullYear() + 1,
beforeShowDay: function(date) {
var show = true;
if(date.getDay()==6||date.getDay()==0) show=false
return [show];
},
value: currentDate,
defaultDate: currentDate,
defaultTime: minDateTime.getHours() + ":" + minDateTime.getMinutes(),
/*
-- datetimepicker default formating - when PHP date formatter is used --
format: "d/m/Y H:i:s",
formatTime: "H:i",
formatDate: "d/m/Y",
*/
format: "DD/MM/YYYY à H:mm",
formatTime: 'H:mm',
formatDate: 'DD/MM/YYYY', //I need to use this format, but it works only when using "d/m/Y" - so somewhere the php date formater is still used..
});
});
</script> |
