I am trying to set the date to a specific one on page load so I'm trying this code:
<script type="text/javascript">
$(document).ready(function() {
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$("input[type='submit']").click(function(e) {
e.preventDefault();
$.post("s.php", $("form").serializeArray(), function(message) {
window.location="v.php"
});
});
});
</script>
//The form part where is displays the datepicker:
<form action="#" method="POST">
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
<input type="submit" value="submit" />
</div>
</form>
The problem is that nothing's changing ... the default is still the current date :o/
Any ideas anyone please?
UPDATE: Tried this code:
var queryDate = new Date(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$('#date').val(queryDate);
And the date is appearing in the input box but the calendar is not in the right month nor date ... Moving foward but still not working.
I'm not sure sure the suggested answer here is not working. As I have tested it display on the right month and year, but only not highlighted the date. This could be because the date format.
Try adding this code to have a default value on your date.
$('#date').val(queryDate);
Then you may see that the format is different with the date in date-picker. If you manage to set the right format with date-picker, you get the things you wanted.
Umm what if you tried this
new Date(year, month, day, hours, minutes, seconds, milliseconds)
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
Then the datepicker knows its a date object and how to handle it.
EDIT
Ok - all i did was copy the code exactly as you got it here several posts the same suggestion- and the code you edited. Added tags- inlcuded jquery and jquery ui..
I see no problem- the defuatl date is 2009.
</head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var queryDate = new Date();
queryDate.setFullYear(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$("input[type='submit']").click(function(e) {
e.preventDefault();
$.post("s.php", $("form").serializeArray(), function(message) {
window.location="v.php"
});
});
});
</script>
</head>
<body>
//The form part where is displays the datepicker:
<form action="#" method="POST">
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
<input type="submit" value="submit" />
</div>
</form>
</body>
Result (no styles sheet attached)
Working example- tell me what is wrong
http://jsfiddle.net/ppumkin/nptgn/
Try this
var queryDate = new Date(2009,11,01);<br/>
$('#date').datepicker({defaultDate: queryDate});
I was having a similar problem, I solved it like this
$('.datepicker').datepicker({dateFormat: "yy-mm-dd", defaultDate: "+3m"} );
Try this
$('#mydate').val("2009-11-01");
Related
I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});
I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers
I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>
You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});
I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.
Datepicker doesn't close when clicking outside
and if I select 10/09 and current date is 10/ 11 and refresh browser,
then it shows current date 10/11 on <input> tag,
but the selected date on datepicker keep showing 10/09
How do I fix this?
My code is below:
<div class="form-inline" align="right">
<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$input = $("#datepicker");
$('#datepicker').datepicker({
dateFormat: 'yyyy-mm-dd'
});
$input.data('datepicker').hide = function() {};
</script>
</div>
When I refresh the browser,
Does changing type="text" to type="date" work? Like this JSFiddle
I have a form where a visitor can make a lodging reservation with an arrival date and departure date. If they click on an input field a calendar pops up for them to select a date. How can I add a popup JS alert if the departure date is <= the arrival date? My code is as follows:
<head>
...
<script type="text/javascript" src="js/CalendarPopup.js"></script>
<script type="text/javascript">document.write(getCalendarStyles());</script>
...
</head
<script type="text/javascript" id="jsArrive">
var now = new Date();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var calArrive = new CalendarPopup("divArrive");
</script>
<b>Arrive:</b>
<input type="text" name="dateArrive" value="" size="15" onClick="calArrive.select(document.forms[0].dateArrive,'dateArrive','d/M/yyyy'); return false;" title="calArrive.select(document.forms[0].dateArrive,'dateArrive','d/M/yyyy'); return false;" id="dateArrive" />
</p>
<div id="divArrive" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>
<script type="text/javascript" id="jsDepart">
var now = new Date();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var calDepart = new CalendarPopup("divDepart");
</script>
<b>Depart:</b>
<input type="text" name="dateDepart" value="" size="15" onClick="calDepart.select(document.forms[0].dateDepart,'dateDepart','d/M/yyyy'); return false;" title="calDepart.select(document.forms[0].dateDepart,'dateDepart','d/M/yyyy'); return false;" id="dateDepart" />
<input type="submit" value="Go" name="submit" />
</p>
<div id="divDepart" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>
It's as simple as comparing the two dates, like so:
if (departureDate <= arrivalDate) {
alert ("You must make sure your departure is before your arrival!);
}
I suggest you run the above if statement when the user has entered there arrival date. So you'd use an onChange event on each of the inputs incase they go back and change there departure date!
So, I am a real beginner in js and I have a form with 2 inputs. In this inputs I have date pickers so that the user can select a date from a calendar. But the db from the site I work on has this date format: Y M D 0000:00:00. I want to add those zeros at the end automatically when a user selects a date. Don't know if anyone can help, but thanks.
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%Y-%M-%d"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%Y-%M-%d"
});
};
<form action="insert.php" method="post" target="000:00:00 "onsubmit="return validateForm(this)">
<label for="FUP start date">FUP start date:</label>
<input type="text" name="inputField" id="inputField"/>
</br>
</br>
<label for="FUP end date">FUP end date: </label>
<input type="text" name="inputField2" id="inputField2" />
I'm assuming you can simply alter the dateFormat given to each JsDatePick to include those zeroes, like so:
new JsDatePick({
useMode: 2,
target: "inputField",
dateFormat: "%Y-%M-%d 0000:00:00"
});
It would be helpful if you could provide information on the date picker you are using.