Is there a way to set the calendar extender, or a method I can call so it always displays the month containing the selected date when the target textbox is clicked? I have found the method to set the selected date, but this does not automatically bring the month of the selected date into view.
You can handle the onClientShown event:
<cc1:calendarextender ID="Calendarextender1"
OnClientShown="clientShown" ...
For example:
<script type="text/javascript">
function clientShown(sender, args) {
var extender= $find('Calendarextender1');
sender.set_visibleDate(extender._selectedDate);
// the following is just to show you some other interesting methods
//sender.set_todaysDate(extender._selectedDate);
//sender.set_selectedDate(extender._selectedDate);
}
</script>
I'm afraid there's no documentation, so try them out.
Related
I'm working on a fullcalendar project.
When I click on a day of my calendar it appeared a modal where you put the name of your event, the start date and end date.
The input for start and end date is a datetime-local and I was looking for a way that when you click on a day and the modal show up in my start input is already visualize the day.
This is my modal and, for example, when I click on 4th of April it appeared directly like this, without me having to put it manually: like this ->example.
I found online this solution to get the clicked date:
dayClick: function(date, jsEvent, view, resourceObj) {
alert(date.format('DD/MM/YYYY 08:00')); //format i decide
},
But i dont know how to applied to my code to have it as input and not alert
I found also this way, I like it better because I can add the hour I want:
var startDateSelected = moment(event.startStr).format("DD-MM-YYYY 08:00:00");
var endDateSelected = moment(event.endStr).format("DD-MM-YYYY 17:30:00");
but still havent found a way to applied to my input datelocal-time
At the end I found this solution:
select: function select(event, date) {
$('#addNewEvent').modal('show');
$('#calendar').fullCalendar('refetchEvents',event._id);
var now = new Date(event);
document.getElementById('starts').value = now.toISOString().slice(0,16);
document.getElementById('ends').value = now.toISOString().slice(0,16);
}
This is the function that open my modal and fecth the events from my database by ID
And the ID mention in getElementById are from my two datetime-local input
I hope someone can find it useful.
It refered to Fullcalendar v3 because that the version the template I'm using have
I'm using the bootstrap datetime picker, the documentation of which can be found here: https://eonasdan.github.io/bootstrap-datetimepicker/Options/
I'm trying to set the selected date to null. I'm able to blank out the date (i.e. 2/10/2019) within the input field, but when I click on the input field and the calendar opens, the old date is still selected in blue. WiThis is my code to de-select all dates within the calendar.
$(document).ready(function() {
$('.removedate').on('click', function(){
$("#id_booking_date").val('') //this correctly removes date from input field
$('.input-group').datetimepicker({
date: new Date(null)
});
});
This code isn't working. Do you know what I should try?
Thanks!
Can you please try to use "useCurrent" option for this? Check it out here https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent
Please try this, they have clearly mentioned here
Working example:
$('#datetimepicker4').datetimepicker({
useCurrent: false,//
});
I have 2 text boxes namely fromDate & toDate for date search , in which by default, current day will be showed.
working code:
Jquery
(document).ready(function () {
$('.dateClass').datetimepicker({timepicker: false}); // css for displaying date without time
$('#fromDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
$('#toDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
});
Struts
<html:text property="fromDate" styleId="fromDateId" styleClass="dateClass" />
<html:text property="toDate" styleId="toDateId" styleClass="dateClass" />
Issue:
By default current day shown in both textboxes, suppose user choose different dates and submit,
db records are fetched and displayed but these 2 texboxes replaced with current dates how to avoid this.
kindly help me to resolve.
Update: There are reports this no longer works in Chrome.
This is concise and does the job:
$(".fromDateId").datepicker('setDate', new Date());
And another thing,
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
I use a calendar from No Gray, found at http://www.nogray.com/calendar.php, and I have realised that the problems I have been having is due to when you click on the same date that has already been selected, it deselects the date instead of reselecting it again and if it is passed through in a form, the value for that field is empty.
I have read up on the use of the software and the options and the only option I can see that may help is the "ng.Calendar.is_selected" found at http://www.nogray.com/api/calendar/is_selected.php, and I am not sure if that is correct, but even on their demo on their own website, it works the same way and deselects the date instead of reselecting it.
I have tried everything but can't get it to perform where if you click the same date that is already selected, it does not deselect the date and just reselects it.
The example is here http://www.nogray.com/example.php?ID=260.
How can this been done please as I have tried now for a week with no joy.
Thank you in advance.
This example might help, but the user won't be able to unselect a date unless they clear the input field.
<input id="forced_click_select" type="text">
<script src="PATH/TO/ng_all.js" type="text/javascript"></script>
<script src="PATH/TO/components/calendar.js" type="text/javascript"></script>
<script type="text/javascript">
ng.ready( function() {
var fcs_cal = new ng.Calendar({
input: 'forced_click_select',
events: {
onDateClick: function(dt){
this.select_date(dt);
}
}
})
});
</script>
http://www.nogray.com/example.php?ID=307
I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.
The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle
I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready