Comments (11)
fooloomanzoo
commented on September 23, 2024
1
JavaScript's DateTime is using milliseconds, because it is using iso8086-Format, like this element. So the datetime-String would not be correct, if you add microseconds, so I would guess, it might be the best to extend the element and add a new property. The clamp-attribute also needs to be handled differently then, so the datetime-mixin must be changed for that. Determing now() would also be a bit differerent. But I look into it!
from datetime-picker.
fooloomanzoo
commented on September 23, 2024
1
This should work:
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../input-picker-pattern/overlay-picker-mixin.html">
<link rel="import" href="../datetime-picker/time-picker.html">
<dom-module id="mu-picker">
<script>
/**
* @customElement
* @polymer
*
* @appliesMixin OverlayPickerMixin
* @extends TimePicker
*
**/
class MuPicker extends OverlayPickerMixin(TimePicker) {
static get is() {
return 'mu-picker';
}
static get properties() {
return {
microseconds: {
type: Number,
value: 0,
notify: true
},
clamp: {
type: String,
value: ''
},
hour12: {
type: Boolean,
value: false,
readOnly: true
}
}
}
static get replacementInputTemplate() {
return `
${super.replacementInputTemplate}
<number-input hidden$="[[_hideMilliseconds]]" value="{{microseconds}}" min="0" max="999" disabled="[[disabled]]" placeholder="000"></number-input>
`;
}
static get timeTemplate() {
return `
<div id="timer" hidden$="[[_hideHours]]">
<div class="field" hidden$="[[_hideHours]]">
<svg class="icon switch" viewBox="0 0 24 24" prop="Hours" step="1"><g><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g></svg>
<number-input hidden$="[[hour12]]" index="5" min="0" max="23" pad-length="2" value="{{hours}}" placeholder="00"></number-input>
<number-input hidden$="[[!hour12]]" index="5" min="1" max="12" pad-length="2" value="{{hours12}}" placeholder="00"></number-input>
<svg class="icon switch" viewBox="0 0 24 24" prop="Hours" step="-1"><g><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g></svg>
</div>
<span hidden$="[[_hideMinutes]]">[[_localTimeSeparator]]</span>
<div class="field" hidden$="[[_hideMinutes]]">
<svg class="icon switch" viewBox="0 0 24 24" prop="Minutes" step="1"><g><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g></svg>
<number-input min="0" max="59" index="7" pad-length="2" value="{{minutes}}" placeholder="00"></number-input>
<svg class="icon switch" viewBox="0 0 24 24" prop="Minutes" step="-1"><g><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g></svg>
</div>
<span hidden$="[[_hideSeconds]]">[[_localTimeSeparator]]</span>
<div class="field" hidden$="[[_hideSeconds]]">
<svg class="icon switch" viewBox="0 0 24 24" prop="Seconds" step="1"><g><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g></svg>
<number-input index="9" pad-length="2" min="0" max="59" value="{{seconds}}" placeholder="00"></number-input>
<svg class="icon switch" viewBox="0 0 24 24" prop="Seconds" step="-1"><g><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g></svg>
</div>
<span hidden$="[[_hideMilliSeconds]]">[[_localDecimalSeparator]]</span>
<div class="field" hidden$="[[_hideMilliSeconds]]">
<svg class="icon switch" viewBox="0 0 24 24" prop="Milliseconds" step="1"><g><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g></svg>
<number-input index="11" pad-length="3" min="0" max="999" value="{{milliseconds}}" placeholder="000"></number-input>
<svg class="icon switch" viewBox="0 0 24 24" prop="Milliseconds" step="-1"><g><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g></svg>
</div>
<div class="field" hidden$="[[_hideMilliSeconds]]">
<svg class="icon switch" viewBox="0 0 24 24" prop="Microseconds" step="1"><g><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g></svg>
<number-input class="time" index="13" pad-length="3" min="0" max="999" value="{{microseconds}}" placeholder="000"></number-input>
<svg class="icon switch" viewBox="0 0 24 24" prop="Microseconds" step="-1"><g><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g></svg>
</div>
<div class="am-switch" hidden$="[[!hour12]]" on-mouseup="_switchAm">
<span hidden$="[[!isAm]]">[[_am]]</span>
<span hidden$="[[isAm]]">[[_pm]]</span>
</div>
</div>
`
}
_incremProp(prop, step) {
if (prop === 'Microseconds') {
this._stopActiveJob();
this._activeJob = setInterval(() => {
this.microseconds += (+step);
}, 15);
} else {
super._incremProp(prop, step);
}
}
}
window.customElements.define(MuPicker.is, MuPicker);
</script>
</dom-module>The microseconds would be not considered, when computing the date, but you could connect it to another element like attr="[[datetime]][[microseconds]]". You could also go even deeper on DatetimeMixin-level to overwrite a function.
from datetime-picker.
diregraph
commented on September 23, 2024
Thank you very much.
from datetime-picker.
diregraph
commented on September 23, 2024
Thank you very much. This is exactly the kind of thing I was looking to implement.
attr="[[datetime]][[microseconds]]" can be used to get the picked value.
Cheers! 👍
from datetime-picker.
fooloomanzoo
commented on September 23, 2024
@diregraph You are welcome. There were some mistakes also, that I corrected now
from datetime-picker.
diregraph
commented on September 23, 2024
Mistakes in the code you mentioned above or other?
I've been experimenting with your new code (mu-picker) and I found out that increment swtiches (<svg class="icon switch" viewBox="0 0 24 24" prop="Microseconds" step="-1"><g><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g></svg>) are not incrementing. I tried fixing(still trying to) _incremProp without any luck.
from datetime-picker.
fooloomanzoo
commented on September 23, 2024
I changed it the code above, because I also noticed that the switches were not working. This should basically work.
from datetime-picker.
diregraph
commented on September 23, 2024
I used the updated code. Still not working. I will keep trying.
from datetime-picker.
diregraph
commented on September 23, 2024
Hey @fooloomanzoo , there is some problem with the code above. The overridden _incremProp method is not behaving as your original code as it seems to me. When I remove the overridden method the mu-picker works fine for others except microseconds (This is an obvious fact, sorry for that). I am not making any headway. I would be much obliged if you could give me any insight.
Thank you!
from datetime-picker.
fooloomanzoo
commented on September 23, 2024
@diregraph Sorry, I didn't the time last days. The problem in the code was, that it did try to add a String to the property. Attributes are Strings and so this mistake happened.
The solution is no cast it:
this.microseconds += (+step);
An other mistake in the code was, that the function didn't call the super class function with arguments. So it would be correctly:
super._incremProp(prop, step);
I updated the code in the comment before. Please update your dependencies, because of the different focus behavior. Regards!
from datetime-picker.
diregraph
commented on September 23, 2024
Great, it works. Thank you very much @fooloomanzoo.
from datetime-picker.
Related Issues (20)
- DatetimePolyfillPickerMixin is not set on the window object like other mixins. HOT 1
- Polymer 3.0 support? HOT 6
- Feature request: hide reset button HOT 1
- Quitting editing, or resetting field to null HOT 1
- Feature request: fire event on value reset HOT 2
- Clamp values incorrect in the documentation HOT 1
- calendar-element When confirm, it autoSubmit form HOT 3
- Calandar element submit my form automatically HOT 1
- Change width of overlay-datetime-picker HOT 1
- npm installation fails HOT 2
- i've got a widget I need HOT 1
- Typing values manually HOT 6
- onchange event (from lit-element) HOT 7
- Style input to fit Twitter Bootstrap HOT 1
- Dead links in readme.md
- ES6 with Polymer 2 HOT 1
- input-picker-closed Not Triggering Function
- date-picker Stops Navigating
- Not able to use with-timezone , errors if the timezone is active
- Disable double click feature
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from datetime-picker.