I am using Datepicker for Bootstrap v1.6.4 in my asp.net mvc application.
This is my code to show the date:
HTML:
<div id="datepicker"></div>
JavaScript:
$input = $("#datepicker");
$input.datepicker({
format: 'dd MM yyyy'
});
$input.data('datepicker').hide = function () { };
$input.datepicker('show');
As I want to show full datepicker selection but in output it is showing me two datepickers.
OUTOUT:
Don't have any solution anywhere I have searched a lot and this behavior is also awkward don't know but this should ideally not happen but in my case, it is happening.
Any solution will be appreciated.
Thanks in advance.
Related
I don't know why I can't wrap my head around how to use Material UI's DatePicker. It seems that the documentation is not complete? Am I correct?
Here is the basic example I have:
import {DatePicker, MuiPickersUtilsProvider} from '#material-ui/pickers';
import DateFnsUtils from "#date-io/date-fns";
... somewhere in the render:
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
id="date"
value="2017-05-24"
allowKeyboardControl={false}
autoOk={true}
/>
</MuiPickersUtilsProvider>
At first I got errors that 'n' something something wasn't working, and that is because either date-io or date-fns (the newer versions) wheren't supported. After downgrading.. I got told that the _onChange is not a function. I randomly thought that I could add an empty onChange={()=>{}} to get that error to go away and it did. Now I am noticing that when I actually select a date, the DatePicker date displayed on my page doesn't update to the new date.
So.. am I supposed to supply an onChange event? Why is that not clear anywhere?
Also, is the date supposed to be updating by default, or is my onChange supposed to do that?
UPDATE:
So.. it turns out this page that documents Material UI Pickers has a "View Code" icon under their examples (https://material-ui.com/components/pickers/).
So that shows how to handle the onChange. I wish it was more obvious in this documentation.
Use #date-io/date-fns of v1.x
Pass required onChange callback:
function BasicDatePicker(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<DatePicker
value={selectedDate}
onChange={handleDateChange}
/>
);
}
Here is working example
I am generating line graphs of meteorological data using Dygraphs, and would like to implement a date range picker so that users can input a specific date or range of dates and see the data represented in said graph. I have scoured various websites and JSFiddle examples for other charting libraries which have not worked correctly (or in some cases at all).
Here is a Fiddle of my current graph. I have found the following code for creating the datepicker. Now I just need to implement it.
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
Can someone point me in the right direction? Many thanks.
Given the pop-up example at http://plnkr.co/edit/idrirF9zxvCMCQWTk8nr?p=preview how do I actually get the date if the user changes it?
I am guessing that I should do it in $scope.open = function($event) but I just don't know how. I have searched this site & googled extensively. What did I miss? Thanks.
you plunk link is not working.
I don't know what exactly happen in your code.
I think maybe your miss ng-model,
ng-model is the way to do two-way data binding in angular .
for example
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")
you can get data by $scope.dt
if you want to watch the date change
you can do
$scope.$watch('dt',function(val){
//to do
console.log(val)
})
Hi we use a simple kendo datepicker for our web application.
$("#DateInput").kendoDatePicker({
format: "dd/MM/yyyy",
culture: "en-GB",
max: new Date()
});
Now when we try to get the datepicker value in Javascript my browser gives me date format dd/MM/yyyy but my colleague's browser gives him MM/dd/yyyy. We have tried to use same culture as you can see in kendo and as well as in our web.config we have put the globalization settings as follows.
<system.web>
<globalization uiCulture="en-GB" culture="en-GB" />
</system.web>
My computer's date format and settings are as follows;
Region & Language format: English(United Kinddom)
Keyboard Layout: English(United Kingdom)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+6
My colleague's date format and settings are;
Region & Language format: English(Australia)
Keyboard Layout: English(Australia)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+8
Last bit of information, we are using Chrome for testing on both places. It is probably the UTC problem. I want the date format in "dd/MM/yyyy" for both occasion. Any workable solution will be highly appreciated. Thanks.
Try to add this code at top of your page before you gonna render any kendo widget:
kendo.culture("en-GB");
It should forced kendo widgets to work in all location using en-GB culture.
If you're using ASP.MVC I recommend add it in "_Layout.cshtml" like:
<head>
...
<script src="#Url.Content("~/Scripts/jquery/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/kendo.all.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.pl-PL.min.js")"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.de-DE.min.js")"></script>
<script type="text/javascript">
kendo.culture("en-GB");
</script>
//widgets create scripts for your views if you write it here
</head>
Detail on globalization can be found on this link:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/globalization
If your intention is to convert the date into your desired format "dd/MM/yyyy" and if your kendo grid is not providing you the correct result in different places, create your own. Some thing like this.
In Json:
var FixedDateFormat = "PlodDate: '" + (Date.getUTCDate() + 1) + "/" + (Date.getUTCMonth() + 1) + "/" + Date.getUTCFullYear() + " 00:00:00";
Here I have added 1 on Date and Month cause getUTCDate/Month starts from 0. As you have said in comments you are accepting the date as string and then converting that back to DateTime so I've added the time " 00:00:00".
In MVC: You probably need to do something like following to convert;
DateTime X = Convert.ToDateTime(PlodDate);
UPDATE
I've got a better solution for you on JS. You are reading datepicker value with something like this, right??
$("#YourDatePickerName").data("kendoDatePicker").value()
Here you can tell your browser what local you want to use like the following
$("#YourDatePickerName").data("kendoDatePicker").value().toLocaleString("en-GB");
Which will generate exact same result for every culture.
Further Update
If you want to do it Kendo's way then you can use kendo.toString(). You can check it here.
Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>