I'm using mobiscroll date scroller in an app. I have it set up to initialize to a date I get from the database and set as the value of my input field. Here is my code:
$(function(){
$("#requestDate").scroller({
preset: 'date',
theme: 'jqm',
display: 'modal',
mode: 'scroller',
dateOrder: 'mdyyyy',
dateFormat: 'm/d/yyyy'
});
var requestDate = $("#requestDate").val();
if(requestDate != ""){
requestDate = new Date(requestDate);
$("#requestDate").scroller('setDate', requestDate, true);
}
});
Here is my form field:
<input type="text" name="requestDate" id="requestDate" data-role="mobiscroll" value="2013,7,25" data-mini="true" readonly="" class="ui-input-text ui-body-f ui-corner-all ui-shadow-inset ui-mini">
This shows the date formatted in the text input and defaults to that date when mobiscroll is opened. Except for in Safari. In safari the date shows as NaN/NaN/NaN. How do I fix this?
Thanks!
You don't need to call setDate, just put the date in the correct format as the input value.
See example: http://jsfiddle.net/RQzbw/
Note 1: Use 'mdyy' and 'm/d/yy', yyyy is incorrect (see documentation)
Note 2: .scroller() is deprecated, use .mobiscroll() instead. If you are using an older version, you should upgrade to latest.
Related
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 inherited some code using the jquerymobile datebox. The code so far concentrates on making the application look correct. I need to make it work so that when a date is selected, the server is called with the date and a new page loaded. Most examples just change the date in the page.
The code so far is :-
$('#daycal').live('click', function() {
$('#catchdate').datebox('open');
});
$( "#catchdate" ).bind( "change", function(event, ui) {
$("#test1").val("xyz");
});
And
<div data-role="fieldcontain">
<label for="catchdate">Some Date</label>
<input name="catchdate" type="date" data-role="datebox" id="catchdate" data-options='{"mode":"calbox", "useNewStyle":true, "theme":true, "themeHeader":"f", "themeDateHigh":"f", "themeDatePick":"e", "themeDate":"f", "centerHoriz":true}' />
<input id="test1" type="text"/> <!-- Later changed to a function call -->
</div>
In my simple test I expected the text in the input to change when a date was selected.
I have seen an example using the bind to change event, but I cannot get it to work. In the example I was just changing the value in an input element, later this will be changed to a function call.
I also saw somewhere in my search for an answer, a comment that 'live' was deprecated.
Finally, I thought I could use closeCallback ('Callbacks ('openCallback' and 'closeCallback') are simple to work with...') but could not find any examples of how it should be used.
What changes do I need to make to obtain the functionality I need?
You could try using the close function of the date box, so that when user changes the date selection he makes and closes the date box you can call the server method with the selected date:
$('#DateSelectorId').bind('datebox', function (e, passed) {
if ( passed.method === 'close' ) {
// selected date
var date = $('#DateSelectorId').val();
// make your service method and change page to another page
}
});
think this can fix it
$('#catchdate').on('datebox', function(e, p) {
if ( p.method === 'close' ) {
alert('DO SOMETHING');
}
});
u can go and test it on Fiddle
**i think u need some validation check for input box empty or not
I'm working on some internationalization using jQueryUI. I have a DatePicker control on a form that is properly working in the French language.
When I select a date, for example August 15, 2012, the DatePicker will display 15 Aoû, 2012 as I would expect. My issue however, is that when the form is posted, the value of the DatePicker is posted as '15 Aoû, 2012' which now needs to be translated on the server before it can be saved properly.
My question is, is there a built-in way inside the jQueryUI DatePicker so that I can have it always post to the server in a consistent format, regardless of which language the control is being displayed in? If there isn't a built-in way, what options exist for achieving this?
I realize that I can change the dateformat to something like 08/15/2012 instead of using the textual representation, however this isn't what I want to do.
There's 2 configuration options for that: altField and altFormat. http://api.jqueryui.com/datepicker/#option-altField
If you specify an altField, that field will be updated too, and will have the altFormat.
Normally you will want make the altField a hidden field, soyou can ignore the regular field and send to db the altField.
As you'll have noticed, supplying a dateFormat works well for newly entered dates, but it does not alter the value attribute which was already supplied to the date input field. It took me some time and I'm not sure whether this solution is ideal, but here's my situation explained and the code which solves it. Might help others with the same problem in the future. In my example I'm using dd/MM/yyyy as the display format.
The page contains any number of date input fields, which may or may not already have a value attribute supplied in the format yyyy-MM-dd, as specified by W3C.
Some browsers will have their own input control to handle dates. At the time of writing, that is for instance Opera and Chrome. These should expect and store a date in the abovementioned format, while rendering them according to the client's regional settings. You probably do not want/need to create a jqueryui datepicker in these browsers.
Browsers which don't have a built-in control to handle date input fields will need the jqueryui datepicker along with an 'alt', invisible field.
The invisible, alt input field with the yyyy-MM-dd format must have the original name and a unique id in order for forms logic to keep working.
Finally, the yyyy-MM-dd value of the display input field must be parsed and replaced with its desired counterpart.
So, here's the code, using Modernizr to detect whether or not the client is able to natively render date input fields.
if (!Modernizr.inputtypes.date) {
$('input[type=date]').each(function (index, element) {
/* Create a hidden clone, which will contain the actual value */
var clone = $(this).clone();
clone.insertAfter(this);
clone.hide();
/* Rename the original field, used to contain the display value */
$(this).attr('id', $(this).attr('id') + '-display');
$(this).attr('name', $(this).attr('name') + '-display');
/* Create the datepicker with the desired display format and alt field */
$(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });
/* Finally, parse the value and change it to the display format */
if ($(this).attr('value')) {
var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
$(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
}
});
}
<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
$( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
$( "#datepicker" ).datepicker();
</script>
It appears someone else had this question or a similar one prior to yours.
If you read this stackoverflow answer, the author was trying to show the date in one format and pass the data to MySQL in another format.
The prior answer in that link gets you set up to access the selected value as a variable. Now all you need is to wire in a parseDate to your selected date variable.
<script type="text/javascript">
$('#cal').datepicker({
dateFormat: 'dd M yy',
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
}
});
</script>
Check the parseDate link for settings and formatting.
Hope this helps!
Basically, you should not re-format the date. Instead, you should read JavaScript's Date object from Datepicker, via getDate() method. Then, you need to pass it to server.
The question is how. Basically, what you want is some common format. If you use JSON the answer is very simple, just put date object and JSON's stringify() function will automatically format it to ISO8601.
As you may see from Wikipedia, ISO8601 was designed to interchange date and time reliably, therefore that's what you should use.
It might be helpful to know that modern web browsers support Date object's toISOString() method.
As #Pawel-Dyda mentioned,
There's a
getDate() method
var currentDate = $( ".selector" ).datepicker( "getDate" );
Here's an example of what it returns: Wed Jan 20 2016 00:00:00 GMT+0300.
You can parse it in Javascript, PHP, in SQL or whatever.
MySQL parsing examlple:
select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');
Returns:
2016-01-20 00:00:00
Solution working for ASP.NET
#using (Html.BeginForm("ActionName", "ControllerName"))
{
#Html.HiddenFor(m => m.DateFrom)
#Html.HiddenFor(m => m.DateTo)
<div class="form-group">
#Html.LabelFor(m => m.DateFrom)
<input id="datepicker-date-from" type="text" class="form-control datepicker" value="#Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DateTo)
<input id="datepicker-date-to" type="text" class="form-control datepicker" value="#Model.DateTo.Date.ToString("dd.MM.yyyy")" />
</div>
<input type="submit" class="btn btn-sn btn-primary" value="Download" />
}
#section scripts {
<script type="text/javascript">
$(function () {
$("#datepicker-date-from").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateFrom),
altFormat: "yy-mm-dd"
});
$("#datepicker-date-to").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateTo),
altFormat: "yy-mm-dd"
});
});
</script>
}
I recently found the mobipick calendar and I really like it due to its fast performance.
However I am having some trouble setting the minimum date four days from now.
If you go on the mobipick website, you can add min="..." in the html attribute, but it doesn't specify today's date.
The following code can be found on the website as well,
how can I achieve this?
Javascript/Jquery
<script type="text/javascript">
$(document).ready(function () {
var picker = $("#picker", this);
picker.mobipick();
picker.bind("change", function () {
var date = $(this).val();
// formatted date
var dateObject = $(this).mobipick("option", "date");
});
});
</script>
HTML
<input id="picker" type="text" />
In order to set the min date four days from now, create an input element
<input type="text" />
and add this JavaScript
$( selector ).mobipick({
minDate: (new XDate()).addDays( 4 )
});
You need version 0.6 for this example to work, download or fork at GitHub https://github.com/sustainablepace/mobipick. I've also added a working example at http://mobipick.sustainablepace.net/demo-advanced.html, see section "Datepicker with dynamic min date".
Let me know if this works for you.
I have a very simple html page with the following javascript in it
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});
Then I have the input target element
<input id="datepicker" type="text" class="boxtpl" name="${field.name}" value="${release?.startDate}">
and I see the html of the input from viewing source is valid...
<input id="datepicker" type="text" class="boxtpl" name="release.startDate" value="2012-02-07">
so when I do the GET request to get this page, my date ONLY renders if I delete that last line in the javascript that sets the format WHICH is very important as that is the format I have playframework configured for!!!!! If I don't set the format, the POST then breaks because formats don't match :(
Why is setting the format of datepicker clearing out my date????
I can try scripting more to set it manually though I tried calling the api to set it and that DID NOT work so it might not work doing raw javascript set either...not sure yet. anyone know why this occurs or better yet how to fix it???
thanks,
Dean
Not sure if it's a bug in jquery ui, but it seems that setting the format effectively deletes the default value. You can fix this with a chained
.datepicker("setDate", datepicker_default_val );
However, what I did in my web app was define a CSS class ".datepicker" then writing this code snippet provide date pickers to any with that class.
$( ".datepicker" ).each( function(index){
var datepicker_default_val = $(this).val();
$( this ).datepicker({numberOfMonths: 3, showButtonPanel: true});
$( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
$( this ).datepicker("setDate", datepicker_default_val );
});
What this does is grabs every element with the tagged class, saves the default value to local var datepicker_default_val, sets the formatting, and then restores the value.
Little bit of a hack but put that in a $(document).ready(function(){ }); block and you should be good.
If the input field does not match the default dateFormat, it will simply delete it.
The option setting in the second line is too late then, after the first line it is already deleted.
Solution: Set the dateFormat in the first call:
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd"
});
What do you mean by:
the POST then breaks because formats don't match
Also, I don't quite understand what you mean by your GET and POST requests? Do you mean the form methods? In such case you should amend your HTML code with the surrounding form tags and add a submit button so we can understand exactly what you want and try to reproduce the problem.
Anyway, see if this is what you want : http://jsfiddle.net/DAMEj/
Actually I just included the Jquery UI library in addition to their CSS for a full test of your code.
Besides, I don't get the purpose of these attributes name="${field.name}" value="${release?.startDate}", could you clarify?
And finally, what is it exactly that doesn't work for you?
EDIT:
So according to my last comment about the default date display, please check this out http://jsfiddle.net/sidou/ZUrPj/ and see if it fits your needs.
Happy JS fiddling ;)
If the input value is not parseable by jQuery, it will indeed delete the value from the input field (and even from the altField, if you set one).
For example, this might happen when using different locales. If you set the datepicker dateFormat to 'dd MM yy' and use French localisation, it will parse "10 Mars 2012", however a value of "10 March 2012" will get deleted.
In my case, i found than the JQuery was inyected by a "formoid" solution, soo, i just replace the function where the data was reinjected, adding the line
"value": date.attr("value")
I mixed with the Shaun answer too:
jQuery(".formoid-flat-blue").find('input[type=date]').each(function(){
var date = $(this);
var datepicker_default_val = $(this).val();
var text = $('<input type="text">');
text.get(0).className = date.get(0).className;
text.attr({
"name": date.attr("name"),
"placeholder": date.attr("placeholder"),
"required": date.attr("required"),
"value": date.attr("value")
});
date.replaceWith(text);
text.datepicker({
format: _dateFormat || date.attr("data-format") || 'yyyy-mm-dd'
});
if (datepicker_default_val) {
text.datepicker({
setDate: datepicker_default_val
});
}
});