Hover bootstrap datepicker - javascript

I'm trying to use the hover() function of JQuery to do some formatting to my DatePicker when entering the mouse in one of its rows but unfortunately my hover() is never call.
Here is how I initialize my datepicker:
//WEEK PICKER
moment.locale('fr', {
week: { dow: 1 } // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'MM-DD-YYYY'
});
//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function (e) {
var value = $("#weeklyDatePicker").val();
var firstDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
var lastDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(firstDate + " - " + lastDate);
});
Here is how I'm setting my hover() function:
$( ".bootstrap-datetimepicker-widget tr" ).hover(
function() {
console.log('in');
}, function() {
console.log('out');
}
);
But no logs are being written. I'm sure to have the right selector because I got this in my CSS:
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}
And the color is updating when the mouse goes hover.
Any idea?
EDIT
Here is a Jfiddle that reproduce my code: https://jsfiddle.net/5kzjvL1u/

I believe Robert C is correct in his comment in that it's being loaded intor the DOM after the page has loaded and you are correct in your suggestion of placing the :hover within a click event for the input field. See this snippet for a working example.
$(document).ready(function() {
moment.locale('fr', {
week: {
dow: 1
} // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'MM-DD-YYYY'
});
$('#weeklyDatePicker').on('dp.change', function(e) {
var value = $("#weeklyDatePicker").val();
var startDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
var endDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(startDate + " - " + endDate);
});
$("#weeklyDatePicker").click(function() {
$(".bootstrap-datetimepicker-widget tr").hover(
function() {
console.log('in');
},
function() {
console.log('out');
}
);
});
});
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 form-group">
<div class="input-group" id="DateDemo">
<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
</div>
</div>
</div>
</div>

Related

Display specific dates in bootstrap datepicker

I'm using bootstrap date picker in my project. It's a session booking project. From the admin panel, I add the sessions for specific dates and I want the user's of my website to be able to see the dates for which I have added a session. My frontend receives the data from database. The data contains all the dates for which I have added a session. I want my datepicker to display only these dates from the data and disable the other dates.
Currently I have temporarily used a select box to solve this issue. But a datepicker would be better as it looks good is easy to navigate.
See the picture below. This is how I have used a select box to temporarily solve the problem
Here is the desired output that I want
It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled
I tried searching it on google but I'm not able to find the solution. Is this possible using bootstrap date picker? If yes, please suggest a workaround.
You can use beforeShowDay function to enable only the dates returned from your back end system.
Documentation here
This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.
$(function () {
let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return enabledDates.indexOf(fullDate) != -1
}
});
});
beforeShowDay function also allows you to return classes for custom styling
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
if (enabledDates.indexOf(fullDate) != -1) {
return {
classes: 'enabled',
tooltip: 'You can select this date'
};
} else
return false
}
.enabled {
background: #DCDCDC;
}
None of the other solutions worked for me so here is my solution.
The documentation is not so clear and lacks of example but you can see a function that takes a date as a parameter and returns a Boolean, indicating whether or not this date is selectable
In this snippet, look at January 2020 for example in order to see only the active dates.
$(document).ready(function() {
var datesEnabled = [
'2021-01-01', '2021-01-11', '2021-01-21',
'2021-02-01', '2021-02-11', '2021-02-21',
'2021-03-01', '2021-03-11', '2021-03-21',
'2021-04-01', '2021-04-11', '2021-04-21',
'2021-05-01', '2021-05-11', '2021-05-21'
];
$("#datepicker-lorem").datepicker({
language: "fr",
autoclose: true,
todayHighlight: true,
todayBtn: true,
title: 'Test ;-)',
weekStart: 1,
format: 'dd/mm/yyyy',
// On n'active que les dates possibles
beforeShowDay: function(date) {
var allDates = date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
if (datesEnabled.indexOf(allDates) != -1) {
return {
classes: 'date-possible',
tooltip: 'Vous pouvez choisir cette date'
}
} else {
return false;
}
}
});
});
/* For better frontend result, add class to active date and add opacity to disabled date */
td.day.disabled {
opacity: 0.4;
}
td.date-possible {
background-color: red;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<input class="form-text form-control" type="text" id="datepicker-lorem" name="date_demande" value="" size="60" maxlength="128">
</div>
</div>
</div>
Using 'beforeShowDay' parameter you can disable dates:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
//date list that you want to disable
disableddates = ['10-10-2018', '10-11-2018', '10-12-2018'];
$("#datepicker").datepicker({
format: 'dd-mm-yyyy',
beforeShowDay: function(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
var currentdate = (m + 1) + '-' + d + '-' + y;
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1) {
return [false];
}
}
return [true];
},
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
});
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
</body>
</html>

