whenever i tried to select a date the on function is fired 3 times i tried removing this script
and it does work, but the ui is ruined and also i noticed that onselect is not working.
<!Doctype html>
<html>
<head>
<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function(){
var newdate = new Date();
$("#inputMultiDate").datepicker({
autoclose: true,
todayHighlight: true,
multidate: true,
format: 'dd-mm-yyyy',
onSelect: function(date){
console.log(date);
}
}).on("change", function() {
var dates = $('#inputMultiDate').val().split(',');
alert(dates[0]);
});;
});</script>
</head>
<body>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
</body>
</html>
onSelect is not working because onSelect is an option of jQuery UI datepicker, however you're using Bootstrap datepicker, which is a very different plugin.
Instead, boostrap datepicker uses events chained to the datepicker itself, like you have done with your change. However, given how the datepicker actually works behind the scenes, I'd imagine it changes the input multiple times, hence firing multiple alerts.
Instead of change, try changeDate:
var newdate = new Date();
$("#inputMultiDate").datepicker({
autoclose: true,
todayHighlight: true,
multidate: true,
format: 'dd-mm-yyyy'
}).on("changeDate", function() {
var dates = $(this).val().split(',');
console.log(dates[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
Related
I'm trying to get Bootstrap datepicker to display in string format, i.e. August 8, 2021 (i.e. in the input bar). But I want the actual date values to be formatted yyyy-mm-dd.
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
.datepicker {
font-size: 0.875em;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
</style>
<input style= "font-size:14px"id="datepicker">
Javascript:
$('#datepicker').datepicker({
weekStart: 1,
autoclose: true,
format: 'yyyy-mm-dd',
startDate: new Date(),
Readonly: true,
});
$('#datepicker').datepicker("setDate", new Date());
$(function() {
$("#datepicker").datepicker();
$("#datepicker").val();
$("#datepicker").on("change",function(){
selectedDate = $(this).val();
update(selectedDate)
console.log("datepicker selectedDate is", selectedDate)
return selectedDate
});
What is the easiest way to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<input style= "font-size:14px"id="datepicker">
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
autoclose: true,
format: 'yyyy-mm-dd',
startDate: new Date(),
Readonly: true,
});
$('#datepicker').change(function(){
var a = $(this).val();
console.log(a);
});
</script>
</body>
</html>
by the above code, you can get a date in yyyy/mm/dd format. there is some issue with your js match with my code and fix that.
Here in the html I'm assigning the date to the text field but the calendar of the datepicker will not pick that assigned value it will show always me the current date.
Assigning the value to the text field Using jQuery:-
$('#datepicker').val("06-10-2018");
$( function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 2,
onSelect: function(selected) {
$("#txtFromDate").datepicker("option","maxDate", selected)
}
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<p>Date: <input type="text" id="datepicker"></p>
How will change the current value of calendar according the assigning of the value to the text field. Can anybody will help me for this. Thank you.
You should initialize the datepicker first then set default value like this:
var myDate = "06/10/2018";
$("#datepicker").datepicker({
minDate: myDate
}).datepicker("setDate", myDate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<p>Date: <input type="text" id="datepicker"></p>
If you would like to set value of the input field and update calender. Then you should use update option of bootstrap-datepicker.
$('#datepicker').val("06-10-2018");
$('#datepicker').datepicker("update");
currently the code for the calendar functions, but the datePicker doesn't
if i copy/paste so that the date picker code comes second it functions, but the calendar doesn't.
fullcalendar source http://fullcalendar.io/ datepicker source https://jqueryui.com/datepicker/#min-max
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https:/resources/demos/style.css">
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({ minDate: +1, maxDate: "+1Y" });
});
</script>
<!-- code above is the code for the datepicker -->
<!-- code below is the code for the calendar -->
<link rel='stylesheet' href='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.css' />
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/lib/jquery.min.js'></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/lib/moment.min.js'></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.js'></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#calendar').fullCalendar({
weekends:false,
defaultView:'agendaWeek',
header: {
left:'prev,today,next',
center:'title',
right:'month,agendaWeek'
},
});
});
As pointed out simoultaniously by #Guruprasad and myself, your file inclusions are a mess.
It seems you're new so for this time here's the correct way to do it.
You don't need all the $(func... since you're using document.ready event to fire before calling the functions which means that jquery is available at this point.
Hope it helps !
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' href='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.css' />
<link rel="stylesheet" href="https:/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/lib/moment.min.js'></script>
<script src='fullcalendar-2.6.1(1)/fullcalendar-2.6.1/fullcalendar.js'></script>
<script type="text/javascript">
$(document).ready(
$( "#datepicker" ).datepicker({ minDate: +1, maxDate: "+1Y" });
$('#calendar').fullCalendar({
weekends:false,
defaultView:'agendaWeek',
header: {
left:'prev,today,next',
center:'title',
right:'month,agendaWeek'
},
});
});
I tried every options. MaxDate, MinDate, Beforeshowday. But its still not working. But my Datepicker is showing and working well. But I cant configure any options in my date picker. Any help would be greatly appreciated
Here is the code below
<script type="text/javascript">
jQuery(document).ready(function(){
$('#datepicker').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: '0',
});
});
</script>
Please checkout the code sample from https://jqueryui.com/datepicker/#default
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Dates in other months</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
And for beforeShowDay, Please check JQuery DatePicker and beforeShowDay
i need guide on how to apply this restriction for back dates for the date picker as i am new to this javascript.
<script type="text/javascript" src="javascript/datepickr.min.js"></script>
<input class="" type="Text" size="30" name="Date" id="Date" placeholder="yyyy-mm-dd"/>
<script type="text/javascript">
new datepickr('Date',
{
'dateFormat': 'Y-m-d'
}
);
</script>
i do saw some people post about solution like this code, but i don't know how to apply in my code
$(function() {
$( "#datepicker" ).datepicker({ minDate: 0});});
i have tried this as well, still not working, and it is more worst as the date picker can't be show
<link rel="stylesheet" href="css/jquery-ui-1.9.2.css" type="text/css" />
<link rel="stylesheet" href="style/jquery-ui-1.9.2.min.css" type="text/css" />
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.js"></script>
<input type='text' id='datepicker'></input>
<script type="text/javascript">
$("#date").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate() });
function mdate(){
var str = "-0Y";
return str; }
</script>
Take look at this. In it I have used JQuery UI 1.9.2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />
<script>
$( "#datepicker" ).datepicker({
minDate: 0
});
</script>
I am setting minDate on load. Use this code and this will work for you. Click Run Code Snippet code if you want to see the code in action.
$( "#datepicker" ).datepicker({
minDate: 0
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />