Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added events (show, cancel and select) as well as some ways to customize the datepicker's input #1

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Added events (show, cancel and select) as well as some ways to customize the datepicker's input #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dee9d3a
Import CSS classes and pre-input content
dadisn Nov 3, 2014
bc72078
Added show, cancel and select events
dadisn Nov 3, 2014
39851c8
Don't use a emitDelayable for the select event
dadisn Nov 6, 2014
bffe922
Added a "preselect" event (delayable) that fires directly when a user…
dadisn Aug 20, 2015
64f4a2e
Only fire "cancel" event when the datepicker is shown
dadisn Aug 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions src/datepicker.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,13 @@ module.exports = class Datepicker extends ViewHelpers
create: (model, dom) ->
global.moment = moment
dom.on "click", (e) =>
model.set "show", true if @parent.contains(e.target)
if @parent.contains(e.target)
model.set "show", true, =>
@emit "show"
dom.on "mousedown", (e) =>
model.set "show", false unless @parent.contains(e.target)
unless @parent.contains(e.target) or not model.get "show"
model.set "show", false, =>
@emit "cancel"

gotoMonthView: (date) ->
@setCurrentDate date
Expand Down Expand Up @@ -78,13 +82,16 @@ module.exports = class Datepicker extends ViewHelpers
@gotoDecadeView nextDecadeDate

select: (selectedDate) ->
date = moment(selectedDate.fullDate)
selectedMonth = date.month()
currentDate = moment(@getCurrentDate())
currentMonth = currentDate.month()
@gotoMonthView date if selectedMonth isnt currentMonth
@model.set "active", selectedDate.fullDate
@model.set "show", false
@emitDelayable "preselect", =>
previousDate = @model.get "active"
date = moment(selectedDate.fullDate)
selectedMonth = date.month()
currentDate = moment(@getCurrentDate())
currentMonth = currentDate.month()
@gotoMonthView date if selectedMonth isnt currentMonth
@model.set "active", selectedDate.fullDate
@model.set "show", false
@emit "select", previousDate

prevMonth: ->
# get current month
Expand Down
5 changes: 3 additions & 2 deletions views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<index: element="datepicker">
<div class="datepicker {{if inline}}datepicker-inline{{/}}" as="parent">
<div class="datepicker {{@divClass}} {{if inline}}datepicker-inline{{/}}" as="parent">
{{if inline}}
{{if view === 'month'}}
<view name="month"></view>
Expand All @@ -11,7 +11,8 @@
<view name="decade"></view>
{{/if}}
{{else}}
<input type="text" value="{{active}}" class="form-control" on-focus="model.set('show', true)">
{{@content}}
<input type="text" value="{{active}}" class="form-control {{@inputClass}}" on-focus="model.set('show', true)">

<div style="position: relative">
<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="display: {{if show}}block{{/}};">
Expand Down