Skip to content

D
doodle
Commit 177f7aaa by crosf32
Options

replace bootstrap date&time pickers by flatpickr

parent c779ead3
Showing with 33 additions and 54 deletions
dist/js/doodle.js
......@@ -399,35 +399,25 @@
};
this.createEvents = () => {
//Initialise les plugins datepicker et timepicker
let date = new Date();
$('#myDatepicker').datepicker({
language: "fr",
autoclose: true,
defaultViewDate: { year: date.getFullYear(), month: date.getMonth(), day: date.getDay() }
});
flatpickr(document.querySelector('#myDatepicker'), {
dateFormat: 'm/d/Y',
minDate: date.getMinutes() + '/' + date.getMonth() + '/' + date.getFullYear(),
enableTime: false,
onClose: this.eventAddDate
})
$('#timepicker').timepicker({
disableFocus: true,
showInputs: false,
minuteStep: 5,
showMeridian: false,
icons : {
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down'
}
});
flatpickr(document.querySelector('#timepicker'), {
dateFormat: 'H:i',
noCalendar: true,
enableTime: true,
onClose: this.eventAddHour
})
$(document).on('click', 'input[type=checkbox]', this.eventCheckInput);
$(document).on('click', 'td a', this.eventRemoveDate);
$(document).on('click', 'th a', this.eventRemoveHour);
$(document).on('changeDate', '#myDatepicker', this.eventAddDate);
$(document).on('hide.timepicker', '#timepicker',this.eventAddHour);
$(document).on('click', '#timepicker', function () {
$('#timepicker').timepicker('showWidget');
});
$(document).on('mouseenter mouseleave', '#date', function (e) {
if (e.type === 'mouseenter') {
$(e.target).find('div').css('display', 'flex');
......@@ -704,7 +694,6 @@
this.addInOutputObject([dayFormat, this.json[index][i]] )
}
}
};
......@@ -799,11 +788,8 @@
* Add date
* @param e
*/
this.eventAddDate = (e) => {
e.stopImmediatePropagation();
$('#myDatepicker').datepicker('hide');
let formatDateOnSneFou = moment(e.date).locale('fr').format(this.dateFormat);
this.eventAddDate = (e, dateStr) => {
let formatDateOnSneFou = moment(dateStr).locale('fr').format(this.dateFormat);
if (this.keyExist(formatDateOnSneFou)) {
this.days.push(formatDateOnSneFou);
......@@ -821,12 +807,9 @@
/**
* Add hour
* @param e
*/
this.eventAddHour = (e) => {
e.stopImmediatePropagation();
let val = e.time.value;
this.eventAddHour = (selectedDates, dateStr) => {
let val = dateStr;
let splitHour = val.split(':');
if (splitHour[0].length === 1) {
......
package.json
......@@ -12,12 +12,11 @@
"dayjs": "^1.8.14"
},
"devDependencies": {
"tether": "^1.4.3",
"bootstrap": "4.0.0-alpha.6",
"bootstrap-datepicker": "^1.7.1",
"bootstrap-timepicker": "^0.5.2",
"font-awesome": "^4.7.0",
"flatpickr": "^4.6.13",
"jquery": "^3.3.1",
"moment": "^2.20.1"
"moment": "^2.20.1",
"tether": "^1.4.3"
}
}
test/index.html
......@@ -6,16 +6,15 @@
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/doodleV2/node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles for this template -->
<link href="/doodleV2/test/css/starter-template.css" rel="stylesheet">
<link href="/doodleV2/dist/css/doodle.css" rel="stylesheet">
<link href="./css/starter-template.css" rel="stylesheet">
<link href="../dist/css/doodle.css" rel="stylesheet">
<link rel="stylesheet" href="../node_modules/flatpickr/dist/flatpickr.min.css">
<!-- Pages css -->
<link rel="stylesheet" href="/doodleV2/node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/doodleV2/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="/doodleV2/node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
......@@ -25,7 +24,7 @@
<div class="col-md-12">
<div class="specific-doodle">
<div class="doodle table-responsive" data-json='{"29/07/2019":["11","12:15","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}' ></div>
<input type="hidden" id="inputVal" value=''>
<input type="hidden" id="inputVal" value='{"29/07/2019":["11","12:15","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}'>
</div>
<!--<div class="doodle table-responsive" data-json="json/data.json"></div>
......@@ -40,19 +39,17 @@
</div> <!-- /container -->
<!-- Jquery -->
<script src="/doodleV2/node_modules/jquery/dist/jquery.js"></script>
<script src="/doodleV2/node_modules/tether/dist/js/tether.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<!--<script src="../node_modules/tether/dist/js/tether.js"></script>-->
<!-- Bootstrap / Boostrap datepicker / Bootstrap timepicker -->
<script src="/doodleV2/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="/doodleV2/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/doodleV2/node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="/doodleV2/node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<!--<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>-->
<!-- Moment -->
<script src="/doodleV2/node_modules/moment/min/moment.min.js"></script>
<script src="/doodleV2/node_modules/moment/min/moment-with-locales.js"></script>
<script src="../node_modules/moment/min/moment.min.js"></script>
<script src="../node_modules/moment/min/moment-with-locales.js"></script>
<script src="../node_modules/flatpickr/dist/flatpickr.js"></script>
<script src="/doodleV2/dist/js/doodle.js" type="text/javascript"></script>
<script src="/doodleV2/test/js/app.js" type="text/javascript"></script>
<script src="../dist/js/doodle.js" type="text/javascript"></script>
<script src="../test/js/app.js" type="text/javascript"></script>
</body></html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment