Need your help in this weird behavior in bootstarp date picker. It happens intermittently. The date picker is now showing at the correct position (i.e. next to the datepicker icon) and also not showing the months, instead it is showing dates, i.e. the default properties. So what I understood is, it is not executing the attributes (i.e. container, format, minViewMode, etc).
Note: I don't have any working code for this to create fiddle.
I have the below code:
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<link href="bootstrap-datepicker.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="mywebsite.css" type="text/css"/>
jQuery(document).ready(function() {
$(document).on("click", ".datepickerIcon", function () {
$('#myDatepicker').bootstrapDP({
container: '#mydatepicker-custom-position',
format: "yyyy-mm",
startView: "year",
minViewMode: "months",
startDate: startDate,
endDate: endDate,
autoclose: false,
multidate: true,
forceParse: false
}).bootstrapDP( "show");
});
});
Related
I created a date picker in my code but this opens up automatically. How do I prevent this?
I have used the javascript component from here Date Range Picker
$(function() {
$('input[name="updateDat"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoApply: true,
minYear: 2017,
maxYear: parseInt(moment().format('YYYY'), 10),
"locale": {
"format": "DD.MM.YYYY"
},
},
function(start, end, label) {
console.log(start.format("DD.MM.YYYY"))
//window.localStorage.setItem("updateDw", start.format("DD.MM.YYYY"))
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<body>
<input type="text" name="updateDat" id="updateDate" />
</body>
I am using the following library:
https://github.com/fragaria/angular-daterangepicker
These are the script tags I am Using:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css"/>
I cant find the following file:
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
Following is my initialization code:
$scope.datePicker = {startDate: moment().subtract(6, 'days'), endDate: moment()};
$scope.dateRangeOptions = {
applyClass: 'btn-green',
locale: {
applyLabel: "Apply",
fromLabel: "From",
format: "YYYY-MM-DD", //will give you 2017-01-06
toLabel: "To",
cancelLabel: 'Cancel'
}
}
HTML:
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker" options="dateRangeOptions"/>
The CSS is not working and the UI is all broken.
I have searched for this error, in the context of jQuery and data tables, and none of the suggestions worked (in case this is marked duplicate immediately!)
I have .Net project (C#) and in master page I have references to jQuery, Datatables and date picker (among other things):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link href="assets/themes/base/jquery.ui.all.css" rel="stylesheet" />
In a page that uses the the master page I have a datatable and date pciker. I also try to set the modal pop up's title to be draggable. Using any of them causes "Object does not support property or method xxxx" error, where xxxx can be "draggable", "dataTable" or "datepicker".
I can't see why I get the errors when I am referencing jQuery. I even tried the ".noConflict" approach but it did't help either.
<script>
function pageLoad() {
$('#tbStartDate').unbind();
$("#tbStartDate").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showOn: "button",
buttonImage: "../assets/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Statrt Date",
option: "mm/dd/yy",
onSelect: function (dateStr) {
$("#tbEndDate").val(dateStr);
$("#tbEndDate").datepicker("option", { minDate: new Date(dateStr) })
}
});
}
</script>
or
<script>
$(document).ready(function () {
var j$ = jQuery.noConflict();
j$(".modal-dialog").draggable({
handle: ".modal-header"
});
})
</script>
Try...
$(window).load(function(){
})
instead of document.ready.
In the "Scripts" folder of the project, I had jquery-1.10.2.js and jquery-1.10.2.min.js while in my master page I was referencing jQuery 1.12.4. Once I removed the 1.10 scripts from"Scripts" folder, the error went away.
Thank you nitsram and Brahma for taking time and responding; I up-voted your responses.
I need to add time in a daterangepicker using jQuery and JavaScript. I am explaining my code below.
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="" onfocus="removeBorder('stdate')">
$('input[name="startgroupdate"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
Here only the date is coming from the calendar, but I need to add also the time, so the result should be like "03/04/2017 12 10 PM".
Check this out..You need to add time property and daterangepicker js
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="">
<script>
$(function() {
$('input[name="startgroupdate"]').daterangepicker({
timePicker: true,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
singleDatePicker: true,
showDropdowns: true,
drops: "down",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
});
</script>
</body>
</html>
Yo have to add property
timePicker: true
may this links helps
http://www.daterangepicker.com/#ex2
You need to add the timepicker flag to daterangepicker.
$('input[name="startgroupdate"]').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
singleDatePicker: true,
showDropdowns: true
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
I am using date-time picker and datatable in my website.
The datatable don't work if I use date-time-picker at the same time. And if I delete the date-time-picker, the dataTable will work.
Please help me, I am not that good in customizing javascript code.
Here is my code:
<script type="text/javascript" src="http://api2.prodigy.co.id/plugins/jquery/jquery.js"></script>
<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.css">
<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui-timepicker-addon.css">
<script src="plugins/jquery-ui/jquery-ui.js"></script>
<script src="plugins/jquery-ui/jquery-ui-timepicker-addon.js"></script>
<script>
$(function() {
$( ".datepicker" ).datetimepicker({
dateFormat: "yy-mm-dd"
, timeFormat: "HH:mm:ss"
});
});
$(document).ready(function() {
$('#register_and_login').DataTable();
} );