I am using the bootstrap datepicker plugin and everything works great with it (including chosen format, disabled weekdays, etc) but no matter how I pass in a datesDisabled option, the resulting calendar just will not show that date as actually disabled.
Here is my initialization code:
$('#tour_date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
datesDisabled: '2017-08-10',
daysOfWeekDisabled: [0,6],
startDate: '2017-08-01',
endDate: '2018-05-30',
todayHighlight: true,
weekStart: 1,
});
The corresponding input:
<input id="tour_date" name="tour_date" type="text" value="" class="form-
control input-md" required>
I have tried rearranging the header CSS and JS files, changing the position of the initialization code to just before the (which is how it is now) and loading all files from a CDN.
The calendar displays just fine with all other options working as expected. The datesDisabled is the one thing where it just won't actually disable the date.
I eventually want to pass in an array of dates to disable, but this can't even disable one date. Any advice would be greatly appreciated, as I have been pulling my hair out for hours trying to get this to work. I am using this with the AdminLTE admin panel if that makes a difference.
I also came across some Fiddle implementations of the bootstrap datepicker and edited them to fit my code, and it works there! Why does that particular option not work on my setup?
Thank you.
For future reference, my included CSS and JS files were out of date. I simply referenced the most updated versions, and everything worked!
Related
In a model I have a field
filed :my_dt, :naive_datetime
As far as I've found out, in Phoenix there's no Html helper for a date alone which will generate a calendar picker. Therefore, I'm using an html tag for it, and it's on a LiveView page:
<input type="date" name="my_model[my_dt]" value={#my_dt_without_time} />
That is, the time part should always remain 00:00 -- may be ignored, for now. I don't need a time zone either, the UTC should be used.
How will I properly bind a my_dt to the date tag such that
a) it'll show itself properly, whenever my_dt is present in the DB; and
b) it'll get edited and updated properly too
?
I'm aware that it'll require pre-formatting it on backend and post-processing, and this will be ok.
New to meteor , I am using meteor.js to create a simple project like this
I used <input value="{{counter}}" /> to create this input box showing value consistent with the paragraph.And it is working fine as you see.
However as I check the DOM tree in dev tools of chrome, I see <input> instead of <input value="1"> as I supposed it would be.
Why is the attribute value invisible here in DOM tree?Meanwhile,Can someone explain why I can see the number in input box even though I can't find the value attribute in DOM tree?
This is because Meteor packages all your template's js and html files in the same javascript file at build time.
Then the DOM is manipulated through javascript only. And lots of changes made to DOM elements through javascript do not show up in browser's consoles. For example, try to change an element's data attribute with jQuery data() and you won't see any new data-... attribute, same if you change your input's value by typing $('input').val('some value') in the console, the value will change but the value attribute won't show up.
If you open the console in your example (assuming that you are using Chrome, press F12) and switch to "Sources" and then open the only js file named '36dcbdf8917964892be8bca43c71d137318461f5.js' you will see that the value of the input is set through javascript (at line 82):
...
HTML.INPUT({value:function(){return Spacebars.mustache(e.lookup("counter"))}})
...
I have an MVC 4 site using JQuery Mobile. I'm using a model with an EditorFor to render the date editor. in MVC I have this:
#Html.EditorFor(Function(model) model.ActionDate)
The model property is defined as:
<Required>
<RegularExpression("\d{2}/\d{2}/\d{4}", ErrorMessage:="Please enter a date in the format of MM/DD/YY")>
<DataType(DataType.Date)>
<DisplayFormat(ApplyFormatInEditMode:=True, DataFormatString:="MM/dd/yyyy")>
<Display(Name:="Action Date")>
Public Property ActionDate As Date
It renders HTML with the value of:
<input type="date" ... value="04/24/2013" />
But what shows to the user is this:
The date isn't visible to the user, and the 4/24/2013 is not the default of Chrome's date picker. How do I get chrome to actually show the date?
Thanks.
According to the W3C, the value passed to an <input type="date"> element should be in RFC3339 format. This is a specific profile of ISO8601.
In other words, you need to pass the value in yyyy-MM-dd format.
Just hit this exact same problem.
My solution was to avoid the type="date" problem by changing the type to text when I connect the datepicker:
$('#Date').removeAttr('type').attr('type', 'text').datepicker();
If you are not using JQueryUI, just drop the datePicker part.
As I also needed to force the default date format (again thanks to Chrome) it was:
$('#Date').removeAttr('type').attr('type', 'text').datepicker({ dateFormat: 'dd/mm/yy' });
Chrome is now biting us regularly with jQueryUI issues and has gone from being our favourite dev browser to our most troublesome (for compatibility issues).
Hello and thanks in advance for any suggestions.
I am using the grouping option in the Kendo UI and i wanted to change the default grouping message :Drag a column header and drop it here to ...
So i changed the text in 3 .js files called: kendo.all.min.js, kendo.web.min.js, and kendo.groupable.min.js, to the desired text and the text does not change.
I think i'm missing something because when i group and un-group i see my message for a sec but then the grid reloads again and i get the original message again. Is the message coming from the dll or just from java script? hope someone can help it is really important.
Thanks.
If you did it correctly and are loading the modified version of the JS it should work BUT that is not the way for localizing the message... KendoUI (in the latest versions) already has support for it. You should have done:
groupable: {
messages: {
empty: "Custom message text"
}
},
as it is shown in their documentation here
Remember that if you modify their code, next time they release a new version you will have to merge their version with yours for having the fixes and new features that KendoUI team developed plus your changes.
EDIT If you want to have it for every Grid in you document, put at the very beginning of the JavaScript code:
kendo.ui.Groupable.prototype.options.messages =
$.extend(kendo.ui.Groupable.prototype.options.messages,
{empty: "Custom message text!"}
);
I am using fullcalendar from arshaw.com/fullcalendar for displaying events on a corporate intranet calendar. I had the className attribute working, made a couple changes to some code and now cannot figure out why it's not working. Here is the json that is returned from my service
[
{
"allDay":true,
"className":"corporate",
"editable":null,
"end":null,
"id":null,
"start":"2010-07-05T00:00:00.0000000",
"title":"4th of July Holiday (Day Off)",
"url":"\/en\/EmployeeResources\/Calendar\/Corporate\/2010\/07\/4th_of_july_holiday.aspx"
}
]
everything works fine, except for assigning the 'corporate' className to the event items on the calendar.
This is the code that I'm using on document.ready to load the calendar events, which again, works fine, it's just the className's that I'm having trouble with
$("#calendar").fullCalendar('addEventSource', '/layouts/calendar/SitecoreCalendarEventsHandler.ashx?calendar=Corporate')
I'll also note, I'm using the latest version from arshaw.com (1.4.6)
nevermind, it seems that it was being generated, web developer toolbar was not showing the class being added, but when I viewed generated source, that showed the class name. I had some messed up CSS, which was why the style appeared to not be showing up