I am using bootstrap date picker & Angular.
I have a dropdown menu/form on mouse hover only. The drop down menu contains bootstrap date picker. The problem is when user hover over date picker calendar, the underlying menu disappear.
The desired behavior would be to keep showing the calendar and underlying menu till user move mouse out of both the objects
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formMenu = false;
$('#dateInput').datepicker({
format: "dd MM yyyy",
autoclose: true,
todayHighlight: true
});
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
Dropdown
</div>
<div ng-show="formMenu" ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
<label>This should not disappear on calendar hover</label>
<input type="text" class="date-picker date-filter text-left" id="dateInput">
</div>
</div>
</body>
</html>
Example: http://plnkr.co/edit/CvQSWLGntsbVIoJASgqy?p=preview
Please suggest method to achieve the same
I am not to sure that I have understood the question to 100 percent, but the calender opens onclick so you can set a property to true if you click into the input and set it to false on blur.
Something like this should work.
div ng-show="formMenu || datepickerHover" ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
<label>This should not disappear on calendar hover</label>
<input type="text" class="date-picker date-filter text-left" id="dateInput" ng-click="datepickerHover = true" ng-blur="datepickerHover = false">
</div>
I know it's more like a hack. To observe the DOM if a div with the class datepicker appears would also be an opinion.
I'm assuming your CSS looks something like this
.nav:hover .menu {
display: block;
}
So add the same to the menu itself
.menu:hover {
display: block;
}
That way, when you stop hovering on the nav, you'll still be doing something that allows the menu to be visible.
Related
I need a calendar with time select as well as timezone selection. Like below image:
Here is my code:
$('#datetimepicker').datetimepicker({
// format:'d.m.Y H:i',
// timepicker:false,
// allowTimes: []
// onSelectDate:function(ct,$i){ // only to select time the changed date highlighted
// alert(ct.dateFormat('d/m/Y'));
// },
inline:true,
step: 30,
lang:'ru',
disabledWeekDays: [0,6]
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<div>
<input id="datetimepicker" type="text" >
</div>
I got the datetimepicker plungin to do this. But can't able to add calendar based on timezone. Here i'm attached my working code, but not added any timezone dropdown here. Can anyone suggest to achieve this:
One option is to use control groups. In the snippet below, I used the CSS classes ui-controlgroup and ui-controlgroup-vertical to achieve this. However, you can also use scripting as shown in the documentation. As you will observe, I took the liberty to demonstrate the dropdown using specific timezones, but, you can use Moment in conjunction with Luxon to achieve your needs. The datetimepicker plugin does not have a built-in ability to refresh after update, but I attempted a hack using blur to achieve that.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdn.jsdelivr.net/npm/luxon#1.22.0/build/global/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<body>
<!-- https://jqueryui.com/controlgroup/ -->
<div class="ui-controlgroup ui-controlgroup-vertical">
<input id="datetimepicker" type="text" class="ui-controlgroup-item">
<select id="timezonepicker" class="ui-controlgroup-item">
<option value="Europe/Moscow" selected>Moscow Standard Time</option>
<option value="Asia/Omsk">Omsk Time</option>
<option value="Asia/Novosibirsk">Novosibirsk Time</option>
</select>
</div>
<script>
$('#datetimepicker').datetimepicker({
inline:true,
step: 30,
lang:'ru',
disabledWeekDays: [0,6]
});
$('#timezonepicker').change(function() {
let newDate = luxon.DateTime.fromISO(luxon.DateTime.local(), {zone: $(this).val()}).toFormat('yyyy/MM/dd hh:mm');
$('#datetimepicker').val(newDate);
$('#datetimepicker').trigger('blur');
});
</script>
</body>
</html>
I am trying to duplicate my bootstrap datepicker, but it's not working properly.
The datepicker is inside a div and I duplicate the whole div. It works fine, but the datepicker is only working in the original div, not the cloned ones.
I've seen on stackoverflow that you can put a class instead of an Id, but that is not working either.
$('.calendar').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
});
function duplicate() {
var i = document.getElementById('duplicater');
var d = document.createElement('div');
d.id = "new";
d.innerHTML = i.innerHTML;
var p = document.getElementById('dynamicInput');
p.appendChild(d);
}
duplicate();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" integrity="sha256-I/m6FhcACNYmRoqn1xUnizh6S7jOJsTq+aiJ6BtE2LE=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js" integrity="sha256-7Ls/OujunW6k7kudzvNDAt82EKc/TPTfyKxIE5YkBzg=" crossorigin="anonymous"></script>
<div id="dynamicInput" class="col-md-12">
<div id="duplicater">
<div class="row">
<div class="field-wrap3 col-sm-12 col-md-4">
<input type="text" placeholder="Event Title" name="event_title[]">
</div>
<div class="field-wrap3 col-sm-12 col-md-4">
<input type="text" placeholder="Background Image (URL)" name="img_url[]">
</div>
<div class="field-wrap3 col-sm-12 col-md-4">
<input name="date" placeholder="Date" type="text" class="calendar" />
</div>
</div>
<div class="row">
<div class="description-create" class="col-md-8">
<input type="text" placeholder="Description" name="description[]">
</div>
</div>
</div>
</div>
I don't get why it's not working. My JavaScript selects all the elements with the class calendar and "gives" it a datepicker, does it not?
If I understand your problem give same class name of your second input field as your original and initialize datepicker with same class name, you don't need to duplicate whole code.
For example if you want to initialize datetimepicker in two textbox just give them same name as in example that follows in snippet.
$( function() {
$( ".calendar" ).datepicker();
} );
<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>
<input name="date" placeholder="Date" type="text" class="calendar"/>
<input name="date1" placeholder="Date1" type="text" class="calendar"/>
The order of operations that you are using is:
html is on page
you are telling datepicker to enable the existing instances of .calendar
you are copying the div which creates html that the previous call didn't know about, so nothing attaches to it
The copy is making a copy of the html, it is not creating a new instance of datepicker. If at the end of your copy you called $('.calendar').datepicker('destroy'); you could follow that by your existing call to:
$('.calendar').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
});
which would have the effect of:
html is on page
datepicker is attached to all existing instances of .calendar
duplicate is called
duplicate copies the html
and removes all instances of .calendar
and then reattaches to make sure it gets the original and the new instances of calendar
alternatively you could scope your call for attaching datepicker so that you attach it only to the newly created html.
What I am trying to do is, after selecting a date on Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({inline: true});
});
I need to use it for all inputs, or in other words, closest input field.
You called so many unwanted libraries. Just try this bootstrap datepicker. Hope this work for you.
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
demo
Here is solution you want: jsfiddle
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
See reference here
Further more, I noticed that you want use moment.js
You can use something like this, using custom format:
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});
You need to apply class 'datetimepickerinline' on your input field.
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
Try this fiddle : - https://jsfiddle.net/ekm0on2a/11/
you need to add datepicker class in your input field.
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div id="container">
<div class="my-example">
<input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
<div class="dropdown">
<div class="datetimepickerinline">
</div>
</div>
</div>
</div>
//script
$(function () {
$('#datepicker').datetimepicker({inline: true});
});
I need to resolve an issue that has been bugging my bug list for a while but can't find anything solid in Google. All I want is to remove the colon from the time so I can display it in REAL military time.
So, this is wrong --> 13:25 hrs
This is right --> 1325 hrs
I am using Jquery Date Picker form the Jquery UI library and datetimepicker-addon.js from here
HTML
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>
JS
$(function(){
$("#my_date").datetimepicker({
timeFormat: "HH:mm 'hrs'",
showButtonPanel: false
});
});
Here is a handy dandy CODEPEN
I appreciate the help
In the timeFormat of the datetimepicker remove the colon
$(function(){
// when the document has loaded
// attach the datetimepicker
$("#my_date").datetimepicker({
timeFormat: "HHmm 'hrs'",
showButtonPanel: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>
I have the following html code:
<div id="match_task_elements_31" class="match_task_draggables ui-draggable">
<span class="match_task_draggable" id="match_task_draggable_17">Dach</span>
<span class="match_task_draggable" id="match_task_draggable_16">Tschüss</span>
</div>
Now I want that each span is a dragable object that I can drag'n'drop
I tried this JS code:
$(".match_task_draggables").draggable({handle : '.match_task_draggable'});
But so the whole div with class match_task_draggables is a the block I can drag'n'drop
whats going wrong?
Try the below. It allows to drag and drop the span
$(function() {
$(".match_task_draggable").draggable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="match_task_elements_31" class="match_task_draggables ui-draggable">
<span class="match_task_draggable" id="match_task_draggable_17">Dach</span>
<span class="match_task_draggable" id="match_task_draggable_16">Tschüss</span>
</div>