PHP + jQuery: Apply datepicker to inputs with specific pattern - javascript

I have a big form with at least 5 input date forms.
For example:
<input type="text" id="nameClient" name="nameClient"/>
<input type="text" id="nameRouterID" name="nameRouerID"/>
<input type="text" id="dateInstallation" name="dateInstallation"/>
<input type="text" id="dateConfiguration" name="dateConfiguration"/>
<input type="text" id="dateConfirmationClient" name="dateConfirmationClient"/>
Well, i want to search the entire DOM for %date% word and apply datepicker jQuery plugin, avoiding to create this following lines for each element
<script>
$( "#dateInstallation" ).datepicker();
$("#dateInstallation").datepicker("option", {dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true});
});
</script>';
I think it's possible to know with .find() function and "this" relative, but i'm not familiar. I think is something like this:
$( "text" ).find( "%date%" ).datepicker();
And later:
$(this).datepicker("option", {dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true});
But i can't get it work I am not sure whether it is syntax problem or other

You can use the attribute starts with selector to match ID's starting with date
$('[id^="date"]').datepicker();
or to match any ID containing date, the attribute contains selector
$('[id*="date"]').datepicker();
FIDDLE

Related

Passing value from JQuery Datepicker to code behind

I am using JQuery Datepicker in my .aspx file.
I need to use the date value in my code behind file. This is my function which I want to update a hidden value on my page which I can use in my code behind.
$(function () {
$("#datepicker").datepicker({ minDate: 0,
onSelect: function () {
var dueDate= document.getElementById('dueDate');
dueDate.value = $(this).datepicker('getDate');
}
});
});
My hidden value which I want to update, which is on the same .aspx page:
<Input id="dueDate" type="hidden" runat="server" />
Now in my code behind, I want to use the date like so:
DateTime due= dueDate.Value;
This gives me an error:
Cannot implicitly convert type 'string' to 'System.DateTime'
I get the same error when I use
DateTime due = Convert.ToDateTime(dueDate.Value);
What is the correct way to use the date from Datepicker in the code behind?
DateTime.Parse(...)
or
DateTime.ParseExact(...)
or
DateTime.Parse("01/01 2010");
or use
DateTime.TryParse
if you aren't sure it converts in which type every time, ie. not always a date, so try this 4 and check
Consider having the following code on your .aspx file, removing runat server:
<input type="hidden" id="dueDate" name="dueDate" value="" />
Now make the following change in your jquery datepicker function:
$(function () {
$("#datepicker").datepicker({
minDate: 0,
dateFormat: "dd-mm-yyyy",
onSelect: function() {
$("#dueDate").val() = $(this).datepicker("getDate");
}
});
}
This way the hidden field value of dueDate gets updated whenever the value of your datepicker control is changed. Further since your hidden field now has a name and value attribute associated with it, your code behind would receive its value as a string whenever your form is posted.
Now in your code behind file, create your DateTime object as follows:
string[] dueDateSplit = Request.Form["dueDate"].Split('-');
DateTime due = new DateTime(dueDateSplit[2], dueDateSplit[1], dueDateSplit[0]);
Provide a name for the datepicker
<Input id="dueDate" name = "dueDate" type="hidden" runat="server" />
and use the below
String text = Page.Request.Form["dueDate"]

How to show multiple months in bootstrap-datepicker

How to show two months in a single view of bootstrap-datepicker. Please find the sample code from the following link.
JSFiddle Link
$("#datepicker").datepicker();
Please take a look to the following links :
https://github.com/dangrossman/bootstrap-daterangepicker
http://www.codestore.net/store.nsf/unid/BLOG-20130906-0309
hope this is helps
This will show two months in a single view :
<script>
$( function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 2
});
} );
</script>
<p>Date: <input type="text" id="datepicker"></p>

Combine inline jquery datepicker with an input field?

I know that I can use $('div').datepicker() to get an inline datepicker, but how do I show the datepicker fixed inline underneath its input field?
The alt field option does not work for me because I want the datepicker to also react on a date entered into the input field.
I would need something like the following pseudocode:
<inputfield type="text" id="d" >
<div id="z"></div>
<script> $('#z').datepicker().bindToInputfield($('#d')) </script>
Try this: Working demo http://jsfiddle.net/KRFCH/
The altField option will link to the second field you want! http://jqueryui.com/datepicker/#alt-field
Now note: any change in the input will reflect in the datepicker on change
This should fit your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d'
});
$('#d').change(function(){
$('#z').datepicker('setDate', $(this).val());
});
It's not possible to get the datepicker inline just by using the input field . You need to use a div along with an input to get what you want.
NOTE: Any changes made in the input will reflect in the datepicker
Example Code
<input type="text" id="text" />
<div id="mydiv"></div>
<script>
$('#mydiv').datepicker();
$('#text').change(function(){
$('#mydiv').datepicker('setDate', $(this).val());
});
$('#mydiv').change(function(){
$('#text').attr('value',$(this).val());
});
</script>
Check out this jsfiddle I've created for you: http://jsfiddle.net/v9XCP/

I need javascript to automatically prefix+suffix as it populates a field? I want it to be surrounded with apostrophes?

div with-altfield is a multidatepicker. Upon selection of a date it populates the altfield input. In format, mm/dd/yy,mm/dd/yy,.. I want it to actually populate the input with apostrophes surrounding the date selected. Like, 'mm/dd/yy','mm/dd/yy',... this is my code.
<script type="text/javascript">
$(function() {
$('#with-altField').multiDatesPicker({
altField: '#altField',
});;
});
</script>
</head>
<body>
<div id="with-altField"></div>
<input type="text" id="altField">
</body>
Please help!
Thank you
Si
Just use the dateFormat option. The syntax is explained here.
$('#with-altField').multiDatesPicker({
altField: '#altField',
dateFormat: "''mm/dd/yy''"
});

Get date from url and change selected date on jquery datepicker

after searching for a bit I decided to ask this question.
I have a jquery datepicker that is in a form, and after changing the date and clicking submit the url will look like this: index.php?thedate=12%2F22%2F2012# which is really 12/22/2012. I then need it to extract the url and change the selected date to whatever is in the url. So for my early example of 12/22/2012, the selected date on the calendar would be the 22nd.
Here's my code:
<form method='get' action='#'>
<div id="datepicker"></div>
<input type='hidden' id='thedate' name='thedate' />
<input type='submit' value='SUBMIT' id='submit'/>
</form>
and my javascript:
$( "#datepicker" ).datepicker({
minDate: 0,
onSelect: function(dateText, inst) {
alert(dateText);
document.getElementById('thedate').value=dateText;
}
});
Thanks for any and all help! If you need any more details or specifics, please just ask!
You have to set the date format. Do this:
$( "#datepicker" ).datepicker( "option", "dateFormat", 'mm/dd/yy' );
You also can specify 2 date formats. One for presentation purposes dateformat and another one the real date to use in you application. This last one is the altformat and must be togehter with the altfield, this field is a field that stores the picked date in its alternate format.
$("#datepicker").datepicker({
dateFormat: "mm/dd/yy",
altFormat: "mmddyy",
altField: "#alt-date"
});
<input type="hidden" id="alt-date"/>
Therefore you can use this altField (usually a hiddenField) to store date and send it to the server.
TEST IT

Categories

Resources