Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to add a couple of month-year pickers to a form that I'm creating in a Bootstrap template. I have found a plugin to do exactly what I need, however it was written in an older version of jQuery and therefore breaks... I can't roll back to a previous version as it will break other plugins on the page.
What I need is here: http://techbrij.com/month-range-picker-jquery-ui-datepicker
It's a simple way to enter a date range using only month/year options. It will be used to select periods of employment. Can anyone steer me in the right direction to migrate this to jQuery 2.1.*?
EDIT 2016-02-08
It seems that the conflict lies with my bootstrap template. The template I'm using is AdminLTE by Almsaeed Studio
This is what gets rendered after following all the steps to load jquery/jquery-ui
It appears to work fine, I reconstructed an example using the following script url's for Jquery(version 2.1.3) and JqueryUI(version 1.11.2). Make your you are including both in a script tag right before your closing </body> tag. The original code is from an online article at http://techbrij.com/month-range-picker-jquery-ui-datepicker.
cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
Live Example: http://codepen.io/larryjoelane/pen/jWeVPE
HTML:
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
CSS:
.ui-datepicker-calendar {
display: none;
/*use the line below instead to override existing css*/
/*display:none !important*/
}
JavaScript:
$("#from, #to").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow: function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length - 4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length - 4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length - 5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker("option", option, new Date(year, month, 1));
}
}
});
$("#btnShow").click(function() {
if ($("#from").val().length == 0 || $("#to").val().length == 0) {
alert('All fields are required');
} else {
alert('Selected Month Range :' + $("#from").val() + ' to ' + $("#to").val());
}
});
The code seems to work fine in JQuery 2.1.4 with JQuery-UI 1.11.4: https://jsfiddle.net/sLfga1jt/3/
Have you verified that your script tags are loading and in the proper order? Jquery script reference should be before Jquery-UI.
Also verify that the javascript from http://techbrij.com/month-range-picker-jquery-ui-datepicker is loaded after the script references by including in a script tag after jquery (as shown in example) or by wrapping in the document ready or similar function to ensure code is run after all the scripts are loaded:
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$( "#from, #to" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
}
else{
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
});
</script>
Related
I'm trying to change the value of a jQuery datepicker input element in a form to the first date in the week of the user-selected date once the submit button is clicked but before the form is actually submitted.
I'm finding that the following Javascript works (using a class selector in .find()):
$("form").submit( function(event) {
$(this).closest('form').find('.week-picker').datepicker( "setDate", startDate );
var current_date = $(this).closest('form').find('.week-picker').datepicker( "getDate" );
return;
});
startDate is a Date object.
But this code does not work (using an ID selector in .find()):
$("form").submit( function(event) {
$(this).closest('form').find("#week-picker").datepicker( "setDate", startDate );
var current_date = $(this).closest('form').find('.week-picker').datepicker( "getDate" );
return;
});
console.log($(this).closest('form').find(".week-picker").datepicker( "setDate", startDate ).val()); produces a proper date, like 06/27/2018.
console.log($(this).closest( 'form' ).find('#week-picker').val()); produces undefined.
Why is this happening? Isn't an ID a valid selector?
HTML:
<form action="/checkin" method="post">
<div class="form-group row mb-2">
<div class="col-md-6 offset-md-3">
<input class="week-picker form-control" type="text" id="week-picker" name="week_start" placeholder="Select week" style="opacity: 0;position: absolute;">
</div>
</div>
<div class="form-group row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
The datepicker portion of my JS:
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$(this).closest( 'form' ).find('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$(this).closest( 'form' ).find('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$(document).on( 'mousemove','.week-picker .ui-datepicker-calendar tr',function() {$(this).find('td a').addClass('ui-state-hover'); });
$(document).on('mouseleave','.week-picker .ui-datepicker-calendar tr',function() {$(this).find('td a').removeClass('ui-state-hover'); });
#week-picker is a valid selector, as long as your input has that ID assigned. What is happening in your case is that there is JS turning your input into a datepicker, and it changes the ID of the element when it loads. As you posted from your element inspector, your input no longer has the week-picker ID, it is now dp1529862475978.
This is not uncommon, and the behavior you're getting is the expected one. If you need to make sure that you're targeting this datepicker instead of another one with the same class, you can use the name attribute:
$("input[name='week_starting']")
You should never have 2 inputs with the same name on the same page, so it's as unique as an ID. The ID you're seeing in the element inspector is probably randomly generated, so you don't want to use that.
I am new to the web development. Here, I am using the jquery datePicker. In this I have a input box and that user can select only year and month and not date. So, I used,
$('#' + duration[k]).datepicker({
format: 'MM yyyy',
viewMode: "months",
minViewMode: "months",
});
I did this, Here my input are getting created dynamically.
var duration = ["StartDuration", "EndDuration"];
var commentText = document.createElement('input');
commentText.setAttribute("type", "text");
commentText.name = "month";
commentText.id = duration[k];
commentText.className = 'form-control';
commentText.rows = '3';
commentText.placeholder = "Enter" + " " + duration[k];
commentText.setAttribute("readOnly", "true");
commentText.setAttribute("ng-model", duration[k]);
Used for loop on the array and then created this input box. Now what happening is here, It gets datepicker but it is having a date-month-year . So, I want to have only year and month. Can any one pleas help me with this ?
You need to use dateformat like this : dateFormat: 'MM yy'
Check the example :
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<label for="startDate">Your Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
Here is fiddle
You can do like this
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
});
Jquery datepicker provides these two - changeMonth,changeYear property for it and make format like MM yy.
I've created a datepicker for my form and it selects the current date and disables past dates.
jQuery(document).ready(function($){
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">
But the problem is that when I select a "from" date and then a "to" date, my "to" date block my "from" date. So for example if I select "from" 10 july "to" 15 july, then I can't change my from date anymore after 15 july. It blocks me future dates after the "to" date selected.
Is like if I select the "to" date it makes it the maxDate until I reload the page.
How can I prevent this maxDate so I can always select the date I want? The only restriction I need is to disable past dates from today date.
Try this code
Removed code setting maxDate for from datepicker
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : null,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if(option!==null){
dates.not(this).datepicker("option", option, date);
}
}
});
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : null,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if(option!==null){
dates.not(this).datepicker("option", option, date);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">
Assuming that you are talking about jquery 2.1.1 and jquery-ui 1.12.1 as described in documentation you should consider the destroy method to re-elaborate minDate and maxDate options - but that would be tricky. So i would consider to use a timerange datepicker in this case to get the desidered result.
$(function () {
var dateToday = new Date();
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">
Hi i want to select date of birth from first date picker. In second date picker pick dates only above date of birth.
http://jsfiddle.net/boopathirajan/6c3v5gna/2/
I added code here.
so help me how to pick date2>date1 only
html
<div class="wrapper">
<input type="text" value="" id="date1" name="dob">
<input type="text" value="" id="date2" name="vcc">
</div>
jquery
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
Here is the solution for you.
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date2").datepicker("option","minDate", selected)
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date1").datepicker("option","maxDate", selected)
}
});
JSFIDLE
OR a different Approach
$(document).ready(function () {
$("#date1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#date1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
}
});
$('#date2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#date1').datepicker('getDate');
var dt2 = $('#date2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#date2').datepicker('option', 'minDate');
$('#date2').datepicker('setDate', minDate);
}
}
});
});
Its working fine
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0,
onSelect: function (date) {
$('#date2').datepicker('option', 'minDate', date);
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate:0,
minDate:1,
});
DEMO
I have two input fields for which I'm using datepicker:
On the first I want to hide the day selector and the 'Today' button.
On the second I want a normal datepicker
To achieve the desired effect on the 1st, I'm using a hack, like:
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
With CSS:
.ui-datepicker-calendar {
display: none;
}
HTML:
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="startDate">Outra Data :</label>
<input name="outraData" id="outraData" />
I tried:
#startDate .ui-datepicker-calendar {
display: none;
}
And:
.date-picker .ui-datepicker-calendar {
display: none;
}
Here's a JSFiddle
You can simply apply the css [By inspecting using dev tools(F12)]
.ui-datepicker-current{
display: none ;
}
JSFiddle
Remove the following option in your datepicker to hide the buttons:
showButtonPanel: true
Since you want 2 different datepickers, use the following:
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" />
<label for="startDate">Outra Data :</label>
<input name="outraData" id="outraData" />
JS
$('#startDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
$('#outraData').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
Notice that i have called the datepickers on the basis of IDs.
DEMO