I want to take two date string with textbox or editor in mvc.
The format should be
"MM/yyyy-MM/yyyy".
I need to force the user for entering the input like above format without posting model.
#Html.TextBox("tbxDateRange", "", "{0:dd/MM/yyyy}", new { #class = "form-control dropdown", placeholder = "MM/yyyy - MM/yyyy" })
Above code not working event get just a formatted date string.
The format is working as expected. You are telling tbxDateRange's value (the zero in the third parameter ("{0:dd/MM/yyyy}") to format as day/month/year. It will therefore take the input in the text box and display it in that format.
It is only a display format. It will not enforce this format. For that you will need to do your own client side javascript (since you mentioned without posting the model). You could look at using a masked input element. ASP.NET MVC does not have a masked input out of the box.
You could use a masked input control like maskedinput which is a plugin for jQuery.
Additionally, you might want to look at breaking this up into two controls. One for the start and one for the end. You could consider using the html5 input type of date and you will automatically get a calendar. Although, if the day of the month will be too confusing for your users/UI then you could look at using jquery UI's datepicker and you can configure it to show only month and year.
Once you include jQuery UI in your app you would do something like jQuery UI DatePicker to show month year only.
In that example the winning answer formats the control in such a way to only show the month and year items of the control.
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
i have a few problems with the date-picker, especially regard the date format.
I need to make a date-format like that 'ddMMyyyy' without symbols like slash or minus.
this is my Markup
HTML
<input type="text" datepicker-popup="{{format}}" show-weeks="false" ng-model="Fromdate" show-button-bar='false'>
and that's my format in javascript
JS
$scope.format='ddMMyyyy';
is this the right way to make the format?
Because if i choose the date from the datepicker nothing seems to go wrong but if i type directly the text a errors happens.
the first four number were evaluated like year, so if i type '01022014' i aspect first february 2014 instead the date-picker evaluate 14 of no month (20 is not a month) of the 0102 year.
Second question, i'd like to put the option of the date Picker in the js file and not in the markup, for example:
HTML
<input type="text" datepicker-popup="{{format}}" ng-model="Fromdate" datepicker-options="options">
js
$scope.options={
show-weeks:"false"
show-button-bar:'false'
}
but in that way it seems doesn't work, what is thee right way to do that?
Use Uib-Datepicker
Js:
$scope.dateOptions = {
showWeeks: false,
format: 'ddMMyyyy'
};
HTML:
<uib-datepicker ng-model="selectedDate" datepicker-options="dateOptions" ng-required="true"></uib-datepicker>
I want to programmatically set date for the input with datebox control, For this i know i can use something like this
$(element).trigger('datebox', {'method':'set', 'value':'dateString'});
but this doesn't seem to update the control(i.e when i open the calendar, it is set to current date and not equal to the value in the input field)
EDIT:
based on JTsage's pointers i overwrote the default dateformat to mm/dd/yyyy, using sth like this.
jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
'en': {
dateFormat: '%m/%d/%Y'
}
});
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
useLang: 'en'
});
Then i tried setting the date using sth like this
$(element).trigger('datebox', {'method':'set', value:'07/02/2012'});
but this date is not appearing when i navigate to the page..Interestingly when i tried updating the date from firebug console(being on that page) it updated the field as well as datebox control.
I have no idea why this is happening..Need help, please respond JT
So finally i fixed the issue, by doing this
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%m-%d-%Y',
'overrideHeaderFormat': '%m-%d-%Y'
});
setting the value of the input field explicitly
$(element).val('06-21-2012');
and then refreshing the datebox
$(element).trigger('datebox', {'method':'set', 'value':'06-21-2012'});
I found th solution, try this
$(element).trigger('datebox', { 'method': 'doset' });
Our project using JSF1.2, Icefaces 1.8.2, jQuery UI component datepicker (veresion 1.8.14). Problem with IE7 (Firefox is fine). Problem will happen with following sequence: Select a date (for example, couple days befor doday). Note we have set year range from 1991 to 2012. Our business logic is print a document use that date (in code, called dateOfStudy) as title, once done, in the JSF back bean, I clear the calendar inputext date field to null. Now click datepicker icon again, the year corrtly shows 2011, select any previous month (for example go back to Auguest, 2011), problme happend right here: the year will change to 1991, can not keep at 2011.
The problem will not happen if I do not touch that date field (don't do clear, keep the old date). The problem will still appear even I just change the date font to other color via CSS (seems whenever I touch that field, datepicker will messed up). The problem will not happen if you click today once, or close datepicker, open again.
Seems the datepick need some initializtion after I cleared date?
I attached some code. I have trid method/option like setDate, onChangeMonthYear, beforShowDay, can not solve. Any help is appreciated !!
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq("[id$=fmv]").live('click', function() {
jq(this).datepicker( {
showOn : 'focus',
changeMonth : true,
changeYear : true,
dateFormat : 'mm/dd/yy',
yearRange : '-20:+1',
showButtonPanel : true,
closeText : 'Close'
}).focus();
});
});
</script>
<ice:inputText id="fmv"
style="background-image:url ('../../../jquery/images/calendar1.png');
background-repeat:no-repeat;background-position:right;"
value="#{pItem.dateOfStudy}"
validator="#{pItem.validate}"
partialSubmit="true"
name="fmv"
valueChangeListener="#{pItem.dateChangeListener}">
</ice:inputText>
When backbean clear or change input text in calendar inputText, I think that causes a focus event, and calendar confused under IE7. The reason I am using showOn focus is the code is in a table AJAX display area, so use calendar show on image button not work since the button image will not show when AJAX update comes back (the jQuery calendar will not get called), which force me to use showOn focus. I finally solved this year change problem by adding the following refresh calendar line after the final .focus():
jq(this).datepicker("setDate",jq("[id$=fmv]").datepicker("getDate"));
things working fine now. I am not sure how to make this call only when backbean clean the calendar date, but performance seems ok.
How can I change the selected date of jquery Date picker dynamically on the fly?
I have say created a inline date picker.
Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.
I tried the setDate method, but did not work, and there is not much documentation in the doc.
There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.
What version of jQuery-UI are you using? I've tested the following with 1.6r6, 1.7 and 1.7.1 and it works:
//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.
This example shows of how to use default value in the dropdown calendar and value in the text box. It also shows how to set default value to previous date.
selectedDate is another variable that holds current selected date of the calendar control
var date = new Date();
date.setDate(date.getDate() - 1);
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
defaultDate: date,
onSelect: function () {
selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
}
});
$("#datepicker").datepicker("setDate", date);
Noted that for DatePicker by Keith Wood (http://keith-wood.name/datepickRef.html) the following works - note that the setting of the default date is last:
$('#datepicker').datepick({
minDate: 0,
maxDate: '+145D',
multiSelect: 7,
renderer: $.datepick.themeRollerRenderer,
***defaultDate: new Date('1 January 2008')***
});
$('.date-pick').datePicker().val(new Date()).trigger('change')
finally, that what i look for the last few hours! I need initiate changes, not just setup date in text field!
For some reason, in some cases I couldn't make the setDate work.
A workaround I found is to simply update the value attribute of the given input.
Of course the datepicker itself won't be updated but if what you just look for is to display the date, it works fine.
var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input
This is a old thread but I just want to give some information how I have used. If you want to set today date you can simply apply it like below.
$("#datepickerid").datepicker("setDate", "0");
If you want to set some days before/after the current date then use the symbol -/+ symbol of how many days you want like below.
$("#datepickerid").datepicker("setDate", "-7");
$("#datepickerid").datepicker("setDate", "+5");
This works for me:
$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
please Find below one it helps me a lot to set data function
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');
setDate only seems to be an issue with an inline datepicker used in jquery UI, the specific error is InternalError: too much recursion.
In Html you can add your input field with a date picker like this
<input class="form-control date-picker fromDates" id="myDate" type="text">
and then in java script, initialize your datepicker and set your value to the date like this,
$('.fromDates').datepicker({
maxDate: '0',
dateFormat: "dd/mm/yy",
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );
(In here fromdate attribute shows the previous dates of the current date)
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...
I had a lot of trouble with the setDate method as well. seems to only work in v1. What does seem to work however is using the dpSetSelected method:
$("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());
good luck!
or you can simply have
$('.date-pick').datePicker().val(new Date()).trigger('change')