I'm using Tigra calendar (https://www.softcomplex.com/products/tigra_calendar/) in my code as a simple pop-up calendar with any input text, but I'm facing some kind of problem that's driving me nuts.
To use this calendar, it's just needed to add
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
in the head section, and add class="tcal" to the input
<input type="text" name="date" class="tcal" value="" />
Working demo in https://jsfiddle.net/fgh7yjg7/
But now, using the same calendar inside a Bootstrap3 modal, it simply doesn't work in my code (although it does in a simple modal sample with jsfiddle)
What could be wrong?
Related
I have written a simple html page in Sharepoint 2013 with a text input that is meant to use datepicker.js. When I click into the text box, the calendar correctly pops up, but no dates are selectable. This exact code works when I simply open it in the browser outside of SharePoint.
I have tried using body onload, making sure the datepicker is initialized in an explicit function.
<link rel="stylesheet" href="/sites/###-###-###-###/###/SiteAssets/js/datepicker.material.css">
<script src=/'sites/##-###-###-###/###/SiteAssets/js/datepicker.js'></script>
<script>
function initialize(){
var datepicker = new Datepicker('#datepicker');
}
</script>
<body onload="initialize()">
<form>
<input type="text" id="datepicker"></input>
</form>
</body>
The calendar pops up and shows today's date highlighted, but I am unable to select any date at all. Any ideas are greatly appreciated!
I am quite new to JS and trying to add datetimepicker to my web-demo. The tutorial works properly with bootstrap 3.3.7, but when I change it to version 5, the calendar is not showing anymore.
Minimal working html is the following
<!-- this works OK -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this does not! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon\">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script>
$(".date").datetimepicker({locale: "ru"});
</script>
I use bootstrap#5.1.3 in the project and don't want to change it because of one datetimepicker. I've already tried many variants, but none worked. How can I get it to work?
As https://stackoverflow.com/a/68683409/8900030 stated, https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js is for Bootstrap 3, not Bootstrap 5.
What version should I use instead? (and how do I know that?)
Also note that I need {locale: "ru"} parameter, which is not available at bootsrap 3 AFAIK.
The successor is here: https://getdatepicker.com/
It no longer requires Bootstrap, jQuery or Moment. Checkout the installation documentation https://getdatepicker.com/6/installing.html here.
You can use plain html to get a date and time pick this seems to work well for me
<input type="datetime-local">
Yah, adding "datetime-local" in input field, seems to work. I does magic for me also.
<input type="datetime-local">
I am using spring form in my web page.
So for simple
<input type=text class="datepicker-1">
we are using <form:input path="" class="datepicker-1"/>
But while i am applying datepicker through JQUERY syntax in js file
$(function(){
$(".datepicker-1").datepicker();
});
Here for simple input html tag the calender is coming but for spring input tag the calender is not coming.
can anyone suggest me please.
Use cssClass instead of class
<form:input path="" cssClass="datepicker-1"/>
Also check that you are included jQuery and jQuery-ui library in your html page
$(function() {
$(".datepicker-1").datepicker();
});
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type=text class="datepicker-1">
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
I have a very annoying problem with jQuery and the datepicker from jQuery-UI.
Here is my javascript code:
<script type="text/javascript">
/*<![CDATA[*/
<!--
$(function(){
$("#startdate").datepicker({dateFormat: 'dd.mm.yyyy'});
});
// -->
/*]]>*/
</script>
And here the HTML part:
<input type="text" name="tx_cal_controller[startdate]" id="startdate" readonly="readonly">
The necessary JavaScript libraries are included in the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://foo.bar/fileadmin/res/jquery-ui-1.8.17.custom.min.js?1328657226" type="text/javascript"></script>
But there is no datepicker when I click on the input field. I would really appreciate it, if anyone could give me a hint.
Thanks in advance.
I solved it. There was a problem with the div of the datepicker. I had to include my own jQuery-UI package and modify it, so that when the input field gets clicked, the z-index of the datepicker gets higher (>1000) than the one of the other content divs and therefore visible.