In my site, using Bootstrap 4, I have a perfectly working datepicker instance giving me a calendar to choose dates. However, I want to modify this to use time as well. I've tried so many different versions of datetime pickers and put the CDN files in proper order but something is conflicting for whatever reason.
I'm hoping for someone to just point me into the direction of the best way to use a datetimepicker or just incorporate time with this, in a way that works with what I'm using now.
Here's the code for the working datepicker:
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<h6>Set New Expiration: <input data-date-format="mm/dd/yyyy" id="datepicker" name="datepicker"></h6>
You can use AuspeXeu DateTimePicker. It also supports keyboard navigation.
$(".datepicker").datetimepicker({
format: 'm/d/yyyy',
datesDisabled: ['2018-06-20'],
autoclose: true
});
function showDate()
{
console.log($('.datepicker').data("datetimepicker").getDate());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<input class="datepicker" type="text">
<button onclick="showDate()">Get Date</button>
Related
The black circle are the 2 cutoffdays and the red 1 is the current date for example only.
So I wanted to enable the 15,16,17 dates (to be clickable only);
I already disabled the weekends.
This code may help you solve your problem.
$('input').datepicker({
minDate: 0,
maxDate: '+1w-3D',
beforeShowDay: $.datepicker.noWeekends
});
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker" />
</p>
</body>
the code below was working perfectly fine before but recently I noticed that the minDate/maxDate isn't working anymore, strange because I didn't make any change on the code. I have been struggling with this for a few days now, it's annoying.
I am using this -- http://mugifly.github.io/jquery-simple-datetimepicker/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.js"></script>
<link type="text/css" href="http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.css" rel="stylesheet" />
<input type="text" name="start_time" id="start_time">
<input type="text" name="end_time" id="end_time">
<script type="text/javascript">
$(function(){
$('#end_time').change(function() {
$('#start_time').appendDtpicker({
"futureOnly": true,
"closeOnSelected": true,
"dateFormat": "DD/MM/YYYY hh:mm",
"minTime":"07:00",
"maxTime":"23:00",
maxDate: $('#end_time').val() // when the end time changes, update the maxDate on the start field
});
});
$('#start_time').change(function() {
$('#end_time').appendDtpicker({
"futureOnly": true,
"closeOnSelected": true,
"dateFormat": "DD/MM/YYYY hh:mm",
"minTime":"07:00",
"maxTime":"23:00",
minDate: $('#start_time').val() // when the start time changes, update the minDate on the end field
});
});
// trigger change event so datapickers get attached
$('#end_time').trigger('change');
$('#start_time').trigger('change');
});
</script>
I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.
The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.
This is the simple xforms example:
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/>
<link type="text/css" rel="stylesheet" href="res/style.css"/>
<script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>
<script type="text/javascript">
function showOutdoorMap(id){
var map = L.map(id);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-i875mjb7'
}).addTo(map);
map.locate({setView: true});
}
</script>
</head>
<body onload="showOutdoorMap('map')">
<fieldset>
<label class="header">Demo:</label>
<div id="map" style='width:100%; height:250px;'/>
</fieldset>
</body>
</html>
The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:
if (animated) {
clearTimeout(this._sizeTimer);
/*return this;*/
}
I also had to comment this line in order to drag and drop with no problems:
/*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/
I am working with Jquery simpleDialog. I am watching fidler and it is telling me that it is loading the js files successfully. I reference the files correctly in my view and I make correct calls. I am at my wits end and I can't quite figure out what to do. I have been looking at this code for the last couple of hours and I haven't been able to budge it.
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<link href="<%=ResolveClientUrl("~/Content/simpleDialog/jquery.simpledialog.0.1.css")%>" rel="stylesheet" type="text/css" />
<script src="<%=ResolveClientUrl("~/Scripts/simpleDialog/jquery.simpledialog.0.1.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/simpleDialog/jquery.form.js")%>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a.tempDlg1').simpleDialog({
opacity: 0.3,
duration: 200,
width: 950,
useTitleAttr: true,
closeLabel: '<img src="../../Content/simpleDialog/CloseButton2.gif" border="1"/>',
showCloseLabel: true
});
</script>
The simpleDialog window just won't open. Does UIDialog work better? I do have datePicker inside of this dialog. Could that be affecting it? I don't know, I have been working for 16 hours straight. I need some sleep.
You're missing a closing
});
for the $(document).ready(function() { block.
I am using the jQuery Mobile date picker control but I cannot change any of the properties. For example, the following code will attempt to set the first day of the week to Wednesday, in the document ready function but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script>
$(document).ready(function()
{
$("#date").datepicker({ firstDay: 3 });
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
<div data-role="fieldcontain">
<input type="date" name="date" id="date" value="" />
</div>
</div>
</div>
</body>
</html>
Any ideas what I'm doing wrong? Is this failing to work because the date picker is already displayed?
I have managed to change to change the properties by changing the "jquery.ui.datepicker.mobile.js" file
To change the date format to : "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});
What happens if you try a different setter?
$('.selector').datepicker('option', 'firstDay', 1);
Your missing the bind()
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
Docs (At the bottom of the page): http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Also I like the DateBox a littler better IMO: http://dev.jtsage.com/jQM-DateBox/
I had a similar problem and had to change two lines in jquery.ui.datepicker.mobile.js
First, I needed to store the return value of the call to prevDp (line 18).
var value = prevDp.call( this, options );
Then I had to return this value instead of this (line 46)
return value;
Now you should be able to call the datepicker with options like Matt Ball suggested.