what I have : I have two datepicker calender control in jquery where 1st can only choose date current date and previous date but not future date for that I have written the code which works fine
<script type="text/javascript">
$(function () {
$("#from").datepicker({ maxDate: 0 });
});
</script>
Now I have to use another textbox with datepicker which can only select dates between the date selected in 1st textbox and current date.
Now having these conditions what code should I write for my second datepicker.
my project is in Asp .net using c#. Any help would be appreciated
Please try the below:
<script type = "text/javascript">
$(function () {
$("#from").datepicker({
onSelect: function (date) {
$("#to").datepicker("option","minDate", date);
$("#to").datepicker("option","maxDate", new Date());
},
maxDate: 0
});
});
</script>
Related
I want to set start year from using materialize css and want to year start from 1990
HTML
<input type="text" class="datepicker">
JS
$(document).ready(function(){
$('.datepicker').datepicker();
});
With Materialize version one
$(document).ready(function(){
$('.datepicker').datepicker({
yearRange: 59
});
Or alternatively, provide an array of the years you want... that can be easily done in Javascript
$(document).ready(function(){
$('.datepicker').datepicker({
yearRange: [1970,2019]
});
set range to datepicker
$(function(){
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1990:'+(new Date).getFullYear()
});
});
You can modify you javascript as given bellow to adjust year according you. I hope this will work for you.
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 40 // Creates a dropdown of 15 years to control year
});
I would like to have two date field in my Wordpress contact form 7. A start-date and an end-date. The fields will be datepickers from the "Contact Form 7 Datepicker" plugin.
When visitor has selected a start-date he should only be able to select an end date that is 4 days later then the start-date.
How can I achieve this by only using the "contact form 7" form creator?
This is the syntax I put in the "contact form 7".
Start date charter*:
[date* date-start date-format:MM_d_yy]
End date charter*:
[date* date-end date-format:MM_d_yy]
And I added this code to the end of the functions file of the Wordpress theme.
function calendar_js(){
?>
<script>
jQuery(function($){
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.on('change', function() {
var start_date = $(this).datepicker('getDate');
start_date.setDate(start_date.getDate() + 3);
end.datepicker('option', 'minDate', start_date);
});
});
</script>
<?php
}
add_action('wp_footer', 'calendar_js');
Now the second date picker must be at least 4 days later then the first date picker.
May be this plugin will help you. This plugin works along with CF 7
http://wordpress.org/plugins/contact-form-7-datepicker/
And you can add your own javascript for date manipulation after adding datepicker in CF 7.
Example:
jQuery(document).ready(function($) {
$( ".from" ).datepicker({
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( ".to" ).datepicker({
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
2021 Update: Contact form 7 datepicker was removed from wordpress repository due to security reasons
https://blog.cf7skins.com/contact-form-7-datepicker-removed-security-vulnerability/
You can try the WP-Datepicker by Fahad Mahmood
This is my solution without the use of plugins,
this is the code of the CF7 fields:
Start date charter *:
[date* date-start]
End date charter *:
[date* date-end]
this is the code added in the functions.php file:
add_action('wp_footer', 'calendar_js');
function calendar_js()
{
?>
<script>
jQuery(function($)
{
var start = $('.date-start input').first();
var end = $('.date-end input').first();
start.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','maxDate',end.datepicker('getDate')); } });
end.datepicker ({dateFormat: 'yy-mm-dd', beforeShow: function() { $(this).datepicker('option','minDate',start.datepicker('getDate')); } });
});
</script>
<?php
}
There is no way to achieve it with the form builder directly, but with a bit of JavaScript you can validate the second input field to get your desired behaviour.
Here is an example, that falls back to the earliest date possible once a date is selected, that is out of scope.
<input type=date class=c-date-start>
<input type=date class=c-date-end>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Add the below code to the page your form is located -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
jQuery(($) => {
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
// Only allow dates in date end field that are after the date start field plus the minimum buffer
dateEnd.on('change', () => {
const startDate = dateStart.val()
const endDate = dateEnd.val()
if (startDate && endDate) {
const startDateMoment = moment(startDate)
const endDateMoment = moment(endDate)
const minDate = startDateMoment.clone().add(minBuffer, 'days')
if (endDateMoment.isBefore(minDate)) {
dateEnd.val(minDate.format('YYYY-MM-DD'))
}
}
})
})
</script>
On WordPress, you probably do not need to load jQuery extra and for the form markup you can add the classes in the CF7 builder like so:
[date date-427 class:c-date-start]
[date date-427 class:c-date-end]
Change the selectors and the minimum timespan according to your needs by adjusting the following declarations inside the source:
const dateStart = $('.c-date-start')
const dateEnd = $('.c-date-end')
const minBuffer = 4
When using 'Google maps v3 plugin for jQuery and jQuery Mobile', how to retrieve the latitude and longitude values under the mouse pointer when clicked on the map?
Even though the click event listener is already added to the map inside the plugin, the event object returned, does not give the latLng value.
Adding the click event listener to the map object from my code, worked for me (found the solution by referring this answer).
var map = $('#map_canvas').gmap('get', 'map');
$(map).addEventListener('click', function(event) {
alert(event.latLng);
});
johansalllarsson's solution works great for me, so here is my sample of code:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#map').gmap();
$($('#map').gmap('get', 'map')).dblclick(function(event) {
alert(event.latLng);
});
});
</script>
$($('#map_canvas').gmap('get', 'map')).click(function(event) {
console.log(event.latLng);
});
see http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-geocoding.html
I have 2 input boxes for inputing start date and end date.I need to verify that the start date is earlier than the end date.I have the following code to verify that but the code doesn't seem to be firing when I attach to the onselect event of the datepicker control.Can someone please tell what I'm doing wrong?
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".date").datepicker({
onSelect:function(dateText,inst){
var startDate=new Date($("#_createDateFromInput").val());
var endDate=new Date($("#_createDateToInput").val());
if(startDate!=""&&endDate!="")
{
if(startDate>endDate)
{
alert("End date cannot be earlier than start date");
}
}
}
});});
</script>
thanks!!
The markup for the above is(this is in asp.net):
<label>Date From</label>
<input class="date" runat="server" id="_createDateFromInput" />
<label id="to">To</label>
<input class="date" runat="server" id="_createDateToInput" />
El Ronnoco had I believe has latched onto something...I notice when I remove the runat="server" tag I am able to fire the even...however now I am faced with another
issue to retrieve the value during post back(i.e when user finally submits)..any one have an idea?
A simpler way to achieve this is to prevent that the user can select an earlier date for the endDate.
This can be simply done by using the minDate option of Datepicker plugin
$("#startDate").datepicker({
onSelect:function(dateText,inst){
$( "#endDate" ).datepicker( "option", "minDate", new Date(dateText) );
}
});
I use this code, from the jQuery UI example page: http://jqueryui.com/demos/datepicker/#event-search
Basically it takes 2 inputs, makes them datepickers then onselect limits both the mindate and max date. It's a very clever piece of code.
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
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 );
}
});
});
thanks guys for all your input.I used a lot of what you had written down.I was able to make that work for some reason having the attribute runat="server" causes all kinds of problems for jquery.I had to remove the tag and access it using the request object that is inherent in the page.For those interested in the syntax:
request.form["startDate"].tostring();
where startdate is the attribute name value for that field.
I have an ASP.NET application which uses JQuery datepicker for picking dates in some text boxes. For some date textboxes, I populate the date textbox from my database. When this textbox is clicked my JQuery datepicker appears, and it shows the current month with Today highlighted. This is fine for empty textboxes, however sometimes the text box is populated from the database.
When the textbox is not empty I want the datepicker to show the textbox month and have the selected date to be the textbox date.
Is this possible?
Here's my current javascript code in my asp.net script header:
<script type="text/javascript">
$(function () {
$('#myTextBox').datepicker({
dateFormat: 'dd-M-yy',
numberOfMonths: 2,
autoSize: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: 0
});
});
</script>
Thanks,
Mark.
You need to make sure that the format of your datepicker matches the format output by your serverside code. If they're exactly the same then it'll work. It won't try to parse the date if it's in a different format though.
You need to use defaultDate. Example:
<script type="text/javascript">
$(function () {
$('#myTextBox').datepicker({
dateFormat: 'dd-M-yy',
numberOfMonths: 2,
autoSize: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
maxDate: 0,
defaultDate: new Date()
});
});
</script>
This will initialize the default date to today's date. You need to add server side code that will initialize defaultDate to whatever you want.