I am using the jQuery DatePicker control in an ASP.NET MVC application.
I created a control called DateTime.ascx, so that whenever I call the Html.TextBoxFor() method passing it a field of type DateTime, this control comes into play, and a textbox+datepicker is rendered, overriding the standard functionality which produces just a textbox.
This is the control:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%=Html.TextBox("",
(Model.HasValue ? Model.Value.ToString("MM/dd/yyyy") : DateTime.Today.ToShortDateString()),
new { #class = "UseDatePicker" } )%>
And here is an example call:
<%: Html.EditorFor(model => model.Project.IssueDate)%>
Now, I also include on the master page a script called DatePickerConfig.js which, well, configures the datepicker. Here it is:
$(document).ready(function () {
$(".UseDatePicker").live('click', function () {
$(this).datepicker('destroy').datepicker({
showOn: "both",
buttonImage: "../../Content/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true
}).focus();
});
});
Now, my problem: when the page loads, only a text box appears for editing the datetime field. When I click on the textbox, the calendar pops out as expected, and at the same time the button image appears. What I would like is for the buttonn image to be visible as soon as the page loads, and before the user starts to interact with the control.
Thanks.
The problem is you aren't binding the datepicker until you click on the textbox, so there is no button to bind until that loads. You should just bind the datepicker, Is there a reason you unbind and rebind on every button click? Per your current explanation, this would make more sense:
$(document).ready(function () {
$(".UseDatePicker").each(function(i) {
$(this).datepicker({
showOn: "both",
buttonImage: "../../Content/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true
});
});
});
This will go through each field expecting a datepicker and bind the picker to that textbox.
Related
I have a situation like when status changes, the dialog window will open. In that dialog window I have 3 date fields. I used SugarCRM's default date picker. But when I want to change the year and month, the selector/input is not working. In fact on clicking these, the mouse pointer focuses in the first input field.
My code is below:
$.each(calenderSets, function(index, value){
Calendar.setup ({
inputField : index,//input field Id
ifFormat : cal_date_format,
daFormat : cal_date_format,
button : value,//calender icon ID
singleClick : true,
dateStr : "",
step : 1,
weekNumbers:false
});
});
And Dialog window:
dialog = new YAHOO.widget.Dialog('dialog1', {
width: winWidth,
fixedcenter : "contained",
visible : false,
draggable: true,
position: 'absolute',
close:true,
centered: true,
/*effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE, duration:0.2},
{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.2}],*/
modal:true
});
dialog.setHeader("All * marked fields are required");
dialog.setBody(Body here);
dialog.setFooter('<button title="save" type="button" class="report-scheduler-btn" name="save" onClick="saveInvoiceDetails()">Save</button>');
dialog.render(document.body);
dialog.show();
setCalenderToDateFields();
I just found and fixed this issue by adding the following to custom/themes/default/css/style.css:
.yui-calcontainer .yui-cal-nav {
z-index: 1001;
}
Because my date picker (as is yours) is within a UI dialog container, the default z-index of 3 in the .yui-cal-nav class isn't high enough to interact with the form fields in the date nav section (despite being able to see them). The overlay for my UI dialog has a z-index of 1000, so setting the z-index of .yui-cal-nav to 1001 put it high enough that I could interact with the form fields.
In most of my grids, if I want to perform a "custom operation" that displays some data in a jqGrid modal form and allow the users to click "submit" to do something, I am able to simply leverage the existing "Edit" operation and tweak it to my needs.
However, I am working on a grid where the Add, Edit, and Delete operations are all in use, and I need an additional "custom operation" that opens a jqGrid modal form to display a couple of the columns along with a submit button to send the key ID to the target URL.
Normally this is very easy to simply re-task the Edit function, but since Edit is in use, I'm not sure how to do this. Does jqGrid have a proper method for creating new custom operations that display modal forms just like Edit does?
In the end, I was not able to find a way to do this through "core" jqGrid features and ended up simply adding a new button to the grid which opens my own custom modal box.
The multi-select features of jqGrid were also used to allow the user to select multiple records to be passed off to this custom function when the new button is clicked.
Here was the code for adding the button to jqGrid. The AJAX call retrieves the HTML content for the modal that is being populated (in JSON format):
.navButtonAdd('#listAllSupplierPurchasesGridPager', {
caption: "Mark Paid",
buttonicon: "ui-icon-add",
onClickButton: function () {
var s;
s = $("#listAllSupplierPurchasesGrid").jqGrid('getGridParam', 'selarrrow');
if (s.length > 0) {
// Make AJAX call to get the dynamic form content
$.ajax({
cache: false,
async: true,
type: 'POST',
url: "/TargetItems/MarkPurchasesPaidRequest",
data: {
PurchaseIds: JSON.stringify(s)
},
success: function (content) {
// Add the content to the div
$('#MarkPurchasePaidModal').html(content);
// Display the modal
$("#MarkPurchasePaidModal").dialog("open");
},
error: function (res, status, exception) {
alert(status + ": " + exception);
},
modal: true
});
}
},
position: "first"
})
The jQuery for setting up the basic modal box:
$("#MarkPurchasePaidModal").dialog({
autoOpen: false,
width: 768,
autoheight: true,
show: {
effect: "blind",
duration: 250
},
modal: true
});
And the div HTML to hold the modal:
<div id="MarkPurchasePaidModal" role="dialog" title="Mark Purchases Paid" class="container"></div>
Is it possible to have 2 different styles for Popups in Leaflet? 2 different popups (in terms of style and content) will be triggered on user interaction, one on mouseover and one on click.
Problem: I tried overiding the CSS style for .leaflet-popup-content-wrapper' in the stylesheets which works for one popup style, that was not able to switch the CSS styles at runtime to switch back and forth between 2 CSS styles, probably because the popup DOM elements were not loaded yet.
marker.on('mouseover', function() {
marker.bindPopup('<b>Hello world</b>');
marker.openPopup();
})
marker.on('click', function() {
marker.bindPopup('<b>Click click</b>');
marker.openPopup();
// Failed attempt to switch style
$('.leaflet-popup-content-wrapper').addClass('new-style');
})
The bindPopup method can be passed an "options" parameter which can contain a "className" attribute that will be added to the div for the popup:
marker.on('mouseover', function() {
marker.bindPopup('<b>Hello world</b>',{className: 'mouseover-popup'});
marker.openPopup();
})
marker.on('click', function() {
marker.bindPopup('<b>Hello world</b>',{className: 'click-popup'});
marker.openPopup();
})
I have an HTML5 page with several data inputs inside a jQuery Dialog box. I sweep this data into form processing with the input attribute form=dataInput. It works fine in Firefox and Chrome, but not in IE because IE does not support the input form attribute. Something about the Dialog widget makes input box elements 'invisible' to form processing. The form attribute fixes this for browsers that support HTML5, but no released IE has this support. I tried $('.ui-dialog').appendTo('form'); in the Dialog open: option, but it does not fix the problem. Is there a way to get IE to sweep input data out of a Dialog widget and into $_POST ?
Here is a sample of an input box inside the Dialog
<label><input type="radio" id="unitedStates" name="country" form="dataInput" value="US">United States</label>
I use the jQuery Form plug-in to perform the submit. It has some options, like beforeSubmit and beforeSerialize, but I don't understand the documentation or the submit process well enough to know if they can be used to solve this problem. Please be specific with code or tutorials. I'm new enough to this that I don't follow general instructions well. ;-) (BTW, IE has the other feature support I need, just not this one.)
Here's my code with Andrew Hagner's suggestion and my modification. Dialog works, but IE does not set a value for the country. What needs to change?
var countrySelected = $("input[type=radio][name=country]").val(); //set earlier by W3C geocoding
var countryChooser = $('#countryChoices').dialog( {
autoOpen: false,
bgiframe: true,
height: 300,
width: 850,
resizable: false,
draggable: true,
title: "Click to select another country",
open: function () {
$('#regions').tabs(
{
event: "mouseover",
})
},
buttons: {
'Close / continue location input': function ()
{
countrySelected = $('input[name=country]:checked').val();
$(this).dialog('close');
}
}
});
//then later on
getCityFromGeonames3Step(countrySelected);
Updated:
// Before you enter dialog, assign the element you will
// be grabbing the info from to a variable.
var countrySelectionElement = $("input[type=radio][name=country]").val();
var countrySelected = "";
var countryChooser = $('#countryChoices').dialog( {
autoOpen: false,
bgiframe: true,
height: 300,
width: 850,
resizable: false,
draggable: true,
title: "Click to select another country",
open: function () {
$('#regions').tabs(
{
event: "mouseover",
})
},
buttons: {
'Close / continue location input': function ()
{
// Since jQuery won't work in here, use the variable
// we assigned above to access value.
countrySelected = countrySelectionElement.val();
$(this).dialog('close');
}
}
});
//then later on
getCityFromGeonames3Step(countrySelected);
Original:
Before you open the dialog assign the input to a variable:
function OpenDialog()
{
var input = $("yourinput");
// Open dialog, use input to work with that element.
// If you want you can then place the entered data in a hidden field
// using jQuery, in the same way we are using input here. Then you will
// be able to post that data back however you like.
}
I had this problem the other day, I found this solution on jQuery's Dialog site.
http://jqueryui.com/demos/dialog/#modal-form
I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
var form = this;
settings.onblur = function(e) {
t = setTimeout(function() {
original.reset.apply(form, [settings, self]);
}, 100);
};
$(this).find('input').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-y',
closeAtTop: true,
onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
});
},
submit : function(settings, original) { }
});
$(function() {
$('.edit_eta').editable('update_must_fix_eta.php', {
id: 'bugid',
name: 'eta',
type: 'datepicker',
event: 'click',
select : true,
width: '50px',
onblur:'cancel',
cssclass : 'editable',
indicator : 'Updating ETA, please wait.',
style : 'inherit',
submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1}
});
});
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.
Have you tried jeditable-datepicker plugin? It seems to do exactly what you need.
It enables jQuery UI Datepicker in Jeditable. Here's the demo.
Yes, I was using the same. I had to disable Prev and Next buttons which navigate to previous and next months respectively. I display 3 months calendar when the link is clicked and if the user wants to enter a date which does not fall in any of these 3 months I let him enter it manually by making the input text box editable. That solved my problem.