Hello i am having a very strange problem with daterangepicker.
I load all the necessary JavaScript files before the </body> tag.
Here are the js files:
<script src="https://www.example.com/members/js/jquery/jquery-2.2.3.min.js"></script>
<script src="https://www.example.com/members/js/bootstrap/bootstrap.min.js"></script>
<script src="https://www.example.com/members/js/jquery/jquery-ui.min.js"></script>
<script src="https://www.example.com/members/js/daterangepicker/moment.min.js"></script>
<script src="https://www.example.com/members/js/daterangepicker/daterangepicker.js"></script>
<script src="https://www.example.com/members/js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="https://www.example.com/members/js/icheck/icheck.min.js"></script>
<script src="https://www.example.com/members/js/fastclick/fastclick.js"></script>
<script src="https://www.example.com/members/js/app/app.min.js"></script>
<script>
$('#reservation1').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
dateFormat: 'YYYY-MM-DD'
});
$('#reservation2').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
dateFormat: 'YYYY-MM-DD'
});
$('#reservation3').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
dateFormat: 'YYYY-MM-DD'
});
</script>
and then i get this:
Shouldn't it display the current date? and shouldn't i be able to choose some years?
Any help will be highly appreciated!!!
Related
DateRangePicker (http://www.daterangepicker.com/) is creating wrong values. When, for example, I select value 13:00 it shows up in input that it's 01:00
I have enabled timePicker24Hour to true so I dont really know what is the problem
Web page code
$(function() {
$('input[class*="datetimes"]').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
minYear: 1901,
timePicker24Hour: true,
timePickerIncrement: 5,
maxYear: parseInt(moment().format('YYYY'), 10),
locale: {
format: 'YYYY-MM-DD hh:mm'
},
opens: "center"
});
});
<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" />
<input class="form-control datetimes" type="text" name="end_time" id="end_time" />
Does anyone have had this bug or I have configured something wrong?
Your issue is that the format you're outputting back to the input (through the locale) is of the format hh:mm, which is the 12-hour format (mm). You want HH instead, making the entire format YYYY-MM-DD HH:mm. The datepicker itself is set to 24-hour format by doing timePicker24Hour: true as you were doing.
$(function() {
$('input[class*="datetimes"]').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
minYear: 1901,
timePicker24Hour: true,
timePickerIncrement: 5,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'YYYY-MM-DD HH:mm'
},
opens: "center"
});
});
<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" />
<input class="form-control datetimes" type="text" name="end_time" id="end_time" />
You need uppercase HH(24h format) to your date format
$(function() {
$('input[class*="datetimes"]').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
minYear: 1901,
timePicker24Hour: true,
timePickerIncrement: 5,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'YYYY-MM-DD HH:mm'
},
opens: "center"
});
});
<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" />
<input class="form-control datetimes" type="text" name="end_time" id="end_time" />
I have checked lot of tutorials and QAs in Google and tried with all permutation and combination tricks. Still my calender is not restricted with maxDate and minDate as I set. Please can someone check and let me know whats wrong with my code.
my javascript function is
$(function () {
$("[id$=txtPaymentDate]").datepicker({
maxDate: "+0D",
showOn: 'button',
dateFormat: 'mm-dd-yyyy',
buttonImageOnly: true
});
});
...and my body code:
<td>
<asp:TextBox ID="txtPaymentDate" runat="server" CssClass="form-control" placeholder="(YYYY-MM-DD)"></asp:TextBox>
<span id="spnAltContactNumber" style="color: Red;" runat="server"></span>
</td>
EDIT
Even though I've set dateFormat as 'yyyy-mm-dd', it is still showing the date as mm/dd/yyyy.
I have these following scripts. Is there any extra is required?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
For this maxDate and minDate does not work.Instead u need to use startDate and endDate as below.
$("[id$=txtPaymentDate]").datepicker({
showOn: 'button',
dateFormat: 'mm-dd-yyyy',
buttonImageOnly: true,
startDate: '-5d',//previous date
endDate: new Date()//current date
});
Happy coding
change textbox accoring to .net
$( function() {
$( "#txtPaymentDate" ).datepicker({dateFormat: 'dd M yy',maxDate: 1});
} );
<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>
<td>
<p>Date: <input type="text" id="txtPaymentDate"></p>
</td>
it should be maxDate: 1
$( "#datepicker").datepicker({dateFormat: 'dd M yy',maxDate: 1});
This is the working format in fiddle
and below is the code i have used in my demo-site i have created a new folder name js and placed datepicker.js inside it. so i linked the following in my html.
<script type="text/javascript" src="js/datepicker.js"></script>
and my datapicker.js code is
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
and my html code is
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
but when i press the above button .js is not being called. please help
You need to include a version of jQuery. Download the latest release and put it in your js folder and link it like you did for datepicker.js or directly include it like this
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
If this does not work try
<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>
I am not sure if your single datepicker.js has and error, but if it does try the jquery-ui js which includes it.
I tested it with including the above 2 js sources and it worked fine.
If the direct link to the jquery site js does not work then it is another problem on your page that is not shown to us.
Your code is running absolutly fine on my local machine.
Where i simply used the jQuery and jQueryUI CDN path from
Google Developer Site
Link
Your piece of code:
<!DOCTYPE html>
<html>
<head>
<title>JS Datepicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
</script>
</body>
</html>
if you miss place the position of jquery it wont work. hope the below code helps you.
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
I'm trying to create a TimePicker with Razor and JQueryUI in my bootstrap web. I created a DatePicker, and I know that I could create a DateTimePicker with JQuery, but I don't want to select the date and the time together, I want to select it with two different TextBox.
So I saw many tutorials, but all of them create a DateTimePicker, and when I tried to create a TimePicker with the same format, that didn't worked for me.
This is my code:
JavaScript:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true
});
$('#timepicker').timepicker();
});
</script>
Razor and Html:
#using (Html.BeginForm())
{
#Html.TextBox("date", DateTime.Now.ToShortDateString(), new { #id = "datepicker", #readonly = "readonly", #style = "width:250px;" })
<br />
#Html.TextBox("time","-- Select Time --", new { #id = "timepicker", #readonly = "readonly", #style = "width:250px;" })
}
Thanks! :)
jQuery-UI addon is required for timepicker control.
check here : https://jsfiddle.net/dmc55erf/8/
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true
});
$('#timepicker').timepicker();
});
</script>
I use the datepicker function from jquery. Now I have integrated a inline calendar. It should be possible to click on one day in the shown month and then submit a form or change the url. I need the new date added to the url so i can jump to this date.
But my code won't change the value of the input - and i don't know why.
Here my code:
In the head area:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.de.js"></script>
The HTML:
<form method="get" action="index.php">
<div class="form-group">
<div class="minicalendar"></div>
<input class="form-control" type="text" name="submitDate" id="submitDate" />
</div>
</form>
The JS:
$('.minicalendar').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Do you know why? I was searching for a time now but I wasn't able to find a solution that works ...
Thanks.
You are binding the datepicker to adiv instead of aninput.
<input id="datepicker" />
$('#datepicker').datepicker({
//...
});
You also don't need to change the input text with the onSelect event. The widget will do thix automatically.
$('#submitDate').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Use this. Datepicker won't bind to a <div> it has to be an <input> element. Check this link for more examples.
Here is the code from JQuery UI DatePicker :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
The input id has to be the same that the element selected in JQuery.