Based on here I need to disable date change in condition.
example:
var count = 0 ;
if (count = 0){cannot click on other date}
Please guide me on this, ive read other posts and i cannot use same approach.
I need to disable clicking on other date, when i was working on process related on one particular date. As an example, i was working on a form that use the current week, then suddenly i clicked on other date on mistakes, and the date will change to new date. i want to avoid thi
Thanks.
Try this line inside your if condition
var dat=document.getElementById('#idDate');
dat.setAttribute('readonly',true);
Related
I want this type of calendar to be visible and select input date
There are many ways.
For the selection, you can build it with a tag or button.
I don't know what languages and platform(project, server, etc) you are gonna take. However, you can calculate the number of dates with the current time. So, If you know some JavaScript, you can try with that fact.
For instance, the a tag or the button can have value like this:
<a id="date" href="#">30</a>
If you use jQuery ( from JavaScript ), you can get 30.
$('#date').on('click', function(){
var date = $(this).text();
});
If you want to get the year and the month you can give them id in the tag and get it.
If you want to make it simple, the page shouldn't have the tags from all the dates( For example, the dates from 1990~2018... Jan to Dec... 1~31...) at the time. However, you can manipulate it with jQuery. For instance, Let's say you have one left, right button for changing the year. If you press left, just change the number of year like this:
var currentYear = $('#year').text();
$('#year').text(--currentYear);
For the format, using table can be used. However, you can also use div. And just give them different class and implement it.
I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript">
jQuery(function() {
jQuery('#dp1, #dp2'
).datepicker({startDate: '-0m'}).on('changeDate', function(){
jQuery( '#dp1, #dp2'
).datepicker('hide');
})
});
</script>
Any suggestions please?
So after some trouble I finally got something working for you:
jsFiddle Bootstrap-datepicker
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate() on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();
Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});
So what I am trying to accomplish is what most Hotel or Airport sites have in general, after you've chosen a date for your arrival when clicking on the next calendar it automatically updates the calendar dates to the same month in which you chose your arrival.
See: http://hotelsaxchicago.com
I currently have jQuery UI and it's calendar plugin for a casino/hotel site: http://staging.comanchenationcasinos.com
Is there away to do something similar on here? How can I detect what's already in the input field without actually clicking the submit button.
At the same time, how can I trigger the calendar if someone clicks on the icon instead?
Thanks ahead of time.
What I usually do for the calendar link next to the input is something like
$('body').on('click', '.calendar_icon', function(){
$(this).prev('input[type="text"]').focus();
return false;
});
That will drop the focus onto the text input sitting previously in the markup.
Regarding the date resetting, try something like this:
Assuming you have the first input with the id of first_date and the second as second_date...
$('body').on('change', '#first_date', function(){
var this_date = $(this).val();
$('#second_date').datepicker("setDate", new Date(this_date) );
});
Worth noting, you could also attach the two date pickers with data-next-datepicker="#something" to make it really specific if you'd rather not use #second_date. I'd go that route if you had a series of dates on the page.
Please see this link for details http://jsfiddle.net/pakpatel/5p6Uz/4/
Can we do the range in Datepicker, If first date choose [ 10/12/2012 ] then second date shouldn't be before 10/12/2012, Customer can select date after ex.[10/13/2012] in datepicker.
Could anyone explain me how to implement. Thanks in advance.
By using the previous row's data as the new min, it makes it challenging.
Working demo is at http://jsfiddle.net/photo_tom/5p6Uz/24/
There were two things that were required.
Added a computed observable to pass the previous row's choosedate value to the current row.
Added a new minDate binding to set the mindate option on the date picker.
This is not a completed fiddle. It doesn't properly handle adds or deletes. This is because the ko.computables need to be rebuilt.
EDIT:
Updated to handle add / delete methods. Interesting problem, trying to transfer information between two different rows in the table. Good challenge.
Soution at http://jsfiddle.net/5p6Uz/34/.
hi
I have a Jquery Datepicker object that is created fine with no highlighted dates and a particular minDate.
I want to add a highlights to this datepicker based on an AJAX call made by the user, but the only way I can see to change the highlights is adding a function to the beforeShowDay event, which is set on setup.
How can I change this function on an existing datepicker and force it to redraw so that I get my new date(s) to be highlighted.
Many thanks everyone.
Dave
Right the only way I could find to do this is to use the destroy method then redraw the picker with the new method attached to it. If anyone knows a better way of doing this please add it and I'll give you the answer.
Thanks
EDIT: Code...
Setup the picker...
var datePickerSettings = {
beforeShowDate: beforeShowDateMethod
};
var alternateDatePickerSettings = {
beforeShowDate: beforeShowDateMethodAlternate
};
$('#mydiv').datepicker(datePickerSettings);
Then once callback is complete
$('#mydiv').datepicker('destroy')
$('#mydiv').datepicker(alternateDatePickerSettings);
In the end I didn't use the date picker as the requirements changed, but this should solve the problem
Dave
There is the setDate method of the datepicker. I cannot link directly but it is here http://jqueryui.com/demos/datepicker/ under methods