I'm using jQuery UI Datepicker to make a two field submission form. I want the user to create a range and submit it to see results. However, they obviously cannot pick a start date that happens more recently than an end date (you can't see a range starting today and going to yesterday).
As of now, I've been able to put an alert on selection of the second one if the first one happened before it, but I can't figure out how to have the datepicker stay open so the user can select something else.
Here is the code I have so far:
<script>
$(document).ready(function() {
$(".datepicker_start").datepicker({
maxDate: '+0d',
onSelect: function(dateText, inst) {
}
});
$(".datepicker_to").datepicker({
maxDate: '+0d',
onSelect: function(dateText, inst) {
var startDate = $('.datepicker_start').val();
$(this).attr('value', dateText)
if (startDate > dateText) {
alert('not cool!');
}
}
});
});
</script>
Does anyone know how I'd do this? I tried returning false but it still pushes the incorrect date to the field :(
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate);
}
});
});
From: http://jqueryui.com/demos/datepicker/date-range.html
$(function () {
$("#fromdate").datepicker({
onClose: function (selectedDate) {
$("#todate").datepicker("option", "minDate", selectedDate);
}
});
$("#todate").datepicker({
onClose: function (selectedDate) {
$("#fromdate").datepicker("option", "maxDate", selectedDate);
}
});
});
Related
I want to set mindate on basis of first datetimepicker, its working fine first time but when I setting for second time , its not working properly. What I missing, any suggestion.
Thanks in advance.
$('#start_dateTime').datetimepicker({
minDate: moment()
}).on('dp.change', function (event) {
var start_dateTime = this.value;
$('#end_dateTime').attr('readonly', false);
$('#end_dateTime').datetimepicker({
minDate: moment(start_dateTime)
})
});
Below is the code for jQuery without using Moment This is for DatePicker Same is applicable for Datetimepicker too.
jQuery(document).ready(function ($) {
$('#startdate_0').datepicker({
//changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd",
minDate: new Date(),
onClose: function (selectedDate) {
$("#enddate_0").datepicker("option", "minDate", selectedDate);
}
});
$('#enddate_0').datepicker({
// changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$("#startdate_0").datepicker("option", "maxDate", selectedDate);
}
});
});
I'm trying to implement the JQuery DatePicker w/ week no and returning the selected date in format YYYYMMDD. When looking into the api for how to format date it says this could be done by using dateFormat: "yy-mm-dd". However, I'm not able to return the date in specified format.
I'm able to return the date in 'original format' with this code:
$(function DatePicker() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var date = $(this).datepicker( 'getDate' );
alert(date);
( 'getDate' ).getDate();
},
showWeek: true,
//showOn:"button",
firstDay: 1
});
});
Here is my code for trying to return (show a pop up) wewith the format 'YYYYMMDD':
$(function DatePicker() {
$( "#datepicker" ).datepicker({
// dateFormat: 'yy-mm-dd',
onSelect: function() {
dateFormat: 'yy-mm-dd',
//var dateFormat = $(this).datepicker( "option", "dateFormat" );
//$.(this).datepicker("option", "dateFormat", "yy-mm-dd"); //Senast insatt
alert(dateFormat);
},
showWeek: true,
firstDay: 1
});
});
Obviously I'm new to JQuery, and fairly new to JavaScript as a language.
Thanks!
Check this:
$( "#datepicker" ).datepicker({
dateFormat: 'yymmdd',
onSelect: function(v){
alert(v);
},
showWeek: true,
firstDay: 1
});
Test code here: http://codepen.io/anon/pen/yOBwLo
I get this working it gets on week selection "Week number: #" on main field and on alternate field get "yy-mm-dd"
On load I get "yy-mm-dd" from current date (Today) On both fields, but I want on load "Week number: #" on main and "yy-mm-dd" on alternate, from current date.
$(function() {
var currentDate = new Date();
$( "#fecha" ).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
altField: "#date1",
altFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$(this).val("Semana Numero: " + $.datepicker.iso8601Week(new Date(dateText)));
}
});
$("#fecha").datepicker("setDate", currentDate);
});
Any suggestion?
I'm not very familiar with the datepicker plugin, but it looks like it doesn't have any events you can trigger on it.
Anyways, this might not be the best approach, but what I did was loop through all the datepicker date <a>'s and trigger a click on the date that matches today's date.
https://jsfiddle.net/b3vstmef/
I was just looking over the datepicker and it doesnt look like you can trigger the onselect so I found that the code below will work instead.
$(function() {
var currentDate = new Date();
$( "#fecha" ).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
altField: "#date1",
altFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
populate(this, dateText)
}
});
$("#fecha").datepicker("setDate", currentDate);
});
function populate(field, d){
$(field).val("Semana Numero: " + $.datepicker.iso8601Week(new Date(d)));
}
populate($( "#fecha" ), $("#date1").val());
See it in action:
https://jsfiddle.net/y3llowjack3t/ycok5cwx/
This is the script I am using. What changes to be done?
$( "#from" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
$( "#to" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
I fixed it :-
Have to add this code in $( "#from" ).datepicker
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "maxDate", selectedDate
Have to add this code in $( "#to" ).datepicker
onSelect: function( selectedDate ) {
$( "#toDateRange" ).datepicker( "option", "minDate", selectedDate
Do:
var today = new Date();
var yesterday = new Date(today.getFullYear(),today.getMonth(),today.getDate()-1)
then add below property in your to date picker function
minDate : yesterday
Here is complete to code for that
var dateToday = new Date();
$(".datefrom" ).datepicker({
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onClose: function( selectedDate ) {
$( ".dateto" ).datepicker( "option", "minDate", selectedDate );
},
onSelect: function(selectedDate) {
var option = this.class == "datefrom" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
}
});
$(".dateto" ).datepicker({
dateFormat: 'dd/MM/yyyy',
onClose: function( selectedDate ) {
$( ".datefrom" ).datepicker( "option", "maxDate", selectedDate );
}
});
$('.datefrom,.dateto').change(selector)
It will disable the previous date in from calender and according to the selection done in from calender the to calender will get updated automatically and disabled previous date..
From researching on this site, I found a way to use 2 datepickers. If you pick a date on the first one, the second one will automatically show with the selected date as new minDate. You can see this in action on my test server here: http://www.zinius.nl/trips
The issue I'm having occurs in this situation:
Select the Check-in-date field, but don’t select a date and click somewhere else. You won’t be
able to get the Check-in-date field datepicker pop-up back up again until you refresh the entire page or first select the Check-out-date.
This is the code I am using:
$( "#datepicker1" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: 0,
firstDay: 0,
dateFormat: 'mm-dd-yy',
changeMonth: false,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
});
$( "#datepicker2" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: '+1d',
changeMonth: false,
firstDay: 0,
dateFormat: 'mm-dd-yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
}
});
I tried replacing the onClose with onSelect. This solves the issue, but when I select a date on datepicker1, datepicker2 appears and disappears in a flash.
Does anyone have a solution to get this working properly?
Thank you,
Guilliano
Try to change your onClose function on the first datePicker with
...,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
if(minDate){
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
}
Looking at the console, I can see this error being logged:
Cannot call method 'getDate' of null
It means your statement:
var minDate = $(this).datepicker('getDate');
is causing the problem. What you can do is to first check if the selectedDate (passed to the onClose callback) is valid or not, before attempting to getDate on it.
onClose: function(selectedDate) {
if (selectedDate) {
...
}
}