jQuery - Get values from jQuery array got from field

First I have one field with daterangepicker.
I get value using $("#field").val().
I got like
{"start":"2018-03-23","end":"2018-03-29"}
But, I need start date and end date value from
{"start":"2018-03-23","end":"2018-03-29"}
My code is
<input id="field" type="text" value='' /><br/>
$(function() {
'use strict';
$("#field").daterangepicker({
dateFormat:'dd M',
datepickerOptions : {
numberOfMonths : 2
}
});
var curnt = moment().startOf('day').toDate();
var weeks = moment().subtract('days', 6).startOf('day').toDate();
$("#field").daterangepicker("setRange", {start: weeks, end: curnt});
});
function get_graph_data(){
var dates = JSON.parse($("#field").val());
console.log(dates.start);
console.log(dates.end);
var data = {
'action' : 'example_ajax_request',
'wp_graph': $("#field").val()
};
jQuery.post(ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
}
What you get from the $("#field").val() is a JSON. You can easily do something like:
var dates = JSON.parse($("#field").val());
dates.start; // "2018-03-23"
dates.end; // "2018-03-29"
A snippet to help you:
$(function () {
var dates = JSON.parse($("#field").val());
console.log(dates.start); // "2018-03-23"
console.log(dates.end); // "2018-03-29"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="field" type="hidden" value='{"start":"2018-03-23","end":"2018-03-29"}' />
You are using daterangepicker plugin so you should use it's methods instead of jQuery's val(). Select an input field and call data('daterangepicker'). Returned object contains startDate and endDate objects. Keep in mind that they are Date objects (not Strings), so you will need to format if you want to print them.
$('#field').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2018-01-01',
endDate: '2018-12-31'
});
$("#getDateRange").click(function() {
var data = $("#field").data('daterangepicker');
var startDate = data.startDate.format('YYYY-MM-DD');
var endDate = data.endDate.format('YYYY-MM-DD');
alert('Start date: ' + startDate + ', end date: ' + endDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input id="field" type="text" value='' />
<button type="button" id="getDateRange">Get start date</button>
It's always a good habit to check out official documentation of a plugin. You can check it out here.

Select Calendar Date and Update Link Label

I have a Link Label on my page. When I click on the label a calendar pops up. When I click on a date on the calendar I want my link label to update to that particular date in this format '30 JAN 2017'
The issue is because of the local variable var dateText =..., My label never updates but gets the correct format.
If I comment or remove the date formatting section than my label updates to the correct date but does not contain the format I'm looking for.
How do I update my link label with the desired formatting when clicking on a specific date on the calendar?
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
var dateText = new Date().toLocaleString('en-GB', {
day: 'numeric',
month: 'short',
year: 'numeric'
}).split(' ').join(' ');
$("#datep").html(dateText);
},
beforeShow: function(event, ui) {
var $link = $("#datep");
ui.dpDiv.offset({
top: $link.offset().top + 10,
left: $link.offset().left + 10
});
}
});
$("#datep").click(function() {
$("#dp").datepicker("show");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Picker Link Label
<input type="hidden" id="dp" />
<div></div>
You're calling new Date().toLocaleString(..., which uses the current date. All you're missing is passing the dateText parameter to the Date constructor:
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
var dateText = new Date(dateText).toLocaleString('en-GB', {
day: 'numeric',
month: 'short',
year: 'numeric'
}).split(' ').join(' ');
$("#datep").html(dateText);
},
beforeShow: function(event, ui) {
var $link = $("#datep");
ui.dpDiv.offset({
top: $link.offset().top + 10,
left: $link.offset().left + 10
});
}
});
$("#datep").click(function() {
$("#dp").datepicker("show");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Picker Link Label
<input type="hidden" id="dp" />
<div></div>

Bootstrap datepicker: how to add class (e.g. "month active") to specific months i want to highlight

I'm using boostrap datepicker and i want to permanently highlight specific months to look something like this: example i want to achieve.
I saw some methods for example beforeShowMonth but i don't really understand how does it work
NOTE: I have datepicker configured to show only months and years
I would really appreciate all the help. Thanks in advance!!!
var makeMonthActiveForThisYear = false;
$('.datepicker').datepicker({
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
}).on("show", function (date) {
if (makeMonthActiveForThisYear) {
var year = parseInt($(".table-condensed thead tr th:eq(1).datepicker-switch").text().split(" ")[1]);
var highlightMonth = GetMonthToActive(year)
$('.datepicker-months table tbody tr:first td span.month').each(function () {
if ($.inArray($(this).text(), highlightMonth) > -1) {
makeMonthActiveForThisYear = false;
$(this).addClass('active');
}
});
}
}).on("changeYear", function (date) {
var highlightYear = [2015, 2014];
var year = date.date.getFullYear();
if ($.inArray(year, highlightYear) > -1) {
makeMonthActiveForThisYear = true;
}
});
function GetMonthToActive(year) {
if (year == 2014)
return ["Jan", "Feb", "Mar"];
if (year == 2015)
return ["Jan", "Mar", "Apr"];
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<input type="text" type="text" class="form-control datepicker" />
You can do it like below.... this is working and I have tested it before posting but still if you don't get the desired result I will update it with demo.
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
endDate: '+0d',
autoclose: true
}).on("show", function () {
var highlightMonth = ["Jan", "Feb", "Mar"];
$('.datepicker-months table tbody tr:first td span.month').each(function () {
if ($.inArray($(this).text(), highlightMonth) > -1) {
$(this).addClass('active');
}
});
});

jQuery - Cloning a datepicker field

I'm trying to clone a table row and get a datepicker box working on all rows. At the moment, the first one works, but not later boxes.
Can anyone offer any tips? Any help much appreciated!
Here's the code:
HTML
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
<script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js"> </script>
<div class="clone_Associate">
<input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
</div>
<div class="placer_Associate"></div>
Clone a new datebox!
jQuery
$(function() {
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
});
$(document).ready(function(){
$(".clone_trigger_Associate").click(function () {
var total = $('[name^="UPDATE_METHOD"]').length;
var index = Math.round(total / 2);
$('.clone_Associate').last().clone().insertBefore(".placer_Associate");
$('input.cl:last').val('');
$('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]")
// Date pick element
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'}
);
event.preventDefault();
});
});
A jsfiddle is here: http://jsfiddle.net/dalepotter/aSG6e/
Demo: http://jsfiddle.net/aSG6e/15/
$(function() {
var options = {dateFormat: 'dd/mm/yy'}
$('.datepick').datepicker(options);
$(".clone_trigger_Associate").click(function (e) {
e.preventDefault();
var $newInput = $('.datepick:last').clone(true).removeAttr('id');
$(this).before($newInput);
$newInput.datepicker('destroy').datepicker(options);
});
});
Change this code;
$('.clone_Associate').last().clone().insertBefore(".placer_Associate");
with this;
var newDate = '<div class="clone_Associate"><input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013"></div>';
$('.clone_Associate:last').after(newDate);

Categories