How to select input date as default in JQuery datepicker? - asp.net

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.

Related

how to change start year from date picker in materillize

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
});

Bootstrap Multiselect stops working after postback

We are working with bootstrap multiselect component in asp.net web forms application. It's works fine on first page load, but curiously, stop working after a page postback / update panel updates the content. The appearance is fine, but the behavior isn't.
Add the following code in your script section. This happens because the bootstrap control will have to be rebounded at every page load.
<script>
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
function PageLoaded(sender, args) {
$(".DDLmultiple").multiselect({
includeSelectAllOption: true
});
}
</script>
Put this code in your script
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
'$('[id*=ddlProducts]').multiselect({ enableFiltering: true, filterBehavior: 'text', includeSelectAllOption: true, includeFilterClearBtn: true, selectAllText: 'Select All', nonSelectedText: 'Select Manufacturers', filterPlaceholder: 'Search Manufacturers', selectedClass: null });
}

Bootstrap Datepicker with Asp.Net Textbox

Maybe it will be a silly question but I couldn't handle my problem. I checked all the questions and answers on here but I didn't find any clue. Anyway, I want to use the bootstrap datepicker with asp.net textbox. When I use it with input without the runat="server" tag, I see that the datepicker shows up, but when I try to use it with textbox with the runat="server" tag, the datepicker is not showing. Any idea on how to solve this issue?
<asp:TextBox ID="DateTextbox" runat="server" CssClass="m-wrap span12 date form_datetime"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function () {
var dp = $("#<%=DateTextbox.ClientID%>");
dp.datepicker({
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr"
});
});
</script>
Thanks for your answers.
thanks for your answers. i did a lil change on my code its working now. i am posting for further use.
<script type="text/javascript">
$(document).ready(function () {
var dp = $('#<%=DateTextbox.ClientID%>');
dp.datepicker({
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr"
}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
});
</script>
but i dont understand whats make the diffrence between (") and (') ?
Try this
<asp:TextBox ID="DateTextbox" ClientIDMode="Static" runat="server" CssClass="m-wrap span12 date form_datetime"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function () {
var dp = $("#DateTextbox");
dp.datepicker({
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr"
});
});
</script>
If you're not against simply using a class, you can leverage the date class on your input, like so:
<script>
$(function () {
$('input.date').datepicker({
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr"
});
});
</script>
The disadvantage is that you're targeting more elements (potentially), but unless you have a crazy number of inputs in your form, it shouldn't make a noticeable difference.

jquery datepicker max date min date control using two date picker

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>

Stop JQueryUI Calendar clearing Asp.net Textbox on postback

This one is starting to bug me and Googleing doesn't seem to be turning up working results for me.
I have a JQueryUI Calendar on an ASP.NET Textbox which always clears the text when a button causes a postback.
The following Javascript creates the calendar
<script language="javascript" type="text/javascript">
$(function () {
$('#TextBoxDatePicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonImage: '../images/cal16.gif',
buttonImageOnly: true
});
$('#TextBoxDatePicker').datepicker({ dateFormat: 'dd/MM/y' });
$('#TextBoxDatePicker').datepicker('option', 'dateFormat', 'dd/MM/y');
$('#TextBoxDatePicker').datepicker({ yearRange: '1900:2323' });
$('#TextBoxDatePicker').datepicker('option', 'maxDate', '0');
$('#TextBoxDatePicker').datepicker('option', 'minDate', '-90y');
$('#TextBoxDatePicker').datepicker('option', 'yearRange', '1900:2323');
});
</script>
<asp:TextBox ID="TextBoxDatePicker" runat="server" ClientIDMode="Static"></asp:TextBox>
And I also have the following on the Page_Load method
ScriptManager.RegisterStartupScript(this.ButtonRegister, typeof(string), "CalendarScript", #"
$(function () {
$('#TextBoxDatePicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonImage: '../images/cal16.gif',
buttonImageOnly: true
});
$('#TextBoxDatePicker').datepicker({ dateFormat: 'dd/MM/y' });
$('#TextBoxDatePicker').datepicker('option', 'dateFormat', 'dd/MM/y');
$('#TextBoxDatePicker').datepicker({ yearRange: '1900:2323' });
$('#TextBoxDatePicker').datepicker('option', 'maxDate', '0');
$('#TextBoxDatePicker').datepicker('option', 'minDate', '-90y');
$('#TextBoxDatePicker').datepicker('option', 'yearRange', '1900:2323');
});", true);
I have tried a number of different options to try and repopulate the textbox but none seem to work.
putting the text value in a session and populating the textbox at the page load
adding the value as an attribute value
adding
"var jobValue = document.getElementsByName('TextBoxDatePicker')[0].value;
$('#TextBoxDatePicker').datepicker('setDate', jobValue);"
to the javascript.
I think the issue is to do with the RegisterStartupScript wiping the values each time but I am not sure how I get round that.
Any help would be greatly appreciated in stopping the textbox values being cleared on a postback.
Thanks in advance.
Okay, I managed to solve this one myself.
Below is what I did, hopefully this will help someone else in the future.
It turns out that the ScriptManager.RegisterStartupScript was the issue, it was wiping the values each time after the page load. So to combat this I changed the script on the Page_Load method to the following...
string CalendarScript = #"
$(function () {
$('#TextBoxDatePicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonImage: '../images/cal16.gif',
buttonImageOnly: true
});
$('#TextBoxDatePicker').datepicker({ dateFormat: 'ddMy' });
$('#TextBoxDatePicker').datepicker('option', 'dateFormat', 'ddMy');
$('#TextBoxDatePicker').datepicker({ yearRange: '1900:2323' });
$('#TextBoxDatePicker').datepicker('option', 'maxDate', '0');
$('#TextBoxDatePicker').datepicker('option', 'minDate', '-90y');
$('#TextBoxDatePicker').datepicker('option', 'yearRange', '1900:2323');";
if (IsPostBack && TextBoxDatePicker.Text != String.Empty)
CalendarScript += "$('#TextBoxDatePicker').datepicker('setDate', '" + TextBoxDatePicker.Text +"');";
CalendarScript += "});";
ScriptManager.RegisterStartupScript(this.ButtonRegister, typeof(string), "CalendarScript", CalendarScript, true);
Essentially I am setting the value of the datepicker to be equal to that of the textbox if it has a value. So anytime there is a postback it will retain that value.

Resources