Skip to content

D
doodle
Commit 177f7aaa by crosf32
Options

replace bootstrap date&time pickers by flatpickr

parent c779ead3
Showing with 34 additions and 56 deletions
dist/js/doodle.js
...@@ -399,35 +399,25 @@ ...@@ -399,35 +399,25 @@
}; };
this.createEvents = () => { this.createEvents = () => {
//Initialise les plugins datepicker et timepicker
let date = new Date(); let date = new Date();
$('#myDatepicker').datepicker({ flatpickr(document.querySelector('#myDatepicker'), {
language: "fr", dateFormat: 'm/d/Y',
autoclose: true, minDate: date.getMinutes() + '/' + date.getMonth() + '/' + date.getFullYear(),
defaultViewDate: { year: date.getFullYear(), month: date.getMonth(), day: date.getDay() } enableTime: false,
}); onClose: this.eventAddDate
})
$('#timepicker').timepicker({ flatpickr(document.querySelector('#timepicker'), {
disableFocus: true, dateFormat: 'H:i',
showInputs: false, noCalendar: true,
minuteStep: 5, enableTime: true,
showMeridian: false, onClose: this.eventAddHour
icons : { })
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down'
}
});
$(document).on('click', 'input[type=checkbox]', this.eventCheckInput); $(document).on('click', 'input[type=checkbox]', this.eventCheckInput);
$(document).on('click', 'td a', this.eventRemoveDate); $(document).on('click', 'td a', this.eventRemoveDate);
$(document).on('click', 'th a', this.eventRemoveHour); $(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) { $(document).on('mouseenter mouseleave', '#date', function (e) {
if (e.type === 'mouseenter') { if (e.type === 'mouseenter') {
$(e.target).find('div').css('display', 'flex'); $(e.target).find('div').css('display', 'flex');
...@@ -704,7 +694,6 @@ ...@@ -704,7 +694,6 @@
this.addInOutputObject([dayFormat, this.json[index][i]] ) this.addInOutputObject([dayFormat, this.json[index][i]] )
} }
} }
}; };
...@@ -799,11 +788,8 @@ ...@@ -799,11 +788,8 @@
* Add date * Add date
* @param e * @param e
*/ */
this.eventAddDate = (e) => { this.eventAddDate = (e, dateStr) => {
e.stopImmediatePropagation(); let formatDateOnSneFou = moment(dateStr).locale('fr').format(this.dateFormat);
$('#myDatepicker').datepicker('hide');
let formatDateOnSneFou = moment(e.date).locale('fr').format(this.dateFormat);
if (this.keyExist(formatDateOnSneFou)) { if (this.keyExist(formatDateOnSneFou)) {
this.days.push(formatDateOnSneFou); this.days.push(formatDateOnSneFou);
...@@ -821,12 +807,9 @@ ...@@ -821,12 +807,9 @@
/** /**
* Add hour * Add hour
* @param e
*/ */
this.eventAddHour = (e) => { this.eventAddHour = (selectedDates, dateStr) => {
e.stopImmediatePropagation(); let val = dateStr;
let val = e.time.value;
let splitHour = val.split(':'); let splitHour = val.split(':');
if (splitHour[0].length === 1) { if (splitHour[0].length === 1) {
......
package.json
...@@ -12,12 +12,11 @@ ...@@ -12,12 +12,11 @@
"dayjs": "^1.8.14" "dayjs": "^1.8.14"
}, },
"devDependencies": { "devDependencies": {
"tether": "^1.4.3",
"bootstrap": "4.0.0-alpha.6", "bootstrap": "4.0.0-alpha.6",
"bootstrap-datepicker": "^1.7.1",
"bootstrap-timepicker": "^0.5.2",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"flatpickr": "^4.6.13",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"moment": "^2.20.1" "moment": "^2.20.1",
"tether": "^1.4.3"
} }
} }
test/index.html
...@@ -6,16 +6,15 @@ ...@@ -6,16 +6,15 @@
<title>Jumbotron Template for Bootstrap</title> <title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- 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 --> <!-- Custom styles for this template -->
<link href="/doodleV2/test/css/starter-template.css" rel="stylesheet"> <link href="./css/starter-template.css" rel="stylesheet">
<link href="/doodleV2/dist/css/doodle.css" rel="stylesheet"> <link href="../dist/css/doodle.css" rel="stylesheet">
<link rel="stylesheet" href="../node_modules/flatpickr/dist/flatpickr.min.css">
<!-- Pages css --> <!-- Pages css -->
<link rel="stylesheet" href="/doodleV2/node_modules/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="../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">
</head> </head>
<body> <body>
...@@ -25,7 +24,7 @@ ...@@ -25,7 +24,7 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="specific-doodle"> <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> <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>
<!--<div class="doodle table-responsive" data-json="json/data.json"></div> <!--<div class="doodle table-responsive" data-json="json/data.json"></div>
...@@ -40,19 +39,17 @@ ...@@ -40,19 +39,17 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Jquery --> <!-- Jquery -->
<script src="/doodleV2/node_modules/jquery/dist/jquery.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="/doodleV2/node_modules/tether/dist/js/tether.js"></script> <!--<script src="../node_modules/tether/dist/js/tether.js"></script>-->
<!-- Bootstrap / Boostrap datepicker / Bootstrap timepicker --> <!-- Bootstrap / Boostrap datepicker / Bootstrap timepicker -->
<script src="/doodleV2/node_modules/bootstrap/dist/js/bootstrap.js"></script> <!--<script src="../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>
<!-- Moment --> <!-- Moment -->
<script src="/doodleV2/node_modules/moment/min/moment.min.js"></script> <script src="../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-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="../dist/js/doodle.js" type="text/javascript"></script>
<script src="/doodleV2/test/js/app.js" type="text/javascript"></script> <script src="../test/js/app.js" type="text/javascript"></script>
</body></html> </body></html>
test/json/data.json
...@@ -6,4 +6,4 @@ ...@@ -6,4 +6,4 @@
"23/01/2018": ["10", "11", "12"], "23/01/2018": ["10", "11", "12"],
"24/01/2018": ["10", "11:15", "12"], "24/01/2018": ["10", "11:15", "12"],
"25/01/2018": ["10", "11:15", "12", "15"] "25/01/2018": ["10", "11:15", "12", "15"]
} }
\ No newline at end of file
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