I've integrated several datepickers with lift, and the simplest solution I found was this:
1) Use JQueryUIdatepicker. http://marcgrabanski.com/pages/code/jquery-ui-datepicker Follow his instructions to download it from the JQueryUI site. This is one of the most stable datepickers out there, and it has support from the JQueryUI team. use their tool to package it, you'll get a .js and .css file to add to your page. 2) Adding the proper javascript and css to your page is straightforward: <head> <link rel="stylesheet" type="text/css" media="screen" href="/css/ jquery-ui-1.7.2.custom.css" /> <script id="jquery" src="/classpath/jquery.js" type="text/ javascript"/> <script id="dpick" src="/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" /> <script type="text/javascript" /> $(function(){ // Datepicker $('.datepicker').datepicker({ inline: false , dateFormat: 'mm/dd/yy', duration: '', constrainInput: true }); });; </script> </head> You can of course add this in a snippet, or to your page template, whichever suits your needs. Be sure to change the href paths to what you need. 3) The javascript above will use the date format mm/dd/yy and will bind a datapicker to any element with a class of datepicker. Now just create the following for use in your Mapped objects: class MyMappedDate[T<:Mapper[T]](owner: T) extends MappedDateTime[T] (owner) { /** * When _toForm is called, the class attribute's value will be set to this. * Simply override this with a different string to change the value. * * The default value is: <code>datepicker</code> ie: class="datepicker" */ def classValue = "datepicker" /** * Create an input field for the item that uses the datepicker class */ override def _toForm: Box[NodeSeq] = S.fmapFunc({ s: List[String] => { this.set(parseDate(s(0)))} // call when submitted }) { funcName => Full(<input type='text' class={classValue} id= {fieldId} name={funcName} lift:gc={funcName} value={is match {case null => "" case s => printDate(s)}}/>) } override def asHtml: Node = Text(is match {case null => "" case s => printDate(s)}) /** @return a SimpleDateFormat in the format "MM/dd/yyyy" **/ val printDateFormatter = new SimpleDateFormat("MM/dd/yyyy") /** @return a date formatted with the date format */ def printDate(in: Date) : String = printDateFormatter.format(in) /** @return a date formatted with the date format (from a number of millis) */ def printDate(in: Long) : String = printDateFormatter.format(new Date (in)) /** @return a date formatted with the date format (from a number of millis) */ def parseDate(dateString: String) : Date = printDateFormatter.parse (dateString) } You can of course modify this a number of ways: add additional date formats for printing dates in various ways, change how the class name is derived, etc. Hopefully this is helpful, -Grant On Oct 8, 5:43 am, Tweek <[email protected]> wrote: > Hi. > I'm totally beginer in Lift and i've never used JQuery. Can Anybody > tell me how to add DatePicker to my DateTime field in my website step > by step? > thanks and regards. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Lift" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/liftweb?hl=en -~----------~----~----~----~------~----~------~--~---
