Once a DatePicker always a DatePicker
-
After finding this ultra-cool Bootstrap `DateTimePicker`, I thought I could simply select all my date-pickers by class, and apply the relevant code for the `DateTimePicker`, and I’d have elegant and working date-time pickers all over. That was during that usual “honeymoon” period when you’ve just found a really cool hammer and can only see nails. That period passes quite quickly and then we’re left to deal with little niggly wrinkles to iron out on your new widget. The first and biggest is that MVC “has already” turned one of my date-time inputs into a built-in browser native date picker. On Edge and Chrome the built-in picker is usable, but not good UX and somewhat unintuitive. I don’t know how other browsers present date and time pickers. If a model property is of `DateTime`, MVC scaffolds an input with type `datetime-local`, and lets the browser deal with the rest. The code to initialize the DateTimePicker is normally simple, just call on your date-time input, like this:
$(".date-picker").datetimepicker();
Now when I did that, something weird happened. When I clicked any date-picker (input with class `date-picker`), I’d see two date-pickers: My new fancy one in the background, and overlaid on top of that, the browser date-picker – in my case Edge. I have to first make the input a normal text input, and then the fancy DateTimePicker, for things to work as wanted, with the 3rd party date-picker in charge:
$(".date-picker").attr("type", "text"); $(".date-picker").datetimepicker();Now I have one last “little” problem. When I click on one of my date-picklers, I get a history dropdown of recently used dates, but I suspect it is the browser’s date-picker doing this, because it drops down over my date-picker rendering it useless. Fortunately, a second click shows my date-picker without the dropdown.
"'Do what thou wilt...' is to bid Stars to shine, Vines to bear grapes, Water to seek its level; man is the only being in Nature that has striven to set himself at odds with himself." —Aleister Crowley
-
After finding this ultra-cool Bootstrap `DateTimePicker`, I thought I could simply select all my date-pickers by class, and apply the relevant code for the `DateTimePicker`, and I’d have elegant and working date-time pickers all over. That was during that usual “honeymoon” period when you’ve just found a really cool hammer and can only see nails. That period passes quite quickly and then we’re left to deal with little niggly wrinkles to iron out on your new widget. The first and biggest is that MVC “has already” turned one of my date-time inputs into a built-in browser native date picker. On Edge and Chrome the built-in picker is usable, but not good UX and somewhat unintuitive. I don’t know how other browsers present date and time pickers. If a model property is of `DateTime`, MVC scaffolds an input with type `datetime-local`, and lets the browser deal with the rest. The code to initialize the DateTimePicker is normally simple, just call on your date-time input, like this:
$(".date-picker").datetimepicker();
Now when I did that, something weird happened. When I clicked any date-picker (input with class `date-picker`), I’d see two date-pickers: My new fancy one in the background, and overlaid on top of that, the browser date-picker – in my case Edge. I have to first make the input a normal text input, and then the fancy DateTimePicker, for things to work as wanted, with the 3rd party date-picker in charge:
$(".date-picker").attr("type", "text"); $(".date-picker").datetimepicker();Now I have one last “little” problem. When I click on one of my date-picklers, I get a history dropdown of recently used dates, but I suspect it is the browser’s date-picker doing this, because it drops down over my date-picker rendering it useless. Fortunately, a second click shows my date-picker without the dropdown.
"'Do what thou wilt...' is to bid Stars to shine, Vines to bear grapes, Water to seek its level; man is the only being in Nature that has striven to set himself at odds with himself." —Aleister Crowley
-
somehow weired. Is the code correct? :confused:
Press F1 for help or google it. Greetings from Germany
What code? My little two lines of JS that fix things? There is no other code involved in this problem.
-
After finding this ultra-cool Bootstrap `DateTimePicker`, I thought I could simply select all my date-pickers by class, and apply the relevant code for the `DateTimePicker`, and I’d have elegant and working date-time pickers all over. That was during that usual “honeymoon” period when you’ve just found a really cool hammer and can only see nails. That period passes quite quickly and then we’re left to deal with little niggly wrinkles to iron out on your new widget. The first and biggest is that MVC “has already” turned one of my date-time inputs into a built-in browser native date picker. On Edge and Chrome the built-in picker is usable, but not good UX and somewhat unintuitive. I don’t know how other browsers present date and time pickers. If a model property is of `DateTime`, MVC scaffolds an input with type `datetime-local`, and lets the browser deal with the rest. The code to initialize the DateTimePicker is normally simple, just call on your date-time input, like this:
$(".date-picker").datetimepicker();
Now when I did that, something weird happened. When I clicked any date-picker (input with class `date-picker`), I’d see two date-pickers: My new fancy one in the background, and overlaid on top of that, the browser date-picker – in my case Edge. I have to first make the input a normal text input, and then the fancy DateTimePicker, for things to work as wanted, with the 3rd party date-picker in charge:
$(".date-picker").attr("type", "text"); $(".date-picker").datetimepicker();Now I have one last “little” problem. When I click on one of my date-picklers, I get a history dropdown of recently used dates, but I suspect it is the browser’s date-picker doing this, because it drops down over my date-picker rendering it useless. Fortunately, a second click shows my date-picker without the dropdown.
"'Do what thou wilt...' is to bid Stars to shine, Vines to bear grapes, Water to seek its level; man is the only being in Nature that has striven to set himself at odds with himself." —Aleister Crowley
Brady Kelly wrote:
I don’t know how other browsers present date and time pickers.
Can I use... Date and time input types[^] <input type="date"> - HTML | MDN[^] IE, Firefox and Safari currently don't support them at all. Support is apparently being added in Firefox 57.
Brady Kelly wrote:
$(".date-picker").attr("type", "text");
That's going to break in old versions of IE - v8 and earlier, IIRC. If you need to support those older versions, you need to replace the
<input>element, rather than changing itstype.Brady Kelly wrote:
When I click on one of my date-picklers, I get a history dropdown of recently used dates,
Sounds like you need to disable autocomplete. Add
autocomplete="off"to the attributes:@Html.EditorFor(m => m.YourDateField, new { htmlAttributes = new { autocomplete = "off" } })
It would probably be easier to create a custom editor template for
DateTimevalues: ASP.NET MVC display and editor templates - Growing with the Web[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Brady Kelly wrote:
I don’t know how other browsers present date and time pickers.
Can I use... Date and time input types[^] <input type="date"> - HTML | MDN[^] IE, Firefox and Safari currently don't support them at all. Support is apparently being added in Firefox 57.
Brady Kelly wrote:
$(".date-picker").attr("type", "text");
That's going to break in old versions of IE - v8 and earlier, IIRC. If you need to support those older versions, you need to replace the
<input>element, rather than changing itstype.Brady Kelly wrote:
When I click on one of my date-picklers, I get a history dropdown of recently used dates,
Sounds like you need to disable autocomplete. Add
autocomplete="off"to the attributes:@Html.EditorFor(m => m.YourDateField, new { htmlAttributes = new { autocomplete = "off" } })
It would probably be easier to create a custom editor template for
DateTimevalues: ASP.NET MVC display and editor templates - Growing with the Web[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Thanks for all the info. I suppose I should test on more than just Edge and Firefox, but it's a hobby project. I don't care if anything IE8 or prior breaks, so replacing the type is good for me, but the best is the autocomplete. I never knew there was such and attribute, thanks. It has crossed my mind several times to use a template, but I want to get the rendered HTML correct first.
"'Do what thou wilt...' is to bid Stars to shine, Vines to bear grapes, Water to seek its level; man is the only being in Nature that has striven to set himself at odds with himself." —Aleister Crowley
